Color-blind friendly palettes: how to check and fix your colors

How common color blindness is

About 1 in 12 men and 1 in 200 women have red-green color vision deficiency. The genes sit on the X chromosome, which is why men are affected far more often. On a site with 10,000 daily visitors, several hundred of them see your red and green differently from you.

Most of them have a milder form, anomalous trichromacy, where one cone type is shifted rather than missing. Simulators show the full form, dichromacy, which is the worst case: a palette that survives it works for the milder forms too.

• Deuteranopia and deuteranomaly: the green-sensitive cones are missing or shifted. The most common type, around 6% of men.
• Protanopia and protanomaly: the red-sensitive cones are missing or shifted, around 2% of men. Reds also look darker.
• Tritanopia and tritanomaly: the blue-sensitive cones are affected, so blue mixes with green and yellow with pink. Rare, and equally common in men and women.
• Achromatopsia: no working cones, only lightness is seen, about 1 in 30,000 people. It is also a good model for grayscale printing.

Why red and green status colors fail

Take the classic Material pair: error red #d32f2f and success green #388e3c. For normal vision they are far apart, with a ΔE OK of 0.297. Their OKLCH lightness is 0.568 and 0.575, almost identical, and the WCAG contrast between them is just 1.21:1.

With deuteranopia the two collapse into olive tones 0.028 apart, below the 0.05 at which colors become hard to tell apart. In grayscale they are 0.046 apart. Protanopia keeps them at 0.145, but only because the red turns darker, not because the hues differ.

• Error #d32f2f#d32f2f
• Success #388e3c#388e3c
• Deuteranopia: red#8b7c28
• Deuteranopia: green#867a42
• Protanopia: red#62592d
• Protanopia: green#918234
• Grayscale: red#707070
• Grayscale: green#7d7d7d

How to fix a red and green pair

There are two ways out: switch to a blue and orange pair, or keep red and green but pull their lightness apart. The table shows the smallest distance each pair keeps across all four simulations, measured with ΔE OK.

• Blue #0072b2#0072b2
• Orange #e69f00#e69f00
• Deuteranopia: blue#3b67b1
• Deuteranopia: orange#cab411
• Grayscale: blue#6d6d6d
• Grayscale: orange#adadad

Look at the last two columns: the worst simulated distance almost equals the lightness gap. Blue and orange are not safe by themselves: #2563eb and #ea580c have only 0.100 of lightness between them and drop to 0.091 in grayscale. Red and green are not doomed either: a dark red with a light green, #dc2626 and #4ade80, keeps 0.210 under deuteranopia.

Lightness survives every type of color blindness

Color blindness removes hue and chroma differences along certain axes, but perceived lightness changes much less. Here is the OKLCH lightness of four colors before and after simulation.

Lightness moves by about 0.04 or less in most cells. The one big shift is red under protanopia, which drops by 0.106, matching the fact that protans see reds as darker. So the blue and orange pair keeps a lightness gap between 0.148 and 0.247 in every simulation, while the red and green pair starts at 0.007 and has nothing to fall back on.

The practical rule: when two colors must be told apart, make their OKLCH lightness differ by about 0.2. Check it in any OKLCH picker, it takes seconds.

A color-blind safe palette: Okabe-Ito

The Okabe-Ito palette, published by Masataka Okabe and Kei Ito, is the standard categorical palette for scientific charts. It was chosen so the colors stay apart for protanopia, deuteranopia and tritanopia. Below are its eight colors with their OKLCH lightness and how they look under each type.

:root {
    --chart-1: #0072b2;
    --chart-2: #e69f00;
    --chart-3: #009e73;
    --chart-4: #cc79a7;
    --chart-5: #56b4e9;
    --chart-6: #d55e00;
    --chart-7: #f0e442;
    --chart-8: #000000;
}

How Okabe-Ito compares to a default palette

We measured the closest pair in Okabe-Ito and in the eight 500 shades of Tailwind v3 (blue, red, green, yellow, purple, orange, cyan, pink) under each simulation. A smaller ΔE OK means the two closest colors are harder to tell apart.

For the three dichromacies Okabe-Ito keeps every pair at 0.076 or more, while the Tailwind set turns blue-500 and purple-500 into the same color for deuteranopes (0.009).

The surprise is the last row. In grayscale even Okabe-Ito fails: orange #e69f00 and sky blue #56b4e9 have OKLCH lightness 0.753 and 0.735 and become two identical grays. If your chart may be printed in black and white or seen by someone with achromatopsia, labels or patterns are required whatever palette you use.

Rules for UI, charts and maps

Simulation catches bad pairs, but the design has to work even when colors do merge. These rules cover most cases.

• Never use color as the only signal. Add an icon, a text label, a pattern or a line style. WCAG 1.4.1 Use of Color (Level A) requires this.
• Give colors that must be told apart an OKLCH lightness gap of about 0.2.
• Prefer blue with orange or blue with red. Avoid red with green and blue with purple at similar lightness.
• In line charts, label each line at its end instead of relying on a legend, and vary dash patterns.
• For maps and heatmaps, use a sequential scale from light to dark, or a diverging scale with blue and orange ends. Rainbow scales put colors of similar lightness side by side, and those merge.
• Keep categorical palettes to 6 to 8 colors. Beyond that nobody matches colors to a legend reliably, color blind or not.
• Give chart marks and status indicators at least 3:1 contrast against the background, as WCAG 1.4.11 asks for non-text elements.

How to test your colors

Paste your palette into the PickShade color blindness simulator. It shows every color under protanopia, deuteranopia, tritanopia and achromatopsia using the Machado, Oliveira and Fernandes (2009) model and flags each pair whose simulated ΔE OK drops below 0.05. Aim for 0.08 or more. You can also drop in a screenshot of a chart or a whole page and see it the way a color-blind visitor does.

Test the real pairs, not the whole palette at once: text on its background, the two ends of a status, neighboring series in a chart. Two colors that never appear next to each other can safely look alike.

Questions and answers