Understanding Color Contrast for Web Accessibility (WCAG)
Learn WCAG color contrast requirements, why they matter for accessibility, and how to test your website colors for compliance.
Why Color Contrast Matters
Color contrast is one of the most important aspects of web accessibility. Poor contrast makes text difficult or impossible to read for people with low vision, color blindness, or those viewing screens in bright sunlight. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency.
WCAG Contrast Requirements
- Level AA (minimum) - 4.5:1 ratio for normal text, 3:1 for large text (18px+ bold or 24px+ regular)
- Level AAA (enhanced) - 7:1 ratio for normal text, 4.5:1 for large text
- Non-text elements - 3:1 ratio for UI components and graphical objects
How Contrast Ratio Works
Contrast ratio is calculated using the relative luminance of the foreground and background colors. The scale ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). The formula accounts for how the human eye perceives different wavelengths of light.
Testing Your Colors
Use our Contrast Checker to instantly test any foreground/background color combination. It shows the exact contrast ratio and whether it passes WCAG AA and AAA standards for both normal and large text.
Common Mistakes to Avoid
- Light gray text on white backgrounds (popular but often fails AA)
- Relying solely on color to convey information (use icons or text too)
- Forgetting to test dark mode color combinations
- Placeholder text with insufficient contrast