What this does
Pick an image and this tool renders five copies of it side by side: the original, plus four common colour-vision deficiencies. Use it on charts, status badges, heat maps, dashboards and any interface where a red-versus- green distinction is doing real work. If two states become indistinguishable in the Deuteranopia tile, that colour pair is not carrying the meaning you think it is.
Which types of colour blindness does it simulate?
- Protanopia — red cones missing. Labelled in the tool as affecting roughly 1% of men.
- Deuteranopia — green cones missing, also around 1% of men. This is the one most people mean by "red-green colour blind".
- Tritanopia — blue cones missing, under 0.01% of people. Rare, but it wrecks blue/green pairings.
- Achromatopsia — no colour cones at all; the image collapses to greyscale.
All four are dichromacies — the complete absence of one cone type. The milder anomalous-trichromacy variants (protanomaly, deuteranomaly) are not modelled separately; treat the dichromatic tile as the worst case and design to it.
How do I check a design for colour blindness?
- Export a screenshot of the screen, chart or palette you want to test as PNG or JPEG.
- Choose it with the file input. Nothing else to configure — the five tiles render immediately.
- Compare the Normal tile against the other four, one element at a time.
- Anywhere two elements merge, add a second channel: a shape, a pattern, a label, or a lightness difference rather than a hue difference.
How does the simulation work?
Each deficiency is a fixed 3×3 matrix applied to every pixel's red,
green and blue channels, then clamped back into the 0–255 range. The matrices
are the standard set derived from the Brettel/Viénot/Mollon and Machado work —
the same family Chrome DevTools uses in its rendering panel. Achromatopsia is
the simplest to read: all three rows are the luma weights
0.299 R + 0.587 G + 0.114 B, so every output channel gets the
same value and the pixel goes grey.
Images are scaled so the longest side is at most 600 px before the matrix runs, which keeps a full five-way comparison fast on a phone. Upload a crop rather than a 4K screenshot if you need to inspect fine detail.
How accurate is it?
It is an approximation, not a clinical instrument. Real colour vision varies by individual and by severity, matrix models flatten that into one fixed transform, and the maths here runs on the sRGB values as encoded rather than in a linearised working space. It is more than good enough to catch the failure that matters in practice — two UI states that turn into the same colour — and not good enough to make claims about what a specific person sees.
What should I do about a failure?
Do not just swap the hues. Contrast in lightness survives every one of these transforms, so the reliable fix is to separate your states by luminance as well as hue, and to add a non-colour cue. Check the pairs numerically in the contrast checker, rebuild the set in the palette generator, or convert individual values with the colour converter — OKLCH's lightness axis is the useful one here. Your image is processed on canvas in the page and never uploaded.