The Scale of Color Vision Deficiency
Color blindness — more accurately called color vision deficiency (CVD) — affects approximately 8% of men and 0.5% of women of Northern European descent. Globally, that means around 300 million people experience color differently than those with full color vision. If you design without considering CVD, you are potentially excluding a significant portion of your audience from critical information, interactions, or experiences.
Designing for color accessibility is not just ethically correct — it is also good business. Accessible design consistently produces cleaner, clearer, more universally effective visual communication.
Types of Color Blindness
Deuteranopia (Red-Green, Most Common)
Deuteranopia and its milder form deuteranomaly affect roughly 6% of men. People with deuteranopia have reduced or absent sensitivity to green wavelengths. Red and green appear similar — both may appear as shades of yellow-brown. This makes it particularly problematic when designs use red/green as the only signal (e.g., pass/fail indicators, stock market up/down, traffic light status).
Protanopia (Red Deficiency)
Protanopia affects about 2% of men. Red wavelength sensitivity is reduced or absent, causing red to appear very dark, almost black, while also creating red-green confusion. Red text on a dark background can become nearly invisible.
Tritanopia (Blue-Yellow, Rare)
Tritanopia affects less than 0.01% of the population and causes difficulty distinguishing blue from green and yellow from violet. It is the rarest common form of CVD.
Achromatopsia (Total Color Blindness)
Extremely rare, affecting fewer than 1 in 30,000 people. Those with achromatopsia see only in shades of gray. While designing for this extreme is uncommon, it reinforces the value of using non-color cues (shape, pattern, text) to convey information.
WCAG Contrast Ratio Guidelines
The Web Content Accessibility Guidelines (WCAG) provide measurable contrast standards for text readability:
- WCAG AA — Normal text: minimum contrast ratio of 4.5:1 between text and background
- WCAG AA — Large text (18pt+ or 14pt+ bold): minimum contrast ratio of 3:1
- WCAG AAA — Normal text: enhanced contrast ratio of 7:1 (gold standard for critical content)
- WCAG AAA — Large text: enhanced contrast ratio of 4.5:1
Use our contrast checker to verify your color combinations meet these thresholds. A common failure: light gray text on a white background can look modern and minimal but often fails AA compliance.
Design Tips for Color Accessibility
Never Rely on Color Alone
This is the cardinal rule. Any information conveyed by color must also be conveyed by another means — shape, icon, pattern, text label, or position. Error states should use an error icon plus text plus red, not red alone. Charts should use patterns or labels in addition to color coding.
Use Icons Alongside Color
A green checkmark and a red X communicate success/failure even if the user cannot distinguish green from red. A warning symbol + yellow versus an info symbol + blue communicates alert type beyond just color.
Choose CVD-Safe Color Combinations
Safe combinations that retain distinction across all common forms of CVD include:
- Blue + Orange (most universally distinguishable)
- Blue + Red
- Dark blue + Yellow
- Black + Yellow (highest visibility)
- Avoid Red + Green, Red + Brown, Green + Brown, Blue + Purple (problematic for various CVD types)
Use Contrast and Value, Not Just Hue
Colors that differ significantly in lightness (value) remain distinguishable even when hue cannot be perceived. A dark navy and a light yellow will remain visually distinct to someone who cannot see their hue difference.
Tools for Checking Your Designs
- Our contrast checker — verify WCAG compliance for any color pair
- Browser extensions that simulate various forms of color blindness
- Design tool plugins (Figma, Sketch) that preview your designs through CVD simulation
Accessibility in design is not a limitation — it is a discipline that makes every design better. Start with our color mixer and contrast checker to build palettes that work for everyone.