Color Contrast Is Still the Web's Most Common Accessibility Failure. Here's Why

ClearPath Team · 2026-07-29 · 6 min read

Every year, WebAIM runs an automated scan of one million home pages and publishes what it finds. Every year, the same problem sits at the top of the list. In the most recent scan, low contrast text below the WCAG 2 AA thresholds was found on 83.9% of home pages, an increase from 79.1% the year before, and each home page had an average of 34 distinct instances of it. This has been the top issue for seven straight years running.

That's not a niche problem. That's most of the web. And it's one of the easier fixes on the list, which makes the numbers even harder to explain away.

What color contrast actually means

Contrast ratio measures how much the brightness of your text differs from the brightness of its background. The ratio ranges from 1:1 for no contrast between identical colors, up to 21:1 for maximum contrast, which is pure black on white. WCAG doesn't ask for a specific color palette. It asks for a minimum gap between foreground and background so people with low vision, color blindness, or aging eyes can actually read what's on the screen.

The specific numbers, for WCAG 2.2 Level AA:

• Normal text needs a contrast ratio of at least 4.5:1, and large text needs at least 3:1.
• Large text is defined as text that is 18pt and larger, or 14pt and larger if it's bold, and gets a lower requirement because it's easier to read at size.
• UI components and graphics, like form input borders, need at least 3:1 contrast under WCAG 2.1.
• Level AAA, the stricter tier most businesses don't need to hit, requires at least 7:1 for normal text and 4.5:1 for large text.

One detail trips up a lot of designers: you can't round up. A commonly used gray like #777777, sitting at a 4.47:1 ratio, still fails the 4.5:1 requirement. Close doesn't count. That kind of near-miss is exactly why this error shows up so often in scans, teams pick a shade that looks fine to them and never run the actual math.

Why this keeps happening

Contrast failures rarely come from one bad decision. They pile up from a handful of habits that seem harmless in isolation:

• Light gray text on white. It reads as clean and modern in a mockup, but a lot of these "elegant" grays land well under 4.5:1.
• Placeholder text used as a label. Placeholder styling is almost always lighter than body text, so if it's the only cue for what a field needs, it's probably failing contrast too.
• Text over photos or gradients. A hero image that's dark in one corner and light in another can push white text below the threshold the moment it slides over a lighter patch.
• Brand colors applied without checking. A brand's signature blue or teal often looks great on a logo and terrible as body text on a white card.
• Disabled-looking buttons that are actually active. Low contrast is sometimes used on purpose to signal "inactive," but if the button still works, screen reader users get no such cue and low vision users just see a button they can barely find.

None of this is usually intentional. It's what happens when contrast checking isn't a step in the design process, just a thing that gets caught, or doesn't, during a scan months later. A widget like ClearPath can give visitors a way to boost contrast on the spot while a team works through this list, but it won't catch these habits during design, that still comes down to checking colors before they ship.

How to actually check it

You don't need special equipment. A few practical steps:

1. Pick a contrast checker tool and paste in your foreground and background hex codes. WebAIM's own checker is free and does the math instantly.
2. Check your body text first, since that's where most visitors spend their time reading.
3. Then check links, buttons, form labels, and error messages. These carry meaning, so they can't rely on color alone to communicate anything.
4. Check text over images specifically at the lightest point of the image behind it, not just the average.
5. Build a short list of approved color pairings for your team so nobody has to re-check the same combination twice.

Six categories of errors make up the overwhelming majority of what WebAIM finds site to site. 96% of all detected errors fall into just six categories, and these have been the same top offenders for the last seven years, meaning fixing this short list would meaningfully improve accessibility across the web. Contrast sits at number one on that list every single year.

Who this actually affects

Low contrast isn't just a "vision impairment" issue in the narrow sense. Insufficient color contrast affects an estimated 300 million people with color vision deficiencies worldwide, plus anyone viewing screens in bright sunlight or on a low-quality display. That covers a huge range of everyday situations: someone reading your site on their phone outside, an older visitor with age-related vision changes, someone with a migraine who's turned their brightness down, or a person with dyslexia who relies on strong contrast to track text at all. For this range of visitors, having an on-page option to switch to a high contrast profile, which is one of the tools ClearPath offers, can make a page usable in the moment even before any code changes happen.

Fixing the code is the only real fix

Here's the part that matters most: contrast is a design and code problem, and it needs a design and code fix. If your body text is #999999 on white, someone needs to change that hex value in your stylesheet. No overlay or widget can rewrite your CSS for you, and any tool that claims otherwise is overselling what it does.

Contrast is one of the few accessibility issues where "good enough" is measurable. Run the numbers, fix what fails, and you'll have handled the single most common accessibility error on the web, the one that's been sitting at number one for seven years running.