Lesson 3
WCAG Contrast Basics
Contrast ratios, AA/AAA targets, and text on colored backgrounds.
Readable UI is not subjective taste—it is measurable contrast between text and its background.
Contrast ratio
WCAG defines contrast as a ratio from 1:1 (identical) to 21:1 (black on white). Higher is more readable for more users, including low vision and bright outdoor glare.
Tools compute relative luminance of foreground and background, then apply the standard formula. You should not eyeball small gray text on tinted cards.
AA vs AAA targets
Common minimums for normal text (under 18pt regular / 14pt bold):
| Level | Minimum ratio |
|---|---|
| WCAG AA | 4.5:1 |
| WCAG AAA | 7:1 |
Large text has lower thresholds (3:1 for AA). Icons and decorative glyphs may be exempt, but interactive labels are not.
Many product teams ship AA as default; AAA for body copy is ideal but not always feasible on colorful marketing backgrounds.
Background matters
A blue button label must pass contrast against the button fill, not the page behind the button. Semi-transparent overlays composite with whatever is underneath—check the worst-case wallpaper or photo.
Status colors (success, warning, danger) often fail when paired with white text at light saturations. Darken the fill or switch to dark text.
Do not rely on color alone
Red/green status dots fail for color-blind users. Pair color with icons, labels, or patterns. Contrast tools do not replace redundant encoding.
Testing workflow
- Pick foreground and background tokens from your theme
- Measure contrast in a converter or design plugin
- Adjust lightness before hue when fixing failures—usually fewer side effects
- Re-test hover/focus states; they are separate pairs
Key takeaway
Ship text pairs with documented contrast ratios. Fixing contrast after launch is expensive; bake checks into token reviews.