Colour Contrast: The Accessibility Rule Most Sites Fail

Low-contrast text is the most common accessibility failure on the web, and the one with the widest reach. It is not only a problem for people with visual impairments — it affects anyone reading on a phone in sunlight, on a cheap or poorly-calibrated monitor, or simply after the age of about forty, when the lens of the eye begins losing transmission.

It is also the easiest to prevent, because it is purely a number you can check.

The thresholds

Contrast is expressed as a ratio between the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white).

AA is the level most accessibility legislation references — the European Accessibility Act, and the ADA as interpreted in US case law. AAA is a target for long-form reading rather than a general requirement.

The non-text rule people miss

WCAG 2.1 added a requirement that is widely overlooked: 3:1 for non-text elements that convey meaning.

That covers form field borders, focus indicators, icon buttons, chart elements, and the boundary of any control a user has to find. A form whose input borders barely differ from the background fails, even if the label above it passes comfortably.

Focus indicators are the most consequential case. Keyboard users navigate entirely by seeing where focus is. A focus ring at 1.5:1 against the background is, functionally, no focus ring at all.

Where contrast quietly fails

Placeholder text. Almost always too light. Worse, it is frequently used as the only label — which fails contrast and labelling simultaneously, and the label vanishes the moment the user starts typing.

Disabled states. Technically exempt from the ratios. But if a user cannot read the disabled control, they cannot tell what is unavailable or why. Exempt is not the same as fine.

Text over images. The ratio changes across the image, so a caption that passes over the dark part of a photo fails over the light part. A scrim — a semi-transparent overlay, or a gradient behind the text — is the reliable fix.

Brand colours. Many brand palettes simply fail as text colours. Mid-tone oranges, yellows and light greens are the usual offenders: they look vivid and land somewhere around 2:1 against white. Use them for large display text, accents and backgrounds — and derive a darker variant specifically for body copy.

Hover and visited states. People check the default state and forget the others. Each state needs to pass on its own.

Why a passing ratio can still read badly

The WCAG formula measures relative luminance, which does not perfectly track human perception. Two consequences matter in practice.

Saturated colours read worse than their ratio suggests. Pure blue text on white passes comfortably on paper and is genuinely uncomfortable to read, because the eye has far fewer blue-sensitive cones and focuses blue light slightly differently.

Thin fonts read worse too. The formula knows nothing about stroke weight. 300-weight text at exactly 4.5:1 is noticeably harder than 400-weight at the same ratio. If you are using a light font weight, aim higher than the minimum.

Treat the threshold as a floor you must clear, not a target to design to.

Dark mode is not automatically better

Dark interfaces are often assumed to be easier on the eyes. For contrast purposes they are simply a different set of pairs to check, and they introduce a specific problem of their own.

Pure white text on pure black produces halation — the light text appears to bleed into the dark background, which is particularly pronounced for people with astigmatism. The usual fix is to pull both ends in: off-white text (around #e8e8f0) on a very dark grey rather than true black (around #0f0f14).

That is what this site does, and it is worth copying. You keep a high ratio without the glare.

Colour-blindness is a separate problem

Contrast and colour-blindness are frequently conflated. They are different failures with different fixes.

Around 8% of men and 0.5% of women have some form of colour vision deficiency, most commonly red-green. A red error message and a green success message can have identical luminance — perfect contrast against the background, and indistinguishable from each other.

The rule is simple: never encode meaning in hue alone. Pair colour with an icon, a label, a pattern or a position. A red border plus an error icon plus the word "Error" works for everyone; a red border alone does not.

Making it routine

Checking contrast once before launch does not work, because colours drift. A practical approach:

1. Fix the palette early. Define your text, surface and accent colours as CSS custom properties and check every text-on-surface pairing once. You then have a known-good set rather than ad-hoc choices.
2. Check each state — default, hover, focus, visited, disabled, and both themes if you have two.
3. Check the non-text elements — borders, focus rings, icons.
4. Automate what you can. Lighthouse and axe both catch contrast failures in CI.

Our contrast checker gives the ratio and which levels it passes for both text sizes, and runs entirely in your browser.

Frequently asked questions