The Complete Guide to Designing for Color Blind Users

You’ve spent hours perfecting a dashboard with green success indicators and red failure alerts. Looks clean, right? To 1 in 12 men and 1 in 200 women, those colors might look identical — a muddy gray. That’s roughly 300 million people worldwide who can’t rely on color alone to understand your interface.

Designing for color blindness isn’t about making ugly websites. It’s about making interfaces that work for everyone, often resulting in designs that are clearer and more usable for all users.

Understanding the Types of Color Blindness

Color blindness isn’t one condition. It’s a spectrum, and different people see the world very differently.

• Deuteranopia (green-blind) — Most common. Green appears muted or gray, and red-green distinctions vanish. Affects about 6% of males.
• Protanopia (red-blind) — Red appears darker, almost black. Red-green confusion is also prominent. About 2% of males.
• Tritanopia (blue-yellow) — Rare. Blue looks green, yellow looks pink or gray. Only 0.003% of the population.
• Achromatopsia (total color blindness) — Extremely rare. The world appears in shades of gray. Less than 0.001%.

What this means for your design: Red-green is the most common problem area, but don’t ignore blue-yellow combinations either. The most dangerous color combinations are red-green, green-brown, blue-purple, and green-blue.

The 80/20 Rule: Seven Simple Checks

You don’t need to become a vision scientist. Here’s the practical 80/20 approach that catches most issues:

• Never rely on color alone — This is the golden rule. If you remove all color, can users still complete every task? If not, add icons, text labels, patterns, or shapes.
• Test with grayscale — Take a screenshot, desaturate it in any image editor. Can you still read everything? Can you distinguish chart elements?
• Check contrast — Color blind users struggle more with low contrast. Use a contrast checker tool (WebAIM’s is free). Aim for at least 4.5:1 for normal text, 3:1 for large text.
• Avoid red-green combinations — This pair is invisible to 8% of males. Replace red-green with blue-orange or blue-red when possible.
• Use textures and patterns — In charts and maps, add hatching, dots, or dashes. A line chart with dotted and solid lines is readable in grayscale.
• Label everything — In forms, use clear text labels above fields. “Email address” is better than a placeholder that disappears. In charts, put labels directly next to data points.
• Simulate your design — Tools like Colorblindly (Chrome extension) or Stark (Figma plugin) show you how your design looks to different types of color blindness. Run through each type before shipping.

Real-World Fixes That Work

Stoplights that work for everyone — Traditional traffic lights use red-yellow-green, which is invisible to red-green color blind drivers. The fix: Standardize the order (red top, yellow middle, green bottom) so position conveys meaning. Some countries also use red with a stop sign icon.

Data visualization that tells the truth — Avoid rainbow heatmaps. Use a perceptually uniform color scale like Viridis or Cividis (both free in Python’s matplotlib). Add direct data labels or tooltips on hover.

Forms and error states — Don’t just turn a field border red. Add an error icon (⚠️ or ❌), a text message (“Password must include a number”), and optionally, a highlighted background. Red-green color blind users will see the icon change before they see any color shift.

Links in paragraphs — Don’t rely on blue text alone. Underline links. It helps everyone, including screen reader users.

Tools That Do the Heavy Lifting

The Debates You’ll Face

• “But our brand colors are red and green!” — You don’t need to rebrand. Just add secondary indicators (icons, patterns, text labels). Your brand can stay intact and be accessible.
• “Accessibility makes designs ugly.” — Ask any designer who’s worked on a government or healthcare site. High-contrast, labeled, pattern-rich designs can be beautiful. Check out the UK Government Design System — it’s gorgeous and fully accessible.
• “Only old people are color blind.” — Color blindness is largely genetic and present from birth. Your teenage users need this too.

Testing Strategy That Doesn’t Suck

• Automated checks — Run your CSS through a tool like axe-core or WAVE. They catch contrast and color-dependent issues.
• Manual checks — Use a simulator for 10 minutes before every major release. Walk through each user flow in grayscale and in deuteranopia mode.
• User testing — Recruit 2-3 color blind users. Pay them. Watch them use your product. You’ll learn more in 30 minutes than in hours of tooling.
• Ongoing maintenance — Add accessibility checks to your CI pipeline. Tools like Pa11y or Lighthouse can fail a build if contrast ratios drop below thresholds.

When You’ve Done It Right

Your forms will be usable without any color. Your charts will make sense when printed in black and white. Your error messages will include text and icons. Your links will be underlined. And your design will be clearer for everyone — including people with perfect color vision who are reading on a phone in bright sunlight.

That’s not a compromise. That’s better design.