Color Accessibility and WCAG Contrast Checking
Approximately 300 million people worldwide have color vision deficiency. Designing with accessible contrast ratios ensures your content is readable by everyone, not just users with typical vision.
Key Takeaways
- The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between foreground text and background colors:
- The contrast ratio formula compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white).
- Light gray text (#999) on white (#FFF) has a ratio of only 2.85:1 — fails AA
- Beyond contrast ratios, avoid conveying information through color alone.
CSS Color Converter
Convert colors between hex, RGB, HSL, HWB, and named CSS colors
Understanding WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between foreground text and background colors:
| Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text is defined as 18px bold or 24px regular. Most body text falls under normal text rules.
How Contrast Ratios Work
The contrast ratio formula compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). Luminance is calculated by converting sRGB values to linear light and applying weighted coefficients: 0.2126R + 0.7152G + 0.0722B.
Common Accessibility Failures
- Light gray text (#999) on white (#FFF) has a ratio of only 2.85:1 — fails AA
- Placeholder text in forms is often too faint
- Colored text on colored backgrounds (e.g., orange on red) may pass hue contrast but fail luminance contrast
- Gradients and images behind text create inconsistent contrast across the text span
Color Blindness Considerations
Beyond contrast ratios, avoid conveying information through color alone. Red/green indicators should include icons or text labels. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, with deuteranopia (red-green) being the most common.
Practical Workflow
- Choose background and text colors
- Check the contrast ratio with a tool
- If below 4.5:1, darken the text or lighten the background until the ratio passes
- Simulate color blindness (protanopia, deuteranopia, tritanopia) and verify readability
- Test with a screen reader to ensure non-visual access to all information