WCAG Contrast Requirements Explained
The Web Content Accessibility Guidelines set exact minimum contrast ratios between text and its background. Here's what the numbers actually mean, and how to check your own colors.
The thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
These come from WCAG Success Criterion 1.4.3 (AA) and 1.4.6 / 1.4.11 (AAA and non-text contrast). AA is the level most legal accessibility standards reference, including the EU's EN 301 549.
What counts as "large text"
Large text is defined as 18 point (24px) regular weight or larger, or 14 point (about 18.66px) bold or larger. Everything smaller must meet the stricter normal-text ratio, regardless of font weight.
How the ratio is calculated
Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 the darker one. Relative luminance weights each channel by how the human eye perceives brightness — green contributes far more than blue:
L = 0.2126·R + 0.7152·G + 0.0722·B
(after gamma-correcting each channel — see WCAG's own formula for the exact piecewise function). This is the same formula Pigomentry's Contrast Checker uses.
Worked examples
| Pair | Ratio | AA normal (4.5:1) | AA large (3:1) |
|---|---|---|---|
| #14151A on #FAFAF8 | 17.9 : 1 | Pass | Pass |
| #6C5CE7 on #FFFFFF | 5.1 : 1 | Pass | Pass |
| #FFC85E on #FFFFFF | 1.5 : 1 | Fail | Fail |
| #767676 on #FFFFFF | 4.5 : 1 | Pass (borderline) | Pass |
Ratios above computed with the same relative-luminance formula described here; verify any pair yourself with the Contrast Checker.