Color Contrast & Accessibility
Why Contrast Matters
Color contrast ensures text is readable for everyone, including people with visual impairments. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios that websites must meet for compliance.
WCAG Contrast Ratios
| Level | Normal Text | Large Text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Large text is defined as 18pt (24px) or 14pt (18.5px) bold.
Tips for Accessible Colors
- Don't rely on color alone to convey information, use icons or patterns too
- Test your palette against both light and dark backgrounds
- Consider color blindness, avoid red/green combinations for critical info
- Use tools to verify contrast before shipping
Check your colors with our Color Contrast Checker, simulate color vision deficiencies with the Color Blindness Simulator, and generate accessible palettes with the Color Palette Generator.
FAQ
Is WCAG AA enough?
AA is the legal minimum in many jurisdictions. AAA is recommended for body text and long-form content.
How is contrast ratio calculated?
It's the ratio of relative luminance of the lighter color to the darker color, plus 0.05 to both: (L1 + 0.05) / (L2 + 0.05).