Empathy Ally
Colour blindness affects an estimated 8% of men and 0.5% of women - roughly 300 million people globally. Most are not fully blind to colour, but see a reduced range: reds appear greenish-brown, greens become muddy, or certain hues collapse into each other entirely. The most common form, red-green colour blindness, means that the traffic-light metaphors designers love - red bad, green good - communicate nothing at all to a significant portion of your audience.
Types of colour blindness
Deuteranomaly and protanomaly are partial forms, affecting medium- and long-wavelength cone sensitivity. Reds may appear more brownish; greens shift towards yellow. Still usable in most UI contexts, but colour-only status indicators will fail.
Deuteranopia and protanopia are dichromacies - one cone type is absent entirely. Reds and greens become genuinely indistinguishable. Affects approximately 5–8% of men of Northern European descent.
Tritanomaly and tritanopia affect the short-wavelength (blue) cones. Blues appear greenish; yellows shift pinkish. Rare - about 0.01% of the population. Text on blue backgrounds is a common failure point for this group.
Achromatopsia is the complete absence of colour vision - everything appears greyscale. Extremely rare (1 in 30,000). Also typically associated with severe photosensitivity, since the dampening effect of cone variation is absent.
How it shapes digital interaction
1 in 12 men
Approximately 8% of men of Northern European descent have some form of colour vision deficiency. On a site with 100,000 male users, that’s 8,000 people who cannot distinguish red from green. Globally, roughly 300 million people are affected.
Status colours are the most frequent failure point. Error states (red), success states (green), warning states (yellow), informational states (blue) - all require a secondary cue beyond colour. Shapes (✕, ✓, !, ℹ) or text labels (“Error:”, “Success:”) fill the gap reliably and benefit everyone.
Charts and data visualisations are the second most common failure. Pie charts with a red segment and a green segment are unreadable. Accessible palettes (Okabe-Ito, Paul Tol’s schemes) are tested and documented; use them as starting points for any data visualisation work.
Design patterns that work
Do
- Pair colour with shape or text label on all status indicators
- Use underlines (not just colour changes) on links within body text
- Test your palette with a CVD simulator - Coblis (color-blindness.com) is free and browser-based
- Use patterns or textures as a secondary encoding in charts alongside colour
- Choose blue/orange or blue/red as primary contrast pairs - distinguishable across all common CVD types
Don’t
- Use red/green alone to communicate success and failure states
- Rely on colour alone to identify chart segments, map regions, or table categories
- Assume “looks fine on my screen” covers all users - it only covers your colour vision
- Use grey text on off-white backgrounds without checking contrast (grey-on-grey collapses for many users)
- Forget that some users live with multiple overlapping visual disabilities simultaneously
What good looks like
The single most impactful change most teams make is adding a shape or short label to every colour-coded status indicator. It takes an afternoon, it benefits users with colour blindness, users on greyscale displays, users printing the page - and nobody else notices.
A green ”✓ Success” label communicates the same information to a deuteranopic user as to a trichromat. A red ”✕ Error” label is redundant for most users and essential for 8% of men. The math is straightforward.
The WCAG criteria
Four Level A and AA criteria pin all of the rules above:
- WCAG 1.4.1 · Level A
Use of Color
Required reading. Any place colour communicates state, status, action, or category - pair it with a second cue. The single most-cited criterion in colour-blindness conformance failures.
- WCAG 1.4.3 · Level AA
Contrast (Minimum)
Text needs at least 4.5:1 contrast against its background (3:1 for large text). For colour-blind users on imperfect displays this is a floor, not a target - aim for AAA (7:1) where you can.
- WCAG 1.4.11 · Level AA
Non-text Contrast
UI components and meaningful graphical objects need 3:1 contrast against adjacent colours. This is where the “low-contrast pretty” trap most often hits - ghost buttons, hairline borders, empty-state icons.
- WCAG 1.3.3 · Level A
Sensory Characteristics
Don’t rely on instructions like “click the green button” or “the red box on the right.” Reference the element by name, label, or position - and always with a second cue beyond colour.
What contrast ratio should I target?
WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+) or bold text (14pt+). This addresses luminance contrast - how light or dark text is against its background. Colour blindness is a separate concern: it affects the ability to distinguish hues from each other, not necessarily the luminance contrast. Use a CVD simulator alongside a contrast checker - they solve different problems.
My brand palette fails simulation - what do I do?
Most brand palettes were not designed with accessibility in mind. In practice: keep the brand colour for decorative and non-informational uses; add a conformant secondary cue wherever the colour carries meaning. A red error border is fine alongside a “Please enter your email address” text label. Pure green success is fine with a ”✓ Saved” label next to it. The colour stays; the meaning travels through a second channel.
Should I run a greyscale design pass?
Yes, as a quick and cheap sanity check. A greyscale export of your UI reveals which elements rely entirely on colour to communicate. Everything that becomes ambiguous in greyscale is a candidate for improvement. It’s not exhaustive - tritanopia users still perceive greyscale differently from red-green CVD users - but it catches the most common failures fast and requires zero specialist tools.
Are there colours that work for everyone?
No universal “safe” palette exists, but some combinations perform well across all major CVD types. Blue/orange is the most robust - distinguishable by deuteranopes, protanopes, and tritanopes. Black/white carries no meaningful CVD risk. The Okabe-Ito palette (8 colours including black) was specifically designed for colour-blind accessibility and is widely used in scientific publishing; it’s a solid default for charts and diagrams.