Colorblind Simulator

Edit the palette at the top — each swatch has a native color picker and a hex input — or click Import paletteto paste a comma- or newline-separated list of hex codes from the Palette Generator, a design doc, or a Figma export. Then read down the rows below to see how the palette appears under each form of color vision deficiency. Two swatches that look distinct in the “Normal vision” row but identical in the Deuteranopia row are colors that ~1% of men cannot tell apart. That is the signal you want to catch before shipping a chart, status badge, or category map.

The simulations use the Machado, Oliveira & Fernandes 2009 model — a widely cited matrix transform applied in linear RGB space. Dichromatic forms (protanopia, deuteranopia, tritanopia) collapse one cone type entirely; anomalous trichromacy (protanomaly, deuteranomaly, tritanomaly) shifts the spectral sensitivity of the affected cone instead. Achromatopsia is a pure luminance projection (the WCAG luma weights) since people with full achromatopsia perceive only brightness.

The two failure modes you will see most often are red/green confusion (for deuter- and protan- families, which together make up ~8% of men) and a loss of contrast between low-saturation pairs. If your data viz uses red for “bad” and green for “good” with no shape, label, or icon to back it up, this tool will show you exactly why the convention is an accessibility anti-pattern. The fix is rarely changing the brand colors — it is adding a second visual channel (icon, label, pattern, brightness).

Use the CSS output below as a reference snippet. The first block is your real palette as CSS variables; each commented block underneath shows the hex values an affected user would actually see. Drop the snippet into a design doc or PR description so the reviewer does not have to re-run the simulator.