What the contrast ratio means
The contrast ratio compares the relative luminance of two colors. It runs from 1:1 (identical colors) to 21:1 (black on white). Higher ratios are easier to read, especially for people with low vision or when a screen is in bright light.
WCAG 2 requirements
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (18 pt, or 14 pt bold, and above) | 3 : 1 | 4.5 : 1 |
| Icons, buttons and form borders | 3 : 1 | – |
Level AA is the standard required by most accessibility laws and guidelines. Logos and purely decorative text are exempt.
How it is calculated
ratio = (L1 + 0.05) ÷ (L2 + 0.05)
L1 is the relative luminance of the lighter color and L2 that of the darker one. Luminance weights green most heavily, then red, then blue, matching the sensitivity of the human eye.