What Is a Contrast Ratio?
A contrast ratio measures the difference in perceived luminance between two colors. The formula is defined by WCAG 2.1 as:
Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color's relative luminance and L2 is the darker color's. The range is 1:1 (identical) to 21:1 (black on white).
Why 4.5:1?
The AA threshold of 4.5:1 for normal text was chosen after extensive research to represent the minimum contrast needed for users with moderately low vision who don't use assistive technology. It roughly corresponds to a 3-step difference on the Munsell value scale.
WCAG 2.1 Requirements
| Level | Normal Text (< 18pt) | Large Text (≥ 18pt or bold ≥ 14pt) | UI Components |
|-------|---------------------|--------------------------------------|---------------|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | Not required |
Relative Luminance
Relative luminance is a linearized measure of light emitted. sRGB values are first gamma-corrected to linear light, then weighted by the human eye's sensitivity to each channel:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Green carries the most weight because the human eye is most sensitive to green wavelengths.