1 in 12 men can’t see your design.
And you’re still using red for errors.
There’s a real chance your user can’t distinguish between your success green and error red.
Yet most design teams still treat colour blindness like an edge case.
It’s not.
Here’s the simplified breakdown every designer should know:
1. Red-Green (Deuteranopia & Protanopia) – 1st Priority
Affects ~8% of men, ~0.5% women.
Users struggle to distinguish:
• Red vs green.
• Brown vs green.
• Orange vs red.
What to do:
• Never rely on red/green alone for success and error states.
• Pair every status with text and an icon (✓ ✗ ⚠).
• Ensure colours differ in brightness and contrast, not just hue.
• Meet contrast requirements: 4.5:1 for text, 3:1 for UI components.
If you only fix one thing, fix this.
2. Blue-Yellow (Tritanopia) – 2nd Priority
Very rare (~0.01%), but still worth checking.
Users struggle with:
• Blue vs yellow.
• Blue vs green.
• Purple vs red.
What to do:
• Avoid pairing blue/yellow for critical states.
• Don’t rely on blue vs green to indicate meaning.
• Add icons and text to “info,” “warning,” and “alert” states.
• Maintain strong brightness contrast.
Red/green works fine here.
3. Monochromacy – 3rd Priority
Extremely rare.
Users see only in grayscale (no colour perception).
What to do:
• Rely on contrast, not hue.
• Use text labels, icons, patterns or structural differences.
• Never use colour as the only indicator for meaning.
If your design works in grayscale, you’ve already covered this.
Here’s a guide your team can use:
✅ DO
• Add icons or labels to all colour-coded states.
• Use contrast differences ; at least 4.5:1 for text, 3:1 for UI components.
• Test with simulators (Stark, Colorblind, Who Can Use).
• Ask yourself: “Does this work in grayscale?”
❌ DON’T
• Use colour as the only indicator.
• Rely on red/green for critical actions.
• Skip accessibility testing.
👇🏽 What’s your experience with colour blindness?
Drop your thoughts in the comments.
♻️ Share and save this for your team.
—
✉️ Subscribe to my newsletter for accessibility and design insights here: https://lnkd.in/gZpAzWSu
—
Accessibility note: Contents in the image attached contain normal and large text ratios for WCAG 2.2 AA only.
