Color contrast: the WCAG thresholds explained
Text needs a contrast ratio of at least 4.5:1 with its background for WCAG 2.2 level AA, or 3:1 for large text. Level AAA asks for 7:1, and 4.5:1 for large text.
Updated November 6, 2026 · Sources
The thresholds to remember
- Body text, level AA: 4.5:1 at least.
- Large text, level AA: 3:1.
- Body text, level AAA: 7:1.
- Large text, level AAA: 4.5:1.
- Icons, input borders and other meaningful graphics: 3:1.
- Large text means at least 18 points, or 14 points bold: about 24 and 18.7 CSS pixels.
How the ratio is calculated
First, the relative luminance of each color: L = 0.2126 R + 0.7152 G + 0.0722 B, on the linearized sRGB components.
The ratio is then (L₁ + 0.05) / (L₂ + 0.05), where L₁ is the lighter color. It runs from 1:1 (two identical colors) to 21:1 (black on white).
Examples that surprise
Gray #777777 on white gives 4.47:1: it just fails level AA. Its neighbor #767676 gives 4.54:1 and passes. For level AAA you need to go as dark as #595959 (7:1).
Ratios are rounded down: a threshold is a minimum, and 4.47 does not reach 4.5.
| Colors | Ratio | AA | AA large text | AAA |
|---|---|---|---|---|
| #000000 / #FFFFFF | 21:1 | ✓ | ✓ | ✓ |
| #595959 / #FFFFFF | 7:1 | ✓ | ✓ | ✓ |
| #767676 / #FFFFFF | 4.54:1 | ✓ | ✓ | — |
| #777777 / #FFFFFF | 4.47:1 | — | ✓ | — |
| #949494 / #FFFFFF | 3.03:1 | — | ✓ | — |
| #0F766E / #FFFFFF | 5.47:1 | ✓ | ✓ | — |
Common mistakes
- Using color alone to carry information (a field in error that only turns red, for example): add text or an icon.
- Forgetting placeholder text and disabled buttons that people still need to read.
- Checking text over an image against a single background color: test the lightest and the darkest area.
- Testing only in light mode: dark mode has its own colors to check.