Why contrast ratio matters
About 300 million people worldwide have some form of color vision deficiency, and many more experience reduced contrast sensitivity due to age, bright sunlight, or low-quality displays. When text and background colors are too similar, content becomes unreadable for a significant portion of your audience.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text remains readable across all visual abilities. Meeting these standards is also a legal requirement in many jurisdictions under accessibility law.
WCAG thresholds explained
- 3:1 — minimum for large text (18px+) and UI components (buttons, icons, input borders) at Level AA
- 4.5:1 — minimum for normal text at Level AA; also the AAA requirement for large text
- 7:1 — enhanced contrast for normal text at Level AAA — best for maximum accessibility
- 21:1 — maximum possible ratio (black on white)
Tips for improving contrast
- Darken text, not backgrounds — dark text on light backgrounds is usually easier to adjust than the reverse
- Avoid pure gray on white — light gray text (#aaa) on white is one of the most common failures
- Test placeholder text too — form placeholders often fail contrast requirements
- Don't rely on color alone — use icons, underlines, or weight to differentiate elements beyond color
- Check at multiple sizes — a color pair that passes for large headings may fail for body text