What the WCAG contrast ratio actually tells you
5 Oct 2026 · Colour · 7 min read
Type two colours into a contrast checker and you get a number like 7.2:1, plus a verdict: AA pass, AAA fail. The number looks authoritative. It's worth knowing exactly what it is — arithmetic about colour values — and what it isn't: a measurement of what anyone actually sees.
How the number is built
The formula takes each colour, converts it to relative luminance (roughly, how bright the colour is to human vision, with green counting far more than blue), then divides the lighter by the darker with a small offset. Pure black on pure white scores 21:1, the maximum. Two identical colours score 1:1. Everything else lands in between.
Where 4.5:1 comes from
The WCAG thresholds weren't pulled from thin air — 4.5:1 for normal text roughly corresponds to the contrast needed by someone with moderately low vision (around 20/40) to read comfortably. Large text gets a lower bar (3:1) because bigger glyphs are inherently more legible. AAA's 7:1 is the stricter tier for enhanced accessibility. They're principled cutoffs, but they're still cutoffs: 4.4:1 isn't suddenly unreadable and 4.6:1 isn't suddenly perfect.
What the number can't tell you
- Your screen isn't the formula's screen. The math runs on hex values. A laptop at low brightness in a bright room shows you something very different from a calibrated monitor in a dark one — the ratio is identical in both cases.
- It ignores everything except the two colours. Font weight, size, letter spacing and background texture all affect legibility; the ratio knows none of them (beyond the large-text distinction).
- It's necessary, not sufficient. Passing AA is the floor of accessible design, not the ceiling. Colour-blind users, for instance, may still struggle with pairs the formula approves if the distinction relies on hue rather than lightness.
Use the ratio as what it is: a fast, objective, travel-anywhere check that catches the obvious failures before real humans ever squint at your design. Then still look at it yourself — preferably on the worst screen you can find.
Luminance, in plain words
Relative luminance is the formula's answer to a simple question: how bright does this colour look to a human eye? Not how bright the red, green, and blue numbers are on paper — how bright the person perceives the mix. Human vision is wildly uneven across the spectrum: green light contributes the most to perceived brightness, red less, and blue surprisingly little. The formula bakes that in with fixed weights — roughly 0.2126 for red, 0.7152 for green, and 0.0722 for blue — which is why a pure blue (#0000FF) looks so much darker than a pure green (#00FF00) even though both are "fully on" in one channel.
Before weighting, the formula undoes your screen's gamma curve: the 0–255 values in a hex code aren't proportional to actual light, so each channel is converted to "linear light" first (dark values get stretched, bright values compressed). Then the weighted sum gives a luminance between 0 (black) and 1 (white). The final ratio is (lighter + 0.05) ÷ (darker + 0.05). The 0.05 offsets keep the math sane when one colour is pure black. Run black (0) and white (1) through it and you get 1.05 ÷ 0.05 = 21:1 — the maximum possible score.
Common pairs and what they score
Knowing a few reference points makes the numbers intuitive. These are approximate, computed from the formula above:
| Pair | Ratio | Verdict for normal text |
|---|---|---|
| Black on white | 21:1 | AAA pass |
| #595959 grey on white | ~7:1 | AAA pass |
| #767676 grey on white | ~4.5:1 | AA pass, right on the line |
| #1A73E8 blue on white | ~4.6:1 | AA pass |
| White on #B06000 orange | ~4.5:1 | AA pass, right on the line |
| #FBBC04 yellow on white | ~1.6:1 | Fail — decorative use only |
| #999999 grey on white | ~2.8:1 | Fail for text |
Notice how #767676 sits almost exactly on the AA boundary — it's the grey designers reach for when they want text "softer than black" without failing the check, and it illustrates how thin the line is. Meanwhile #999999, a grey that feels readable on a good monitor, scores 2.8:1 — a clean fail. The formula is stricter than your eyes on a good day, which is precisely the point: it's calibrated for bad days, bad screens, and bad eyes.
The thresholds, spelled out
Four numbers cover nearly every situation:
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
"Large text" has a precise definition: at least 18pt (24 CSS pixels) for regular weight, or 14pt (about 18.7 CSS pixels) for bold. Anything smaller counts as normal text and faces the higher bar. Beyond text, the guidelines ask for 3:1 on meaningful non-text elements too — the borders of input fields, the outlines of icons, the edges of focus indicators — anything a user needs to see to understand the interface.
Which level should you aim for? AA is the widely adopted legal and practical standard — it's what most accessibility policies and regulations reference. AAA is genuinely hard for body text (it rules out most mid-tone greys entirely), so treat it as an aspiration for key content rather than a site-wide mandate. Passing AA everywhere and AAA where you easily can is a defensible, honest target.
When your brand colour fails
This is where theory meets the marketing department. Brand palettes are chosen for personality, not luminance, and the signature colour often fails against white — bright yellows, light teals, soft corals. You don't have to abandon the brand; you have to be strategic about where the colour carries meaning.
- Nudge the shade for text. Darkening a brand yellow by 15–20% for body text while keeping the bright version for large headings and accents preserves the brand feel and passes the check. Nobody notices the two yellows are different; everybody notices they can read the text.
- Flip the pairing. A light colour that fails as text on white often passes as a background with dark text on it. White text on #FBBC04 fails at 1.6:1; near-black text on #FBBC04 scores well above 10:1.
- Reserve failing colours for non-text roles. Borders, decorative shapes, large display headings, and illustrations don't carry the same burden as body copy. Use the brand colour where it shines and a passing colour where people read.
- Put text on a scrim. Text over brand-coloured imagery or gradients can sit on a semi-transparent dark or light panel. The checker measures the final rendered colours, so test the combination as it actually appears, not the brand swatch in isolation.
The caveat: the ratio is the floor, not the ceiling
Passing AA is where accessibility work starts, not where it ends, because the formula is blind to almost everything except the two hex values. Thin typefaces at small sizes can pass 4.5:1 and still be genuinely hard to read — the ratio counts colour difference, not stroke width. Reversed text (light on dark) follows the same formula but behaves differently in the real world, especially for readers with astigmatism, who often find light-on-dark text harder despite identical scores.
Colour-blind users add another dimension the ratio ignores. Two colours can score 5:1 while being nearly indistinguishable to someone with red-green colour blindness, if the difference lives in the red channel rather than in lightness. The ratio measures total luminance difference, not whether the hue difference survives a colour vision deficiency — so never use colour alone to convey meaning, even when the numbers pass.
And context matters more than any single number: text over a photograph, text that moves, placeholder text inside inputs (which browsers render faintly by default), and disabled buttons all fail users in ways a hex-pair ratio can't capture. Run the checker, fix what it flags, and then do the thing no formula can — read your own site on a dim phone screen, in sunlight, and ask whether you'd honestly want to read a paragraph of it.