How to Design with Color for Color Blind Users

Color blindness is one of the most common human genetic traits. Roughly 8 percent of men and 0.5 percent of women are born with some form of color vision deficiency — meaning in a typical audience of 1,000 people, approximately 50 will experience your color choices differently than you intended. For a product with a million users, that is 50,000 people for whom your color-dependent design decisions may be partially or fully invisible.

Designing well for color blind users does not require removing color from your designs. It requires not relying on color alone to communicate anything important. That distinction — between using color as a communication layer versus as the only communication layer — is the entire principle, and everything in this guide is an application of it.

Understanding the Types of Color Vision Deficiency

Color vision deficiency is not a single condition. There are several distinct types, each affecting different parts of the color spectrum in different ways.

Deuteranopia and Deuteranomaly (green-weak) are the most common forms, affecting approximately 5% of men. People with deuteranopia cannot distinguish between red and green — both appear as variations of yellow-brown. This is the most impactful deficiency for UI design, since red-green contrast is used ubiquitously for success/error state differentiation.

Protanopia and Protanomaly (red-weak) affect approximately 2% of men. Similar to deuteranopia in that red-green distinction is lost, but with additionally reduced perception of red light intensity — reds appear darker and less saturated.

Tritanopia and Tritanomaly (blue-yellow weak) are rare, affecting less than 0.1% of the population regardless of sex. Blue appears green-like; yellow appears pink or red-like. This form is sometimes acquired rather than inherited, through aging or certain medical conditions.

Achromatopsia (complete color blindness) is extremely rare and results in seeing only in grayscale. Designs that pass for deuteranopia and protanopia users will typically also pass for achromatopsia users if sufficient lightness contrast exists.

For most design purposes, designing for deuteranopia — the inability to distinguish red from green — covers the largest affected population and addresses the most common UI failure mode.

The Most Common Color-Blind Design Failures

These patterns appear in production interfaces with remarkable regularity and create real functional barriers for color blind users.

Red/green status indicators: A green dot for "online" and a red dot for "offline," differentiated by color alone. To a deuteranopia user, both dots appear similar in hue. The fix: add a secondary differentiator — shape (circle vs square), icon (check vs X), label text, or lightness difference (light green vs dark red have different perceived brightness even when hue is indistinguishable).

Red error text on white backgrounds: Form validation errors shown in red text, with no other visual indicator. Red text is harder to see for protanopia users (reduced red sensitivity means red appears very dark, nearly invisible against white). Fix: add an error icon, use a background color change on the field, bold the error message, and add a visible border change — all in addition to the color change.

Green/red charts without labels: A line chart showing two data series — one green, one red — with only a color legend to distinguish them. For deuteranopia users, the lines merge. Fix: use both color and line pattern (solid vs dashed vs dotted) or both color and marker shape to differentiate series. This is a core principle of accessible data visualization — covered in our article on Color in Data Visualization: How to Make Charts Actually Readable.

Color-only category differentiation: Tags, badges, or calendar events differentiated solely by background color. If the category label is not also present, color blind users cannot distinguish categories. Fix: always include text labels alongside color coding.

Practical Design Principles for Color Blind Accessibility

Never convey information through color alone. This is WCAG 2.1 Success Criterion 1.4.1 — Use of Color. Every piece of information conveyed through color must also be conveyed through at least one other means: shape, pattern, text label, icon, position, or lightness. If you can understand the information by converting your design to grayscale, your color use is accessible.

Use lightness contrast as a backup signal. Even when hue distinction fails for color blind users, lightness contrast remains intact. A dark green and a light red may be indistinguishable by hue, but their lightness difference is perceptible. Building sufficient lightness difference into color pairs used for semantic distinction provides a secondary signal that works for most forms of color vision deficiency. This connects directly to WCAG contrast requirements — our guide on WCAG Color Contrast and Why Your Website Needs It covers these thresholds.

Avoid red-green combinations for critical information. When you need to show two states or categories that will be compared directly, avoid pure red-green pairings. Blue-orange or blue-red are more distinguishable across the most common deficiency types. If red-green combinations are unavoidable (for semantic reasons — error states are red, success states are green by convention), reinforce with additional non-color signals.

Use patterns in addition to color for area fills. In charts, maps, and other filled-area visualizations, patterns (hatching, dots, crosshatching) in addition to color allow color blind users to distinguish regions by pattern even when hue differences are not perceptible. Most charting libraries support pattern fills alongside color fills.

Testing Your Designs for Color Vision Deficiency

Several free tools simulate how your designs appear to users with different types of color vision deficiency.

Figma's Accessibility Annotations plugin and Color Blind plugin both allow you to preview your design frames as they would appear to deuteranopia, protanopia, tritanopia, and achromatopsia users. This is the fastest way to audit color use during the design phase.

Chrome's built-in vision deficiency emulator (DevTools → Rendering → Emulate vision deficiencies) applies real-time simulation to any webpage. This is invaluable for testing implemented interfaces, not just mockups.

Coblis — Color Blindness Simulator (color-blindness.com/coblis) accepts image uploads and simulates multiple deficiency types. Useful for testing screenshots, marketing materials, and design exports.

The Grayscale Test: Convert your design to grayscale (in Figma: Desaturate; in Chrome DevTools: Rendering → Emulate CSS prefers-color-scheme → plus a grayscale filter). If all important information remains distinguishable in grayscale, the design passes the most basic color independence test.

Common Objections and Why They Do Not Hold

"Our audience doesn't include color blind users." Color blindness is a genetic trait with consistent prevalence across all populations. Unless you have specific evidence that your audience has unusually low color blind representation, assume the population average — approximately 5% of your male users and 0.5% of female users.

"Adding non-color signals will clutter the design." Well-designed redundant signals do not clutter — they clarify. An icon alongside a color-coded status is more informative for all users, not just color blind ones. Sighted users with no vision deficiency benefit from the additional context too. The designs that fail for color blind users are almost always also less clear for sighted users — the fix improves the experience universally.

Designing for color vision deficiency is not designing for the edge. It is designing for the full range of human visual experience — and the discipline it requires produces cleaner, more informative, more universally legible designs.