Color Accessibility Design — Complete Guide
How to design color systems that work for everyone — not just users with perfect vision in ideal conditions.
Why Accessibility Matters
Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Millions more have low vision, age-related contrast loss or are simply using their phone in bright sunlight. Design decisions made without accessibility in mind exclude all of these people.
In many jurisdictions, WCAG AA compliance is a legal requirement. Even where it's not legally required, it's ethically essential and practically improves the experience for everyone.
WCAG 2.2 Requirements
Text Contrast
| Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Non-Text Contrast
UI components (icons, borders, focus indicators) require 3:1 contrast against adjacent colors.
Testing Tools
Contrast Checker
The most important tool. Our Contrast Checker uses the exact WCAG formula to verify every text/background pair.
Color Blindness Simulator
Our Color Blindness Simulator shows how your colors look to people with different types of CVD.
Accessible Palette Generator
Our Accessible Palette Generator generates palettes that are guaranteed to meet WCAG requirements.
Design Principles
Never Use Color Alone
Color cannot be the sole means of conveying information. Form errors need icons and text, not just red borders. Chart series need different shapes or patterns, not just different colors.
Test at Extreme Conditions
Test your design in bright sunlight, at 200% zoom, on an old monitor, and with a color blindness simulator. If it works in all those conditions, it will work everywhere.
Target Beyond WCAG AA
WCAG AA is the baseline. For critical text, target AAA (7:1). The extra contrast doesn't hurt most designs and helps a lot of users.
Consider Dark Mode
Colors that pass WCAG in light mode often fail in dark mode. Test both.
Watch Interactive States
Hover, focus and disabled states all need to meet their own contrast requirements. A button that looks fine but has an invisible focus state is not accessible.
Common Accessibility Failures
Light Gray Text on White
Common in minimalist designs. Fails WCAG AA (needs 4.5:1). Use a darker gray that passes.
Colored Text on Colored Background
Colored text on colored backgrounds often fails. Unless the pair has been specifically tested, it's a risk.
Yellow Text
Yellow text on white fails all contrast requirements. Yellow only works as a background with dark text.
Placeholder Text
Placeholder text is frequently too light to read. Test it like any other text.
Disabled States
Disabled elements are often reduced to nearly invisible. WCAG doesn't formally exempt them — keep essential text readable even in disabled states.
Practical Workflow
- Design with accessible defaults: Choose colors that naturally have high contrast
- Test every combination: Don't assume; verify with a contrast checker
- Test with assistive tech: Screen readers, keyboard navigation, high contrast mode
- Iterate: Fix failures before shipping
- Monitor: Accessibility regressions are common — test after every change
Legal Considerations
WCAG compliance is legally required in many jurisdictions:
- EU: Web Accessibility Directive (public sector)
- US: ADA (courts have ruled it applies to websites)
- UK: Public Sector Bodies Accessibility Regulations
- Canada: AODA (Ontario), Accessible Canada Act
- Australia: Disability Discrimination Act
Non-compliance can result in lawsuits, fines and reputational damage. Accessibility is not optional.