Designing for color blindness: 8% of men, 0.5% of women

About 8 percent of men and 0.5 percent of women have some form of color vision deficiency. Globally, that is around 300 million people. The most common form is red-green deficiency, which is why the standard design advice is "don't use red and green together." That advice is correct but incomplete. It solves one case and misses several others.

This guide covers the four main types of color vision deficiency, the patterns that actually work in product UI (redundant encoding beats palette tricks), the simulators that let you test your work in seconds, and the common mistakes that ship into production despite teams thinking they handled accessibility. If you are choosing the underlying contrast targets, see the WCAG AA vs AAA guide. If you are building the shade scale that pairs back to those targets, see the guide to OKLCH shade scales.

The four main types

Color vision deficiency (CVD) is not a single condition. There are four genetic types with distinct effects on color perception.

Deuteranopia and Deuteranomaly (red-green, green-shift, around 5 percent of men). The most common type. The medium-wavelength cone is missing or shifted. Reds, oranges, browns, and greens converge toward muddy yellow-brown. A "red error" pill and a "green success" pill can read as the same color. This is the type to test against if you only have time for one.

Protanopia and Protanomaly (red-green, red-shift, around 2.5 percent of men). The long-wavelength cone is missing or shifted. Reds appear darker and shift toward gray-brown. Pure red can look black. The fix patterns overlap with deuteranopia, which is why both get bundled as "red-green" in casual usage.

Tritanopia and Tritanomaly (blue-yellow, around 0.01 percent). The short-wavelength cone is missing or shifted. Blues confuse with greens, yellows confuse with violet. Rare, but worth knowing about for designs where blue carries semantic weight (links, primary CTAs, status indicators).

Achromatopsia (total, around 0.003 percent). No working color cones. Vision is grayscale. Extremely rare, but a design that works under achromatopsia is bulletproof for everyone.

The first two types account for 95 percent or more of color vision deficiency. If you only have time to simulate one scenario, simulate deuteranopia.

Why "don't use red and green" is incomplete

The standard advice handles one case: distinguishing red from green in deuteranopia and protanopia. It misses three other failure modes that are common in product UI.

Adjacent shade-scale steps collapse. A red-500 next to a red-600 looks identical to most users with deuteranopia. Charts that distinguish series with adjacent shades of the same hue fail across all CVD types, not just red-green.

Saturated colors of similar lightness collapse. A vivid green and a vivid orange at the same lightness can read as the same yellow-brown to deuteranopes. The hue diversity that protects normal vision compresses dramatically.

Cool-warm pairs do not always survive. Pure red on pure blue looks high-contrast to typical users but can appear muddy purple to protanopes (because protanopes see less red). The contrast ratio drops, and so does legibility.

The takeaway: do not think in hue. Think in lightness diversity, position, label, and shape. Those are the orthogonal dimensions that survive color shift.

Patterns that actually work

Five patterns handle 95 percent of CVD UI failures.

1. Redundant encoding. Anything that conveys meaning through color must also convey meaning through at least one other channel: text label, icon, shape, position, or pattern. Status pills should have an icon AND a color. Charts should have direct labels OR distinct line styles, not just hue. Form errors should have an "Error:" prefix AND a red border AND an icon, not red alone.

2. Lightness diversity over hue diversity. When you must use color to encode categories (chart series, kanban swim lanes, calendar events), pick colors that vary in lightness, not just hue. A color-blind user can see lightness differences clearly even when hues collapse. Paletta can generate 50 to 950 shade scales with smooth lightness curves, which gives you the foundation to pull steps from across the L range and encode categories safely.

3. Position-based fallbacks. "First item is selected" is more accessible than "blue item is selected" because position survives color shift. Use position cues whenever possible: focus rings, indented active state, leading icon, the topmost item in the list.

4. Shape and pattern for charts. Multi-series line charts should use distinct dash patterns (solid, dashed, dotted) in addition to color. Multi-series bar charts should use distinct fill patterns or distinct lightness bands. Pie and donut charts should always have direct labels.

5. High-contrast mode opt-in. Some users will turn on a high-contrast browser mode or system setting. Do not fight it. Test your UI with the CSS forced-colors: active query to confirm it stays usable when the user takes over the palette.

How to test

Three tools cover 95 percent of testing.

Live simulator. Paste a screenshot or a palette into a color blindness simulator and toggle between deuteranopia, protanopia, tritanopia, and achromatopsia. The simulator applies the matrix transformation that approximates how each type perceives color. Looking at your design through that lens for 30 seconds catches more issues than any spec compliance check.

