The Scope of Color Vision Deficiency
Color blindness — more precisely called color vision deficiency (CVD) — affects approximately 300 million people worldwide. In populations of Northern European descent, it occurs in around 8% of males and 0.5% of females, making it one of the most common inherited traits in humans. In a typical enterprise software user base of 10,000 people, you can statistically expect 400 to 800 users with some form of CVD.
Unlike many accessibility considerations that require specialized hardware or software, color blindness impairs the ability to distinguish everyday digital interfaces without any apparent indication. Users with CVD rarely report their condition; they quietly struggle with interfaces that rely on color as the sole means of communication.
The Main Types of Color Blindness
| Type | Prevalence (Males) | What They Cannot Distinguish | Affected Color Pairs |
|---|---|---|---|
| Deuteranopia / Deuteranomaly | ~5% (most common) | Red-green distinction (green cone missing/deficient) | Red/green, purple/blue, orange/brown |
| Protanopia / Protanomaly | ~2.5% | Red perception (red cone missing/deficient) | Red appears very dark, confusion with green/brown |
| Tritanopia / Tritanomaly | ~0.001% (rare) | Blue-yellow distinction (blue cone missing) | Blue/green, yellow/pink, purple/red |
| Achromatopsia | ~0.003% | All color — sees only grayscale | Any color distinction |
The Fundamental Rule: Never Use Color Alone
WCAG 2.2 Success Criterion 1.4.1 (Use of Color) states explicitly: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
This single principle, applied consistently, eliminates the majority of color blindness accessibility issues. Every piece of information conveyed through color must have a redundant visual cue:
- Form validation errors: Do not only change the input border from gray to red. Add an error icon, a descriptive error message below the field, and optionally a text label color change.
- Chart data series: Do not differentiate data series solely by color fill. Add distinct patterns, icons, or direct labels to each series.
- Status indicators: Traffic-light systems (red/amber/green) must include text labels such as Critical, Warning, and Healthy, or icons for users who cannot distinguish the hues.
- Links vs plain text: Ensure links are distinguishable from surrounding text by underline or font weight, not color alone.
Designing a Color-Blind Friendly Palette
Certain color combinations are statistically safe for the majority of CVD users, while others should be avoided entirely as primary differentiation mechanisms:
Safe Color Pairs (distinguishable by most CVD types):
- Blue and Orange
- Blue and Red (with sufficient lightness difference)
- Dark Purple and Yellow
- Black and White (always safe)
- Blue and Grey (with lightness variation)
Problematic Color Pairs to Avoid as Sole Differentiators:
- Red and Green (affects ~8% of male users — the most common CVD)
- Red and Brown
- Green and Brown
- Blue and Purple (especially at similar lightness)
- Pink and Grey
The Grayscale Test: Convert your UI to grayscale in CSS using filter: grayscale(100%) on the root element, or use your OS grayscale mode. If all critical information, interactive states, and data distinctions remain fully understandable, your design passes the fundamental color accessibility test.
Simulating Color Blindness During Design
Several tools allow you to simulate how your design appears under different CVD conditions:
- Chrome DevTools: Open DevTools, go to the Rendering tab, and select Emulate vision deficiencies. Choose from Protanopia, Deuteranopia, Tritanopia, Achromatopsia, and blurred vision.
- macOS: System Preferences, Accessibility, Display, Color Filters. Select from Grayscale, Red/Green filter Protanopia, Red/Green filter Deuteranopia, or Blue/Yellow filter Tritanopia.
- Windows: Settings, Ease of Access, Color Filters. Provides Grayscale, Inverted, and Grayscale-Inverted options plus color blindness filters.
- Figma: The Color Blind plugin by Adam Argyle simulates all major CVD types directly in your design canvas.
Practical Design Checklist for CVD Accessibility
- All error, success, and warning states use icons AND text in addition to color change
- Form input focus states are distinguishable without relying on color (outline plus background change)
- Links within body text have an underline or other non-color differentiator
- Charts and data visualizations use patterns, labels, or shapes as secondary encodings
- UI passes grayscale simulation without loss of meaning
- Interactive elements meet WCAG 3:1 non-text contrast requirements for users with low vision combined with CVD
- Color palette reviewed under deuteranopia and protanopia simulation (the most common CVDs)