Color contrast and accessibility (WCAG)

Colour contrast is the difference in luminance between text and the background behind it. It is the most objective accessibility rule there is — it has a number, a formula and can be checked automatically — and it is also one of the most frequently violated in design.

The contrast ratio

ratio = (L1 + 0.05) ÷ (L2 + 0.05)

Where L1 is the relative luminance of the lighter colour and L2 of the darker. The result runs from 1:1 (two identical colours, invisible text) to 21:1 (pure black on pure white).

Relative luminance is not perceived brightness: each RGB channel is normalised, linearised through a gamma curve and weighted, with green contributing far more than blue — because the human eye is most sensitive to it. That is why two colours that look equally dark can have very different contrast.

The WCAG thresholds

Element	Level AA	Level AAA
Normal text	4.5:1	7:1
Large text (≥ 24 px, or ≥ 19 px bold)	3:1	4.5:1
UI components and graphics	3:1	—
Decorative text or logotypes	exempt	exempt

AA is the level referenced by most digital accessibility legislation and the practical target for any site. AAA is recommended where the audience includes many people with low vision.

Why 4.5:1 and not some other number

The value is not arbitrary. It starts from the premise that someone with 20/40 visual acuity — a common loss from around age 60, and not classed as a disability — perceives reduced effective contrast compared with normal vision. The 4.5:1 figure is what compensates for that loss.

Which is why contrast is not a niche concern: it affects anyone past a certain age, and anyone in adverse conditions — a phone in sunlight, a screen dimmed to save battery, a cheap monitor, tired eyes at the end of the day.

The most common failures

• Light grey text on white. Grey #999999 on white gives 2.85:1 — a failure. To pass AA on white, grey must be at least #767676 (4.54:1).
• Form placeholders. Usually the lightest element on the page, and frequently carrying essential information. If the placeholder is the only indication of what to enter, it must meet the normal-text rule.
• Text over images. Contrast varies pixel by pixel. The fix is a semi-transparent scrim or a shadow behind the text — never trusting the photo.
• Disabled states. Inactive controls are often exempt, but if the only way to tell something is disabled is its light colour, the information is lost.
• Colour alone carrying meaning. A red border for an error excludes anyone who cannot distinguish red — around 8% of men have some colour vision deficiency. Add an icon or text.

The detail that sinks a lot of attractive design

Vivid, saturated colours deceive. A bright lime green looks strong, but it has high luminance — nearly as much as white. White text on that green can come out at 1.5:1, unreadable, even though the combination looks lively on the designer's screen.

The practical rule: saturation is not contrast. What matters is the luminance distance, and it is dominated by the green channel. Swapping a blue for a green of the same apparent intensity can completely change the test result.

How to fix it without redoing the design

Almost every contrast failure resolves by moving one variable, and the order below preserves the visual identity:

1. Darken the text colour, do not change the hue. Colour tools let you lower lightness while holding hue and saturation — the green stays the same green, just darker.
2. If light text sits on a coloured background, darken the background. This is the usual route for buttons: keep the text white and darken the fill, resolving it without altering hierarchy.
3. Increase font size or weight. At 24 px (or 19 px bold) the threshold drops from 4.5:1 to 3:1 — sometimes the least invasive change available.
4. Only then reconsider the palette.

It is worth automating: a checker running alongside the build catches regressions nobody notices by eye. Darkening a background by one shade can push secondary text below the threshold without anything looking broken.

Frequently asked questions

How do I test my site's contrast? Contrast checkers compute the ratio from two hex colours. Modern browsers also ship accessibility audits in their developer tools, which sweep the whole page and list the failures.

Does dark mode need the same numbers? It does, and it does not pass automatically. Text that works in the light theme can fail in the dark one and vice versa — both themes must always be checked separately.

Can contrast be too high? It can. Pure black on pure white (21:1) causes discomfort and a shimmering sensation for some people, particularly with dyslexia or light sensitivity. Very dark grey on a slightly warm white is usually more comfortable and still passes comfortably.

Does the rule apply to icons? To those carrying information, yes: functional icons and input borders need 3:1 against the adjacent background. Purely decorative elements are exempt.

Source: W3C — Web Content Accessibility Guidelines (WCAG) 2.2, success criteria 1.4.3 (Contrast Minimum), 1.4.6 (Contrast Enhanced) and 1.4.11 (Non-text Contrast).