Colorblind-Safe Palette: A Developer's Guide

Roughly 1 in 12 men and 1 in 200 women of Northern European descent have some form of color vision deficiency (CVD) the most commonly cited figure for red-green deficiency, and one the American Academy of Ophthalmology explains is sex-linked because the responsible gene sits on the X chromosome. For a developer, that means a meaningful slice of your users cannot reliably tell apart the colors you picked. A "colorblind safe palette" is not a designer nicety. It is the difference between a status dashboard that communicates and one that lies to a chunk of your audience. The good news: you do not need to memorize the physiology of cone cells. You need two rules and a handful of vetted hex values.

Why your palette breaks under deuteranopia

The most common CVD is a red-green deficiency, dominated by deuteranopia (reduced or absent green-sensitive cones) and protanopia (reduced or absent red-sensitive cones). Under these conditions, the visual system loses the ability to separate hues along the red-green axis. Colors that look obviously distinct to you collapse onto each other.

The combinations that fail hardest in practice:

• Red and green the classic. The entire traffic-light convention (red = bad, green = good) becomes a single muddy band. A red "error" badge and a green "success" badge can look identical.
• Green and brown brown is essentially a dark, desaturated orange-red, and it slides right into the green range under deuteranopia.
• Green and black on a dark UI saturated green dims toward a near-neutral that is hard to distinguish from the background.
• Blue and purple purple is blue plus red; remove the red channel's contribution and purple drifts toward blue.
• Pink and light-green pastels low saturation removes the little hue separation that was left.

The pattern is clear: anything that relies on the red-green channel to carry meaning is fragile. Tritanopia (blue-yellow deficiency) is far rarer, but it punishes blue-vs-green and yellow-vs-pink pairings, so a truly safe palette accounts for it too.

The two rules that actually matter

Rule 1: Never encode information by hue alone

If the only difference between "passing" and "failing" is red versus green, you have built a control that some users cannot read. Add a redundant channel every time color carries meaning: an icon (check vs cross), a text label, a shape, a pattern or dashed line on a chart, or position. This is not optional polish; it is exactly what WCAG Success Criterion 1.4.1 (Use of Color) requires. Color may reinforce the signal, but it must never be the sole carrier of it.

Rule 2: Vary lightness, not just hue

Lightness (luminance) survives every type of color blindness because it does not depend on the cone channels that CVD affects. If two swatches differ clearly in lightness, they stay distinguishable even when their hue difference disappears. So when you build a categorical or sequential scale, spread the colors across a range of lightness values rather than picking equally-bright hues that only differ in tint. A quick gut check: convert your palette to grayscale. If the swatches are still distinct in grayscale, they will survive most CVD. If they merge, your palette leans on hue alone.

Ready-to-use safe palettes (with hex)

Okabe-Ito the eight-color categorical default

Designed by Masataka Okabe and Kei Ito for the Color Universal Design project specifically to stay unambiguous across color vision types, this is the most-cited qualitative palette for accessible categorical data. Bang Wong republished the same set in his 2011 Nature Methods "Points of View" column on color blindness, which is why you will sometimes see it called the "Wong palette" it is the same eight colors, not a separate scheme. It is the sensible default for chart series, tags, and legends:

Black          #000000
Orange         #E69F00
Sky Blue       #56B4E9
Bluish Green   #009E73
Yellow         #F0E442
Blue           #0072B2
Vermillion     #D55E00
Reddish Purple #CC79A7

One of the eight is black, so the chromatic (non-black) colors number seven. If you need fewer than eight series, drop colors from the bottom of the list rather than inventing new ones, and add the project's optional neutral gray (#999999) when you need a background or "other" category.

Viridis and Cividis sequential and continuous data

For heatmaps, gradients, and any continuous scale, use a perceptually uniform colormap rather than the old rainbow or jet scheme (which is notoriously bad for CVD and uneven in perceived brightness). Viridis ramps from dark blue-purple through teal-green to bright yellow and increases monotonically in lightness, so it reads correctly in grayscale and under CVD. Cividis was derived from Viridis and engineered explicitly to look near-identical to people with and without CVD (Nuñez, Anderton, and Renslow, PLoS ONE, 2018); it runs from dark blue to yellow. Both ship in matplotlib and have ports for D3, Python, R, and most charting libraries pull the exact stops from your library rather than hand-typing hex.

The two-color case: blue and orange

Most UI decisions are binary before and after, selected and unselected, series A versus B. For two categories, blue (around #0072B2) versus orange (around #E69F00) is the most robust pairing across all CVD types. It separates on both the blue-yellow axis and in lightness, so neither red-green nor blue-yellow deficiency erases the distinction. Reach for blue and orange before you reach for red and green.

Verify before you ship

Choosing a "safe" palette on paper is not proof. Two quick checks catch almost every problem before it reaches users:

1. Simulate the palette. Drop your actual hex values into a color blindness simulator and view them under deuteranopia, protanopia, and tritanopia. Watch specifically for any two swatches that merge those are the pairs your design currently relies on but CVD users cannot separate.
2. Check contrast on real pairings. A palette can be hue-safe and still fail readability. Run every foreground and background combination through a contrast checker for WCAG AA (4.5:1 for body text, 3:1 for large text and UI components), and use a WCAG palette generator to nudge any failing shade to a compliant lightness. If you need to translate between HEX, RGB, and HSL while tuning, a color converter keeps the math out of your way.

For the contrast side of the story in depth what AA versus AAA actually demand and how the ratios are computed see our guide on web accessibility and color contrast. Build with Okabe-Ito or blue and orange, never lean on hue alone, vary lightness, then simulate and check before you push. That sequence turns "I think this is accessible" into something you can verify.

Frequently Asked Questions