What Is Color Contrast?
It's how different your text looks from what's behind it. Gray-on-white is low contrast, and a real chunk of your visitors genuinely can't read it. WCAG (Web Content Accessibility Guidelines) sets the minimum ratios so you're not guessing.
WCAG Contrast Requirements
- Level AA: 4.5:1 ratio for normal text, 3:1 for large text (18px+ bold or 24px+)
- Level AAA: 7:1 ratio for normal text, 4.5:1 for large text
- UI components and graphics: 3:1 minimum against adjacent colors
- Links must be distinguishable from surrounding text
Common Contrast Mistakes
- Light gray text on white backgrounds
- Colored text on colored backgrounds (blue on purple)
- Placeholder text too faint to read
- Buttons with insufficient text-to-background contrast
- Ignoring dark mode contrast requirements
Frequently Asked Questions
Is WCAG compliance legally required?
In many jurisdictions, yes. The ADA (US), EAA (EU 2025), and similar laws increasingly require WCAG 2.1 AA compliance for websites.
What contrast ratio does white text on black achieve?
21:1 — the maximum possible contrast ratio. This exceeds all WCAG requirements.