Skip to content
ZeroServer.tools
All guides

Designing for Color Blindness: What Every Developer Should Know

June 5, 2026 · 4 min read

About 8% of men and 0.5% of women have some form of color vision deficiency. If you're building for a general audience, roughly 1 in 12 of your male users can't see your UI the way you designed it. This guide explains the types of color blindness, how they affect UI, and what you can do about it.

Types of color vision deficiency

The human eye has three types of cone cells sensitive to red, green, and blue wavelengths. Color blindness occurs when one or more cone types is absent or has reduced sensitivity.

Red-green color blindness (most common)

Protanopia — red cones are absent. Reds appear as dark grays or near-black. Green and red are confused.

Protanomaly — red cones work but are shifted toward green sensitivity. Red appears washed out.

Deuteranopia — green cones are absent. The most common form (~6% of men). Red and green are strongly confused; browns, oranges, and greens can look identical.

Deuteranomaly — green cones are shifted. Similar to deuteranopia but less severe. The most common color blindness overall (~5% of men).

Blue-yellow color blindness (rare)

Tritanopia — blue cones are absent. Blues and greens are confused; yellows and violets look similar. Affects men and women equally.

Tritanomaly — reduced blue cone sensitivity.

Complete color blindness

Achromatopsia — all three cone types are absent or non-functional. The world appears in grayscale. Affects roughly 1 in 30,000 people.

How color blindness affects your UI

Success/error states

A green checkmark and red X look nearly identical to someone with deuteranopia. Never rely on color alone to communicate status. Add icons, labels, or patterns.

✅ DO:   [✓ green checkmark + "Success" text]
❌ DON'T: [just a green circle vs. a red circle]

Charts and graphs

Default chart colors — red vs. green, orange vs. blue — are often indistinguishable. Use:

  • High-contrast color palettes (ColorBrewer has colorblind-safe palettes)
  • Pattern fills alongside color
  • Direct labels on data instead of relying on a legend

Links and interactive elements

Never indicate a link exclusively through color. The WCAG success criterion 1.4.1 requires that links are distinguishable from surrounding text without color — underline or bold works.

Form validation

Red borders on invalid fields, green on valid: this fails for red-green color blind users. Add an icon inside the field or inline error text.

Testing your designs

The grayscale test

Convert your design to grayscale (screenshot → desaturate). If information is lost — if elements become indistinguishable — you're relying too heavily on color.

Simulation tools

The Color Blindness Simulator uploads an image and applies color matrix transformations to show how it appears with:

  • Protanopia
  • Protanomaly
  • Deuteranopia
  • Deuteranomaly
  • Tritanopia
  • Achromatopsia

Contrast ratios

Color blindness and low contrast often compound. WCAG 2.1 AA requires:

  • 4.5:1 contrast for normal text
  • 3:1 for large text (18pt+) and UI components

Use the Color Contrast Checker to verify your color pairs. The checker works on your specific hex values, not just "looks fine."

Building colorblind-safe color palettes

Avoid red-green pairs as the sole differentiator

If your UI uses red = danger and green = safe, add a pattern, shape, or text label.

Use a colorblind-safe palette

The IBM Design Color Library and ColorBrewer offer palettes designed to be distinguishable across the most common forms of color blindness. Good starting points:

  • For two categories: blue (#0077BB) and orange (#EE7733)
  • For three categories: blue (#0077BB), orange (#EE7733), cyan (#33BBEE)
  • Avoid using red and green as the only pair

Test with real users

Simulation tools are good, but they're models. If accessibility matters for your project, test with people who have color blindness — they'll catch things simulations miss.

CSS and SVG techniques

SVG patterns for charts

<defs>
  <pattern id="stripes" patternUnits="userSpaceOnUse" width="4" height="4">
    <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" stroke="#000" stroke-width="1"/>
  </pattern>
</defs>
<rect fill="url(#stripes)" .../>

Focus indicators

Ensure focus rings don't rely on color alone. The default blue ring is often invisible for blue-weak users. Use a dual-color outline:

:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #fff; /* white halo makes it pop on any background */
}

Quick checklist

  • Status indicators (error/success) use icons + text, not just color
  • Charts use patterns or direct labels alongside color
  • Links are underlined or otherwise distinguishable
  • Color contrast passes WCAG AA (4.5:1 for body text)
  • Forms show error text, not just a red border
  • Tested in the Color Blindness Simulator
  • Palette avoids red-green-only differentiation

For generating accessible color palettes, use the Color Palette Generator.