How common is color vision deficiency?

Around 8% of men and 0.5% of women of Northern European descent have some form of red-green deficiency. Deuteranopia and deuteranomaly are the most common; blue-yellow (tritan) deficiency and full achromatopsia are rare.

How accurate is a color blindness simulator?

Simulations use established LMS-cone transforms (Brettel/Viénot style) and are a good directional guide, but individual perception varies and anomalous trichromacy is a spectrum. Treat a simulator as a design smoke test, not a medical model.

How do I make a palette work for color-blind users?

Never rely on hue alone. Keep at least 3:1 lightness contrast between colors that must be distinguished, and pair color with a second cue — icon, label, pattern, or position.

Which chart palettes are safest?

Sequential ramps that vary lightness monotonically survive every simulation. For categorical data, vary lightness as well as hue instead of picking five colors at the same lightness.

Color Blindness Simulator

Paste a palette and see it through protanopia, deuteranopia, tritanopia and achromatopsia at once. Colors that merge in a simulation are colors your users cannot rely on.

Colors (comma or space separated)

HEX, rgb(), hsl() and oklch() all work.

#22c55e

#ef4444

#f59e0b

#3b82f6

#a855f7

#c1a859

#5e5843

#c99903

#5f85fc

#406fff

#a19263

#837442

#dfaf0f

#4d74f3

#4f74f1

#0bc3a5

#ff3745

#ff8172

#1499a5

#a06687

#a5a5a5

#8b8b8b

#b4b4b4

#878787

#888888

Findings

⚠ Protanopia: #22c55e and #f59e0b become hard to tell apart.
⚠ Protanopia: #3b82f6 and #a855f7 become hard to tell apart.
⚠ Deuteranopia: #3b82f6 and #a855f7 become hard to tell apart.
⚠ Achromatopsia: #22c55e and #f59e0b become hard to tell apart.
⚠ Achromatopsia: #ef4444 and #3b82f6 become hard to tell apart.
⚠ Achromatopsia: #ef4444 and #a855f7 become hard to tell apart.
⚠ Achromatopsia: #3b82f6 and #a855f7 become hard to tell apart.

accessible-charts.css

/* Quick sanity check without leaving devtools */
@media (prefers-contrast: more) {
  :root { --chart-1: #22c55e; }
}

/* Vary lightness, not just hue, so categories survive simulation */
.legend-item::before {
  background: var(--chart-1);
  /* pair color with a shape cue */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

What each type means

Protanopia and deuteranopia are red-green deficiencies caused by missing long- or medium-wavelength cones; reds, greens, oranges and browns converge. Tritanopia affects blue-yellow discrimination. Achromatopsia removes hue entirely, which is also a useful proxy for greyscale printing and low-quality projectors.

Designing palettes that survive

The single most effective rule: separate your categorical colors by lightness. Two colors 25 lightness points apart remain distinguishable under every simulation, whatever happens to their hue. Then add a redundant cue — a dash pattern, an icon, a direct label — so color is never the only channel carrying meaning.

Frequently asked questions

How common is color vision deficiency?: Around 8% of men and 0.5% of women of Northern European descent have some form of red-green deficiency. Deuteranopia and deuteranomaly are the most common; blue-yellow (tritan) deficiency and full achromatopsia are rare.
How accurate is a color blindness simulator?: Simulations use established LMS-cone transforms (Brettel/Viénot style) and are a good directional guide, but individual perception varies and anomalous trichromacy is a spectrum. Treat a simulator as a design smoke test, not a medical model.
How do I make a palette work for color-blind users?: Never rely on hue alone. Keep at least 3:1 lightness contrast between colors that must be distinguished, and pair color with a second cue — icon, label, pattern, or position.
Which chart palettes are safest?: Sequential ramps that vary lightness monotonically survive every simulation. For categorical data, vary lightness as well as hue instead of picking five colors at the same lightness.

Related tools

◐Palette Generator

Harmony-based palettes generated in OKLCH with locking, reordering and instant copy.

◈Design System From One Color

Primary, neutral, success, warning, danger ramps plus semantic light/dark tokens.

◑Contrast Checker

WCAG ratios plus perceptual OKLCH repair suggestions when a pair fails.