Why 4.5:1

The most-copied number in interface design, and what it actually measures. ← Workbench

Almost every style guide repeats it: body text must have a contrast ratio of at least 4.5:1. Few people can say what the two numbers measure, why the threshold sits at 4.5 rather than 4 or 5, or why pure black on pure white — the highest-contrast pair that exists — scores only 21:1 instead of infinity. The rule is worth understanding, because once you see how the number is built, the design advice around it stops being folklore and starts being arithmetic you can check yourself (the color picker here computes it for any color).

What the ratio measures

For two colors, compute a quantity called relative luminance for each. Take the red, green and blue channels, convert each from the 0–255 scale to 0–1, undo the display's gamma curve (a channel stored as 0.5 was captured from roughly 0.21 of real light — displays encode brightness non-linearly), and combine the three results with the weights human vision itself uses:

L = 0.2126·R + 0.7152·G + 0.0722·B

Green dominates because our eyes are most sensitive there; blue barely counts. The contrast ratio is then simply the larger luminance plus 0.05 divided by the smaller plus 0.05 — which makes the measure symmetric (swapping text and background changes nothing) and bounds every pair between 1:1 (identical colors) and 21:1 (white against black).

The +0.05 that keeps the world finite

That little offset looks arbitrary but does real work. Without it, black text (L = 0) on any background would produce an infinite ratio, and near-black shades would swing wildly. The 0.05 models the fact that no one views a screen through a perfect instrument: ambient light, screen glow and light scatter inside the eye put a floor under how dark "black" can ever be. Add it to both sides and the scale compresses into something that matches perceived legibility far better — white on black lands at (1.0 + 0.05) / (0.0 + 0.05) = 21, not ∞.

Why green text glows and blue text sinks

The channel weights explain color combinations that look counterintuitive on paper. Pure yellow has luminance ≈ 0.93 — nearly as bright as white — so yellow text on a white page scores about 1.07:1: unreadable, exactly as your eyes report. Pure blue has luminance ≈ 0.07, so the same blue on white scores about 8.6:1 — it passes the strictest threshold even though saturated blue feels loud. Loudness and luminance are different things; the formula only cares about the second one, and for readability that is the right call.

Where 4.5 comes from

The number is older than the web. It descends from research on reading displays under realistic conditions, codified in an ANSI workstation standard from 1988; the web's first accessibility guidelines adopted the figure in 1999, and WCAG 2 kept it while rebuilding everything else around the luminance formula above. The current thresholds fall out of one observation: bigger glyphs need less contrast to survive. So the rule scales with text size:

Normal body text needs 4.5:1; large text (roughly 24 px, or 18.7 px bold) needs 3:1; the strictest tier for normal text is 7:1. Separately, icons, form borders and other UI affordances are treated like large text — 3:1 — because you locate and recognize them, but rarely read them.

The gray that fails by 0.03

Here is how sharp the edge is. On a white page, #767676 — a perfectly ordinary mid-gray — scores 4.54:1 and passes. #777777, one bit brighter per channel, scores 4.47:1 and fails. To the naked eye they are the same gray; to the threshold they are different worlds. This is why placeholder text so quietly fails audits: #999 on white is about 2.85:1, half the required contrast, and it looks fine in a well-lit room to a reader under 40. The threshold is calibrated for the worst case that matters — low vision on a mediocre screen — not for the reviewer's ideal conditions.

What the number doesn't know

The formula is honest about being a floor, not a guarantee. It measures text against its flat background and knows nothing about gradients or images behind text, halation around bright text on dark backgrounds (many readers find pure white on pure black harsher than 21:1 suggests), font weight, letter spacing, or motion. Treat 4.5:1 as the minimum a design must clear to be legible at all — then let typography do the rest. And when in doubt about a specific pair, measure it rather than eyeball it; the color picker shows the ratio and its pass/fail verdict for any color you throw at it.