Understanding Color Contrast for Accessibility
March 2025
For the complete 4000+ word guide with color blindness, palettes, and tools, see Complete Guide to Web Color Accessibility.
Color contrast is the luminance difference between text and its background. Poor contrast makes content hard to read, especially for people with low vision or color blindness. The WCAG guidelines define minimum ratios to ensure readability.
WCAG contrast ratios
Contrast ratio ranges from 1:1 (no contrast) to 21:1 (black on white). WCAG 2.1 specifies:
- AA (normal text): 4.5:1 minimum
- AA (large text): 3:1 minimum
- AAA (normal text): 7:1 minimum
- AAA (large text): 4.5:1 minimum
When to use AA vs AAA
Most sites aim for AA. It is the baseline for accessibility without being overly restrictive. AAA is stricter and suits high-visibility contexts like healthcare or education. Use our contrast checker to test combinations.
Testing your colors
Enter your foreground and background colors in the contrast checker. The tool shows the ratio and whether you meet AA or AAA. For color blindness, use the color blindness simulator to see how your palette appears to users with different vision.
Tools to use
- Contrast Checker – test any color pair
- Color Picker – pick and compare colors
- Color Blindness Simulator – simulate different vision types