Contrast ratios look arbitrary until you meet their numerator: relative luminance — a single number (0 to 1) describing how bright a color is to human vision. Understand how it is computed and every WCAG verdict becomes predictable.
The computation
- Linearize each channel: sRGB values are gamma-encoded for screens — divide by 255, then undo the gamma (values ≤ 0.03928 ÷ 12.92; others ^2.4 curve).
- Weight perceptually: 0.2126 R + 0.7152 G + 0.0722 B — green dominates because human vision's green receptors carry most brightness information.
- Ratio: (lighter L + 0.05) ÷ (darker L + 0.05).
The green lesson
The 0.7152 green weight explains the classic failure: pure red (#FF0000, luminance 0.21) against pure green (#00FF00, luminance 0.72) scores only 2.1:1 — a FAIL — despite being vividly different hues. Hue difference is not luminance difference; color-blind users (8% of men) see neither, and the ratio knew all along.
| Pair | Ratio | Verdict |
|---|---|---|
| Black on white | 21:1 | AAA — the ceiling |
| #4B5563 on #F9FAFB (gray on gray) | ~8:1 | AAA — dull but readable |
| Pure red on pure green | 2.1:1 | FAIL — vivid ≠ readable |
| White on #4F46E5 (indigo button) | ~6.3:1 | AA+ — the good pattern |
Why the 0.05 offsets
The +0.05 in the ratio prevents division by zero at pure black, and models the eye's contrast response at the extremes. The constants are calibration — the structure (luminance ratio) is the idea.
Building palettes that pass
- Design against luminance, then check hue: pick text and background luminances at least 0.25 apart for body text.
- Test every pair that touches: text/background, button/border, focus ring/background — contrast failures hide in states.
- Use the checker in design review, not after launch — the fix is always cheaper as a hex edit than as an audit finding.
Relative luminance is the bridge between what screens emit and what humans see — and the WCAG ratio is that bridge, audited. The math takes a screen to learn and pays out on every color decision after.