Color Blindness Simulator

Preview how a color palette looks to people with color vision deficiencies.

See how your colors look to people with color vision deficiencies. Paste a palette (one color per line, or comma-separated) in hex, rgb(), hsl(), or by name. The dichromat rows use the Machado 2009 model, the same one Chrome DevTools uses. Around 1 in 12 men has some form of color blindness, so it's worth checking that a palette still reads clearly.

Colors

Pick to add

Normal vision

~92% of men, ~99.5% of women

Full color vision, shown for reference.

#e11d48

#16a34a

#2563eb

#f59e0b

#0d9488

#7c3aed

Deuteranopia

~6% of men

Green-blind - the most common red-green deficiency.

#8e8242

#958951

#0064e8

#d0b914

#7c7f89

#0063ea

Protanopia

~2% of men

Red-blind - reds look darker and shift toward green.

#5f5a48

#a49442

#0076f0

#bba400

#8c8b88

#0069f2

Tritanopia

very rare (<0.01%)

Blue-blind - blues and yellows are hard to tell apart.

#f70032

#00a08f

#00869d

#ff8887

#009790

#586c92

Achromatopsia

extremely rare

Total color blindness - everything is shades of gray.

#747474

#8e8e8e

#6d6d6d

#b1b1b1

#848484

#676767

About Color Blindness Simulator

Paste a palette and see it the way someone with a color vision deficiency would. It simulates the three dichromacies - deuteranopia, protanopia, and tritanopia - plus total color blindness (achromatopsia), so you can tell whether your colors stay distinguishable. The red-green simulations use the Machado 2009 model, the same one built into Chrome DevTools. Around 1 in 12 men and 1 in 200 women has some degree of color blindness, so a palette that relies on red-vs-green alone can fall apart for a real slice of your audience. Everything runs in your browser.

Why this matters

Color is a common way to signal meaning - a green 'success' next to a red 'error', a status dot, a chart legend. But roughly 8% of men and 0.5% of women see color differently, and red-green deficiency is by far the most common kind. If two colors that carry different meanings look the same to them, the information is gone. Checking a palette here takes seconds and tells you whether you need a second cue like a label, icon, or shape.

How the simulation works

Each color is converted from sRGB to linear light, transformed by the relevant color-blindness matrix, then converted back. The deuteranopia, protanopia, and tritanopia rows use the Machado, Oliveira & Fernandes (2009) matrices at full severity - the model Chrome DevTools uses for its vision-deficiency emulation. Achromatopsia is a relative-luminance grayscale. These simulate the dichromat (full) forms, which are the strongest case. Milder anomalous forms (deuteranomaly and so on) sit between normal vision and these.

Reading the result

Compare each row against the normal-vision row
If colors that mean different things collapse to near-identical swatches, they're a problem
Watch red-green pairs in deuteranopia and protanopia especially
Don't rely on color alone - add text, icons, or patterns
Check both text and background combinations, not just accent colors