What Is Color Contrast?
Color contrast is the difference in luminance between foreground text and background. Low contrast makes text hard to read, especially for users with visual impairments. WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios.
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.