Colorblind-Friendly Palette Guide — Practical Rules for Designers and Developers

Compare the Okabe-Ito and Paul Tol palettes alongside protan, deutan, and tritan simulations, plus design rules that don't rely on color: lightness contrast, redundant encoding, and WCAG criteria.

If about 1 in 12 men (of European ancestry) has red-green color vision deficiency, then some of the people looking at your charts, maps, and dashboards will always be color-deficient. The good news: following just a few rules makes most of the problems disappear.

Rule 1 — Don't convey information with color alone

WCAG Success Criterion 1.4.1, “Use of Color,” states that color should not be the only visual means of conveying information. Mark invalid input fields with an icon and a message along with the red border, and give chart lines shapes, dashes, or direct labels in addition to color.

Rule 2 — Ensure a lightness difference

People with color vision deficiency still see differences in brightness well. Choose colors that need to be told apart so their lightness clearly differs. Checking whether they're still distinguishable when printed in black and white is the easiest test.

Rule 3 — Avoid red-green pairs; use blue-orange

“Good = green, bad = red” is the most common mistake. To both protans and deutans, these two look like a similar ochre. When you need contrast between two categories, blue ↔ orange is the safest choice.

Proven palettes

The “Color Universal Design” palette proposed by Okabe and Ito is a set of 8 colors chosen to stay distinguishable with red-green color vision deficiency. The table below shows the same colors in a dichromat simulation (Machado 2009, 100% severity).

Okabe–Ito palette (8 colors) — each row simulates the same color for each type
Normal vision	`#000000`	`#E69F00`	`#56B4E9`	`#009E73`	`#F0E442`	`#0072B2`	`#D55E00`	`#CC79A7`
Protan dichromat	`#000000`	`#B9A200`	`#9BB3EC`	`#9A9271`	`#F8DC23`	`#5375B5`	`#817100`	`#808BA9`
Deutan dichromat	`#000000`	`#CAB411`	`#87A4E8`	`#8A8676`	`#FCE34E`	`#3B67B1`	`#9E8C00`	`#9498A5`
Tritan dichromat	`#000000`	`#FB8C87`	`#00C2C6`	`#009E92`	`#FFD4C5`	`#008289`	`#EB4050`	`#D6788A`

Paul Tol's “bright” palette is also designed with both color vision deficiency and black-and-white printing in mind.

Paul Tol bright palette (7 colors)
Normal vision	`#4477AA`	`#EE6677`	`#228833`	`#CCBB44`	`#66CCEE`	`#AA3377`	`#BBBBBB`
Protan dichromat	`#6179AC`	`#848177`	`#8A7B2A`	`#CCB634`	`#B8C8F0`	`#445579`	`#BBBBBB`
Deutan dichromat	`#546FA9`	`#A79D74`	`#7E733A`	`#D1BD4B`	`#A4B9EE`	`#666A74`	`#BBBBBB`
Tritan dichromat	`#008389`	`#FF526D`	`#008576`	`#DBAEA3`	`#00D7D7`	`#B62D50`	`#BBBBBB`

By contrast, the common combination of saturated red, green, and orange overlaps for protans and deutans.

What to avoid — combinations built on saturated red and green
Normal vision	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
Protan dichromat	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
Deutan dichromat	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
Tritan dichromat	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

Even lightness steps for continuous values

For continuous values such as temperature or density, use a sequential colormap whose lightness changes evenly in one direction (viridis, cividis, etc.). cividis was designed with color vision deficiency in mind.
The rainbow (jet) colormap has erratic lightness that misleads even people with normal color vision, and information vanishes in its red-green range.
For values that diverge in two directions (increase/decrease), a blue-white-orange (or red) diverging colormap is safer than a red-green one.

Text and contrast

For body text against its background, a contrast ratio of at least 4.5:1 is recommended under WCAG 1.4.3. Red text on a black background loses much of its contrast for protans.
Don't signal links by color alone; keep the underline.

Checklist

1. Is it still distinguishable in grayscale?
2. Is it still distinguishable at 100% protan and deutan in the simulator?
3. Are there cues besides color — shapes, labels, patterns?
4. Can you put labels directly on the chart instead of relying on a legend?

Pass these four and your material becomes easier to read not only for people with color vision deficiency but also for anyone viewing it on a dim screen, in black-and-white print, or outdoors in bright light.

Open in simulator →