Colorblind-Friendly Palettes: Designing Beyond Contrast Ratio

Roughly 8% of men and 0.5% of women have some form of color vision deficiency. Contrast ratio does not detect the problem, because two colors can differ enormously in luminance and still be indistinguishable by hue — or match perfectly in hue and differ only in a channel the viewer cannot see.

The three types, and what each one collapses

Deuteranomaly and deuteranopia (reduced or absent green sensitivity) is by far the most common. Red and green shift toward a shared yellow-brown. A red error state next to a green success state becomes two similar muddy tones.

Protanomaly and protanopia (red) behaves similarly, with an extra penalty: reds appear darker overall, so a red that seemed bold can read as near-black.

Tritanomaly and tritanopia (blue) is rare. Blue and yellow converge, and teal and gray become hard to separate.

Achromatopsia — total absence of color vision — is very rare but is the ultimate test. If your interface works in grayscale, it works for everyone.

The pairs to stop using alone

Red / green — the canonical failure. Status indicators, diff views, pass/fail badges.
Green / brown — collapses for both common types.
Blue / purple — differs mainly in red content, which protan viewers lose.
Light green / yellow — very close in luminance as well, so contrast will not save you.
Teal / gray — the tritan trap, and also a common "muted brand color" choice.

Redundant encoding is the real fix

The principle: never let color be the only carrier of information. Add a second channel.

Shape and icon. A checkmark and an exclamation triangle are unambiguous regardless of hue. This is why mature design systems pair every status color with a fixed icon.

Text labels. "Error" next to the red border costs one word and removes all ambiguity.

Position. In a two-state toggle, the knob's position carries the state; color is decoration.

Pattern and texture. In charts, hatching or dash patterns distinguish series where hue cannot.

Lightness separation. If you must use two hues that collapse, force a large lightness gap between them. Deuteranopes cannot tell your red from your green, but they can tell dark from light.

Choosing hues that survive

Two guidelines produce palettes that hold up:

Vary lightness, not just hue. Any two categories that must be distinguished should differ by at least 30% lightness. This single rule covers most cases automatically.

Prefer blue-versus-orange over red-versus-green. The blue-yellow axis is intact for the overwhelming majority of colorblind viewers. Data visualization palettes designed for accessibility almost always run blue to orange for exactly this reason.

For sequential data — heatmaps, choropleths — a single hue varying in lightness is inherently safe. For diverging data, use two hues on the blue-orange axis with a light neutral at the midpoint.

How to test without special tools

You do not need a simulator to catch most problems:

Convert to grayscale. Screenshot the interface, desaturate it. Anything that becomes indistinguishable was relying on hue alone.
Squint test. Blurring collapses fine detail and exposes elements that share luminance.
Describe it aloud. If explaining the interface requires the words "the green one," the encoding is insufficient.

The grayscale test is the highest-value 30 seconds in an accessibility pass, and it catches the red-green problem every time.

Do not forget contrast

Colorblind-safe and contrast-compliant are separate requirements, and you need both. A blue-orange palette that is perfectly distinguishable can still put 2.5:1 text on a background. Run the hue check and the ratio check as two distinct passes.

Try it

Contrast Checker — verify the luminance side of every pair
Palette Generator — build the lightness-separated steps that make hue collapse survivable
Color Converter — get exact values before testing

Related reading: WCAG Contrast Ratios Explained covers why contrast ratio is blind to hue, and Building Color Palettes shows how to generate the lightness scales this article depends on.