Understanding WCAG Colour Contrast (Without the Jargon)

What a contrast ratio actually measures

A contrast ratio compares the relative luminance — the perceived brightness — of two colours. It runs from 1:1, meaning two identical colours, to 21:1, which is pure black on pure white. The calculation deliberately ignores hue and saturation, because luminance is what determines whether text is legible.

This surprises people. Two colours can be visually very different and still fail, because they are similar in brightness. Mid-blue text on a mid-red background looks strongly contrasting to someone with typical colour vision and is close to unreadable for someone with a colour vision deficiency, because there is no luminance difference to fall back on.

It also explains why light grey placeholder text fails so consistently. Designers choose it precisely because it recedes — but the property that makes it recede visually is exactly the property that makes it illegible for anyone with reduced contrast sensitivity.

The thresholds you need to know

WCAG 2.2 defines two conformance levels. Level AA, which is what accessibility legislation in most jurisdictions references, requires 4.5:1 for normal text and 3:1 for large text. Level AAA raises these to 7:1 and 4.5:1 respectively.

'Large text' has a specific definition that catches people out: 18 point, which is 24 pixels, or 14 point bold, which is 18.66 pixels. Most headings on most websites are smaller than this, and therefore subject to the stricter normal-text threshold despite looking substantial.

There is a third requirement that is widely missed: non-text contrast. Interface components and meaningful graphics — button borders, form field outlines, icons that carry meaning, focus indicators — need at least 3:1 against adjacent colours. A form input with a barely-visible border fails this even if its label passes comfortably.

• AA: 4.5:1 for normal text, 3:1 for large text — the practical standard.
• AAA: 7:1 and 4.5:1 — worth targeting for body text where feasible.
• Large text means 24px regular or 18.66px bold, not merely 'a heading'.
• Interface components and focus indicators need 3:1 against their surroundings.

Who this actually helps

Around one in twelve men and one in two hundred women have some form of colour vision deficiency. Far more people have reduced contrast sensitivity, which increases steadily with age and affects a large proportion of anyone over sixty. Cataracts, diabetic retinopathy and macular degeneration all reduce it further.

But the group that benefits most is everyone, situationally. Bright sunlight on a phone screen, a laptop at low brightness to save battery, a projector in a lit room, cheap display panels with poor contrast — all of these reproduce the same difficulty temporarily.

This is why contrast is worth treating as a baseline quality requirement rather than an accommodation. Designing for the least favourable conditions produces an interface that is more comfortable in all of them.

Fixing contrast without wrecking your design

The usual objection is aesthetic: high contrast looks harsh. In practice, this is nearly always solvable by adjusting lightness while keeping hue and saturation, which preserves the design's character.

Working in a perceptually uniform colour space such as OKLCH makes this far easier, because adjusting the lightness channel produces a predictable visual change rather than the uneven results HSL gives. Darkening a brand colour by ten percent lightness moves it towards passing without shifting its identity.

Where a brand colour genuinely cannot pass as body text — and pale yellows and light greens frequently cannot — the answer is to use it as an accent, a background with dark text on it, or a large display element, rather than forcing it into a role it cannot fill legibly.

• Adjust lightness rather than hue to preserve the design's character.
• Work in OKLCH so lightness changes behave predictably.
• Reserve colours that cannot pass for accents rather than body text.
• Check contrast at design time — retrofitting is far more expensive.