Color · (L1 + 0.05) / (L2 + 0.05)
WCAG contrast ratio
The 4.5:1 and 3:1 thresholds for readable text and UI components.
Key facts
| Formula | (L1 + 0.05) / (L2 + 0.05) |
|---|---|
| AA normal text | 4.5:1 |
| AA large text | 3:1 |
| AAA normal text | 7:1 |
| Large text | ≥18pt or ≥14pt bold |
| UI components | 3:1 against adjacent colors |
| Range | 1:1 to 21:1 |
What counts as large text
WCAG defines large text as at least 18 point (24 CSS pixels) regular, or 14 point (about 18.7 CSS pixels) bold. The larger glyphs can carry thinner strokes, so the threshold drops from 4.5:1 to 3:1.
Contrast is not readability
A ratio of 21:1 passes every threshold, but a wall of pure black on pure white can still be tiring. Contrast is a floor, not a design target. Font weight, size, letter spacing and line length all affect real readability.
Frequently asked questions
How is contrast calculated?
Convert each color to relative luminance, then divide the lighter plus 0.05 by the darker plus 0.05.
Does the ratio depend on hue?
Only through luminance. Two colors with the same luminance have the same ratio against a given background, regardless of hue.
What about disabled controls?
WCAG exempts inactive components from contrast requirements, but users still need to perceive them; keep a visible difference.