WCAG color contrast requirements, explained
Color contrast is one of the most common accessibility failures - and one of the easiest to fix. Here is exactly what WCAG 2.1 and 2.2 require, why, and how the numbers are derived.
The minimums (Success Criterion 1.4.3, AA)
| What | AA (1.4.3) | AAA (1.4.6) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥ 24px / 18.66px bold) | 3:1 | 4.5:1 |
| UI components & graphics (1.4.11) | 3:1 | - |
| Incidental / disabled / logos | exempt | exempt |
Non-text contrast (1.4.11)
Added in WCAG 2.1, this criterion extends the 3:1 minimum to interactive components (buttons, inputs, focus indicators) and to graphical objects needed to understand content (icons, chart lines). It is frequently missed because teams only check body text.
How the ratio is calculated
Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color. The result ranges from 1:1 (no contrast) to 21:1 (pure black on pure white). Because luminance is perceptual, two colors with similar brightness can fail even when they look different in hue.
Check any pixel on your screen
TheWCAG computes all of the above live as you pick colors from any app - with the worst-case pixel across gradients, AA/AAA verdicts, and APCA.
FAQ
- What contrast ratio does WCAG require?
- WCAG 2.1/2.2 AA requires 4.5:1 for normal text, 3:1 for large text, and 3:1 for user-interface components and meaningful graphics. AAA requires 7:1 for normal text and 4.5:1 for large text.
- What counts as large text?
- Text that is at least 24px (18pt) regular, or 18.66px (14pt) bold. Large text has a lower contrast requirement because bigger glyphs remain legible at lower contrast.
- How is contrast ratio calculated?
- It is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. Ratios range from 1:1 (identical) to 21:1 (black on white).