Why 83.9% of websites fail colour contrast

WebAIM audits the top one million home pages every year. The 2026 survey found detectable contrast failures on 83.9% of them, with an average of 34 low-contrast instances per page. The previous year it was 79.1%.

The number is going up. That is the interesting part, because contrast checking is not a tooling problem. WebAIM’s own checker is free, has been for years, and every designer knows it exists.

Checking is not the bottleneck

Ask designers what stops them fixing a contrast failure and the answers are strikingly consistent:

“Most want to follow the WCAG rules but get stuck going in circles not knowing how to fix colour contrast issues.”

“Many will say ‘pick accessible colours’ without really helping you understand how, especially when you have to stick to certain brand colours.”

“WCAG is intimidating and confusing for most. It tells you what needs to pass, but lacks guidelines on how to do this.”

None of these is a complaint about detection. Every one is about the step after: knowing what to change.

Existing tools answer “does this pass?” and then stop. That is a complete answer to the wrong question. The designer already suspected it failed. What they need is the nearest colour that works and still reads as the brand — and they are left to find it by nudging a hex value until the number goes green.

Four reasons it is getting worse, not better

Brand colours are constraints, not choices. The colour is in the logo, the deck, and a signed-off guideline document. “Pick a different colour” is not advice a designer can act on unilaterally. So the failure stays.

Dark mode doubled the surface area. Every palette now needs to work in two directions, and the WCAG 2 formula is least reliable at the dark end. A theme that passes on white and gets inverted without re-checking is a common and invisible failure.

Design systems propagate a single mistake everywhere. One under-contrast token in a component library reproduces across every product using it. Systems are a force multiplier in both directions.

Contrast is checked last. As one practitioner put it, many designers “only adjust the contrast near the end of the design phase, and only if it’s easy to do without spoiling their design.” By then the colour is load-bearing and changing it means revisiting decisions nobody wants to reopen.

What the number does and does not measure

Worth being precise. WebAIM’s survey detects failures automatically, which means it catches text-on-solid-background cases and misses others — text over images, text over gradients, and anything requiring judgement.

So 83.9% is a floor, not a ceiling. The real figure is higher.

It also does not imply those sites are unusable. Many failures are marginal — a 4.2:1 that should be 4.5:1. Those matter, but they are not the same as invisible text.

The fix that actually scales

Individual sites get fixed one at a time. The pattern that moves the aggregate number is making the correct choice the easy one:

Put the constraint in the token, not in the review. If your design system ships --text-brand already at a passing step of the ramp, nobody has to remember. The ramp did the remembering.

Test contrast in CI. A failing ratio should break a build the way a failing unit test does. We do this on our own site — the build fails if any of our own colour pairs stop passing our own tool. It caught seven real failures the first time we ran it, in chrome that passed WCAG 2 everywhere.

Check at the size and weight you ship. WCAG 2 cannot see typography, so a passing ratio on a 12px hairline caption is not evidence of anything. APCA models this, and it is uncomfortable — 14px regular cannot pass at any contrast.

Give people the answer, not the verdict. If a tool can compute that your brand blue needs to be 11% darker to pass while holding its hue, it should say so rather than reporting 3.02:1 and leaving.

The gap this closes

The reason we built our contrast checker the way we did is that last point. The diagnosis was never the hard part.

It searches your colour’s own lightness axis for the nearest value that passes, holds the hue so the result still reads as your brand, ranks the candidates by how little the colour moves, and offers to change the background instead when that is the smaller compromise.

You can try it with a colour you were told you had to give up.