Color Blindness Simulator
Simulate color blindness types.
Overview
The Color Blindness Simulator previews how your interface looks to viewers with the most common forms of colour-vision deficiency: protanopia and protanomaly (red-weak), deuteranopia and deuteranomaly (green-weak), tritanopia and tritanomaly (blue-weak), plus full achromatopsia. Drop in a hex code, a small palette, or a screenshot and compare the simulated swatches side by side with the original.
Designers use it to validate dashboards, charts, status badges and warning banners before shipping, ensuring that critical signals never rely on hue alone. Front-end engineers can use it during accessibility audits to flag red/green pairings that collapse to indistinguishable greys for roughly 8% of male users.
How it works
Each simulation runs in linear LMS cone space. The sRGB input is gamma-decoded, transformed into the long/medium/short cone responses via the Hunt-Pointer-Estevez matrix, and then projected onto the dichromatic confusion line for the chosen deficiency using the Brettel, Viénot and Mollon model. The result is mapped back through LMS → linear RGB → sRGB and re-encoded for display.
Anomalous-trichromacy variants (protanomaly, deuteranomaly, tritanomaly) blend the dichromatic projection with the original colour at a configurable severity, which roughly tracks the spectrum of real-world cases.
Examples
#ff0000 (red) → deuteranopia → #837c00 (muted olive)
#00ff00 (green) → deuteranopia → #ffe300 (greenish yellow)
#0066ff (blue) → tritanopia → #0094a3 (teal)
#9b59b6 (violet)→ protanopia → #585b6a (grey-purple)
FAQ
Which deficiency should I test first?
Deuteranopia and deuteranomaly together account for the majority of colour-blind users, so they are the most common targets. Protanopia comes next, then tritanopia, which is rare but worth checking for nature, mapping or medical UIs.
Do the simulated colours look the same to a colour-blind viewer?
The model is a well-established approximation, not a literal reproduction. Real perception varies between individuals, especially for anomalous trichromats, but the simulator is reliable for flagging risky pairings.
Is red-green the only thing I should worry about?
It is the most common failure mode, but charts that rely on similarly-saturated hues, low-contrast greys, or thin lines also break easily. Pair colour with shape, position or labels whenever possible.
Can I simulate a whole screenshot?
Yes. The same per-pixel transform applies to images, and the tool processes uploads client-side so nothing leaves the browser.