WCAG Contrast Ratio
Measures how different text and background are in brightness, from 1:1 to 21:1.
Contrast = (L₁ + 0.05) ÷ (L₂ + 0.05)
Worked example: L₁ is the lighter relative luminance, and L₂ the darker. Black on white is (1 + 0.05) ÷ (0 + 0.05) = 21:1.
Why it matters
Low contrast makes text hard or impossible to read for many people.
How to use it
- AA needs 4.5:1 for normal text and 3:1 for large text.
- AAA needs 7:1 for normal text and 4.5:1 for large text.
- Check text on images and in hover states too.
Example
#767676 on white is about 4.5:1, while #949494 on white is only about 3:1.