Color Blindness in Design: How to Make Accessible UI

Color blindness affects roughly 8% of men and 0.5% of women — over 300 million people. If your UI relies on color alone to communicate meaning, a significant portion of your users cannot use it properly.

🎨 Try it free: Vision Simulator — See your design through 8 types of color blindness.

---

Types of Color Blindness

Deuteranopia (Green-blind) — Cannot distinguish greens. Affects ~6% of men.

Protanopia (Red-blind) — Reds appear dark grey or black. Affects ~2% of men.

Tritanopia (Blue-blind) — Cannot distinguish blues and yellows. Very rare.

Achromatopsia — Sees only greyscale. Affects 1 in 30,000 people.

---

The #1 Mistake: Color as the Only Signal

❌ "Fields marked in red are required"
❌ "Green = success, Red = error" (no icons, no text)
❌ "Click the green button to confirm"

For red-green color blind users, these are nearly identical.

The fix: Always add a second signal:

✅ Required fields: red color + asterisk (*) + label "Required"
✅ Error: red color + ✕ icon + "Error:" text
✅ Charts: colors + pattern fills + data labels

---

Color-Blind Friendly Palettes

Combinations to Avoid

| Combination | Problem | |---|---| | Red + Green | Deuteranopia/Protanopia confusion | | Green + Brown | Deuteranopia | | Blue + Purple | Tritanopia confusion | | Red + Black | Protanopia — red disappears |

Safer Alternatives

• Red vs Green → Blue vs Orange
• Red vs Green → Add icons or patterns

---

Practical Rules

Rule 1: Pass Contrast First

High contrast inherently helps color blind users. Use our Contrast Checker.

Rule 2: Never Use Color Alone for Status

<!-- ❌ Bad: color only -->
<div style="color: red;">Something went wrong.</div>

<!-- ✅ Good: color + icon + semantic text -->
<div role="alert">
  <svg aria-hidden="true"><!-- error icon --></svg>
  <strong>Error:</strong> Something went wrong.
</div>

Rule 3: Patterns for Charts

• Use different patterns (stripes, dots) in addition to colors
• Add direct data labels
• Use blue/orange instead of red/green

Rule 4: Test with Simulation

Run your UI through the Vision Simulator. If everything is readable in Achromatopsia (greyscale) mode, your design is accessible to almost everyone.

---

Building an Accessible Color System

1. Start with high contrast — Target 7:1 (AAA) for body text
2. Avoid red+green together — Ensure 30%+ lightness difference
3. Test every state — Forms, buttons, tabs, error messages, disabled controls
4. Use the Accessibility Checker → Test your full palette

---

Common Mistakes

"I'll add accessibility later" — Retrofitting is 10x harder. Do it from day one.

Testing only one simulation type — Always test all 8 types.

Ignoring hover and focus states — Interactive states must also maintain contrast.

---

FAQs

What percentage of users have color blindness? ~8% of men and 0.5% of women. In 10,000 users, that's 400–800 people.

Does accessible design hurt normal-vision users? No. Adding icons, patterns, and better contrast improves UX for everyone.

What are the safest colors for accessible design? Blue and orange — universally distinguishable across all common color blindness types.

How do I quickly check my design? Vision Simulator → toggle 8 types → Achromatopsia view is the fastest single test.

---

Conclusion

Never rely on color as the only signal. Test with Vision Simulator, check contrast with Contrast Checker, and use icons + text alongside every color indicator.