Browser DevTools. Chrome DevTools has a built-in "Emulate vision deficiencies" panel under Rendering. Useful for live testing in a dev environment. Less precise than dedicated simulators, but immediate.

Pair with contrast. Run the simulated view through a WCAG contrast checker. A pair that passes WCAG AA in normal vision can still fail when both colors shift toward similar luminance under deuteranopia, because the gap between them collapses.

For one-off lookups, you can preview palettes for color blindness in real time, free, with no signup. The Pro plan extends this to a full design-system audit: every pair across primary, secondary, semantic, and neutral color sets, simulated across all four CVD types, with the failing pairs flagged automatically. If you are auditing one image, free works. If you are auditing a full system before shipping, upgrade to Paletta Pro pays for itself the first time it catches a chart palette that would have shipped broken.

Common UI mistakes

The patterns above prevent these. Most teams ship at least three of them.

Charts with hue-only series differentiation. Multi-line charts where the only distinction between Series A and Series B is "blue versus orange." Fix: distinct line styles, direct labels, distinct lightness.

Status indicators using color alone. Green dot for online, red dot for offline, nothing else. Fix: add a label or an icon variant.

Required-field markers in red. Asterisks AND red coloring is fine. Red coloring without the asterisk fails for users who cannot see the red.

Error states relying on border color. A red border around a form field is not enough. Add an inline message, an icon, or both. Border color is the redundant signal, not the primary one.

Semantic colors mapped to hue without lightness variation. Brand-color blue, error red, warning yellow, success green at identical saturation and lightness can collapse to "two yellows and two grays" under deuteranopia. Vary the lightness across the semantic palette intentionally.

Traffic-light patterns. Red, yellow, green for severity is the classic anti-pattern. Even when the colors are clearly distinguishable, the cognitive load is high. Pair with text labels or with a position-based scale (low, medium, high).

Trusting brand-color contrast in isolation. A brand color that hits AA against white in normal vision can drop below AA when seen through deuteranopia. The ratio does not move on paper; the practical accessibility does. Always test the simulated view, not just the canonical view. color blindness simulator is built for exactly this case: drop the brand color in, toggle through the four CVD types, and see what you actually ship.

Beyond simulators

Simulators are matrix approximations. They get the broad strokes right but miss the lived experience of color vision deficiency.

If your product serves a population where CVD prevalence is high (gaming peripherals, design tools, military and aviation, color-heavy creative tools), recruit testers with actual deuteranopia or protanopia and watch them use the product. The qualitative gap between "passes simulator" and "works for actual users" is usually about polish: hover states, error transitions, the way disabled controls drop into similar-looking grays.

Two free resources worth bookmarking:

• Color Universal Design Organization maintains research-backed palette recommendations from the team that developed the Universal Design color set, which is bulletproof across all CVD types.
• W3C WCAG Use of Color (1.4.1) is the canonical reference for the redundant-encoding rule.

The high-bar version of CVD design is not "make it look the same to everyone." It is "make sure every meaning gets through, regardless of which colors a user can perceive."

FAQ

How is color blindness different from low vision?

Color vision deficiency affects hue discrimination but typically preserves visual acuity. Low vision affects sharpness and overall visual function. Some users have both. WCAG 2.x addresses both groups but with different rules: contrast for low vision, redundant encoding for CVD.

Should I add a color-blind mode toggle?

Usually no. A well-designed UI works across CVD types without a separate mode. Adding a "color-blind mode" usually means accepting a worse default and assuming users will find a setting they may not see. The exception is for color-heavy domains where the default cannot be made universal: data visualization tools, color picker apps, image editors. Tools like Paletta handle this by surfacing CVD simulation as a first-class feature, which removes the need for an explicit toggle.

What about color-blind-safe palette tools?

They help for chart series and categorical encoding. They do not replace the rest of the work (redundant encoding, lightness diversity, direct labels). Treat them as one tool in the kit, not the solution.

How do I check my brand color is CVD-friendly?

Run it through a simulator at the four CVD types. Confirm it remains distinguishable from your other semantic colors (error, warning, success). If it collapses with one of them, vary the lightness or pair them with redundant signals.

Does dark mode help or hurt?

Mostly neutral. Dark mode shifts the palette but does not fundamentally change CVD perception. The same redundant-encoding rules apply. A common mistake is reusing the light-mode CVD-safe palette directly in dark mode without re-checking the contrast and CVD impact. Always re-test.