WCAG color contrast: what AA and AAA actually require
Color contrast is the accessibility requirement that affects every design decision and the one most often checked last, after the palette is already picked. Knowing the actual numbers makes it possible to design within them from the start.
The numbers
WCAG defines contrast as a ratio between the luminance of text and its background, from 1:1 (identical) to 21:1 (black on white).
Level AA, the standard most laws and contracts reference:
- Normal text needs 4.5:1
- Large text needs 3:1
- UI components and graphics need 3:1
Level AAA, the stricter tier for reading-heavy applications:
- Normal text needs 7:1
- Large text needs 4.5:1
"Large text" means at least 24px regular weight, or at least 18.5px bold. Almost all body copy is "normal" text and needs the higher ratio.
What is exempt
Disabled controls, decorative elements that convey no information, logos, and text inside images that exists purely for decoration are exempt. Placeholder text is not exempt, which surprises many teams, since light gray placeholders on white backgrounds fail AA almost every time.
Why gray on white keeps failing
The most common failure is muted gray text on a white background. #999999 on white is 2.85:1, well below the 4.5:1 requirement. Designers reach for lighter grays because pure black feels harsh, but the floor for AA normal text on white is roughly #767676. Tinting the gray toward your brand color and darkening it slightly usually reads better than pure gray anyway.
Checking in practice
Contrast math is not something to do by eye. The ratio depends on relative luminance, which weights red, green, and blue differently because human eyes do. Two colors that "look fine" can fail, and pairs that look risky can pass.
Paste any two colors into the Color Converter & Contrast Checker to get the exact ratio and a pass/fail for AA and AAA at both text sizes. Check early, when changing a color costs nothing, instead of after the design review.