WCAG Contrast Ratio, Explained with Real Numbers
How the WCAG contrast ratio is calculated from relative luminance, what AA and AAA actually require, and where the ratio breaks down.
4 min read · updated 2026
What the ratio measures
The WCAG 2.1 contrast ratio compares the relative luminance of two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Relative luminance weights the linearized sRGB channels at 0.2126 R + 0.7152 G + 0.0722 B — green contributes roughly 10× more than blue, which is why blue-on-black is harder to read than red-on-black at the same "distance".
The ratio ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). It is symmetric: swapping text and background never changes it.
The thresholds that matter
WCAG 2.1 level AA — the level most laws reference — requires:
- 4.5:1 for normal text (below ~18pt regular or ~14pt bold)
- 3:1 for large text (≥18pt regular, or ≥14pt bold)
- 3:1 for UI components and meaningful graphics (buttons, icons, focus rings)
- AAA (the stricter level) requires 7:1 for normal text and 4.5:1 for large text.
Where the ratio breaks down
The formula predates modern displays and treats perceived contrast linearly. A 4.5:1 pair in light gray-on-white can feel noticeably weaker than the same ratio in dark blue-on-white. APCA (the candidate replacement for WCAG 3) models this better by using polarity-aware exponents — that is why Tintiva shows both ratios side by side.
Practical rule: treat WCAG as the compliance floor and APCA (or your own eyes at 100% zoom on a phone) as the design check.