Beyond the well-known light-text-on-light-background problem, several other contrast mistakes show up repeatedly in real design work, often in places that don't immediately register as "text contrast" issues at all. Knowing the fuller list makes for a more thorough review than checking body text alone. None of these require exotic tools to catch, just a slightly more structured, deliberate review process than a single quick pass.
Placeholder text with insufficient contrast
Form field placeholder text is very commonly styled in a light gray specifically to visually distinguish it from actual entered content, but this styling choice frequently drops well below accessible contrast levels, which matters more than it might seem since placeholder text sometimes carries genuinely important instructions, not just decorative filler.
Text over images without a sufficient overlay
Text placed directly over a photograph or background image, without a sufficiently dark or light overlay behind it, produces contrast that varies unpredictably depending on which specific part of the image sits behind the text, and can fail badly in the busier, more visually complex regions of that image even if it happens to pass in others.
Disabled or inactive states styled too faintly
Disabled buttons and inactive form fields are often intentionally styled with lower contrast to visually communicate their inactive state, but this can go too far, making it genuinely difficult to tell whether an element is present at all, versus just currently disabled — a distinction that matters for users trying to understand what's actually on the page.
Icon-only buttons with insufficient contrast against their background
An icon button using a light gray icon on a white or near-white background can fail contrast requirements just as easily as text can, though this specific case is frequently overlooked during review since it's not literally text — the same underlying legibility concern still applies to any meaningful visual element.
Hover and focus states that reduce contrast instead of maintaining it
Some interactive hover or focus effects lighten or fade an element specifically to signal the interactive state change, but this can inadvertently drop contrast below an acceptable threshold at exactly the moment a user is actively engaging with that specific element, which is a particularly poorly timed moment for a contrast failure to occur.
A practical review habit that catches most of these
Reviewing a design specifically for contrast issues in a dedicated pass — checking body text, placeholder text, text-over-images, disabled states, icon-only elements, and interactive states each on their own, one at a time, rather than only checking primary body text in isolation — catches meaningfully more of these real, common issues than a single general visual review typically does.
Why a dedicated pass catches more than a general review
Each of these specific patterns tends to hide in a different part of a design — forms, images, disabled states, icons, interactions — which is exactly why checking them as separate, explicit categories catches meaningfully more real issues than a single broad "does this look okay" pass ever does.
Try the Contrast & A11Y tool yourself — free, instant, nothing sent anywhere.
Open the toolFrequently asked questions
Does placeholder text need to meet the same contrast standard as regular text?
Placeholder text is often held to the same general accessibility expectations as any other meaningful text, particularly when it conveys genuinely important instructions rather than purely decorative filler, so it's worth checking rather than assuming a lower bar automatically applies.
How can I fix contrast problems with text placed over a photo?
Adding a semi-transparent dark or light overlay behind the text, consistently covering the full area the text occupies, creates a more predictable, uniform background for the text to sit against, regardless of what's happening in the underlying image.
Should disabled buttons meet the same contrast standard as active ones?
WCAG generally exempts purely disabled, non-interactive elements from strict contrast requirements, but there's still a practical readability concern in making sure a disabled element remains clearly identifiable as present on the page, even if its exact styling doesn't need to hit the same bar as active content.
Why do icon-only buttons often get missed during a contrast review?
Because reviewers often focus specifically on text when checking contrast, overlooking that icons and other meaningful non-text visual elements carry the same underlying legibility concern and are subject to their own separate WCAG contrast requirement.
