Color blindness simulator
This simulates how a whole color palette looks with protanopia, deuteranopia or tritanopia, and then names the pairs that become hard to tell apart. That second part is what matters: seeing a simulated palette is interesting, but knowing your success green and error red now collide is what changes a design.
Your palette
- Requests
- · from Resource Timing
- Script
- · KB of a 100 KB budget
Simulating is not the useful part
Most simulators show you the palette through a filter and stop there. That is a genuinely interesting thing to look at once, and it is very hard to act on, because you are being asked to eyeball whether two shifted colors are still different enough. Eyeballing that is exactly the skill the exercise proves you do not have.
So this measures it. For every pair in the palette it computes the perceptual distance before and after simulation, and lists the pairs that were clearly different and are now close together. The classic case is a status palette: a green that means success and a red that means error, 112 units apart to normal color vision and 25 apart with deuteranopia. Same lightness, similar saturation, different hue, and the hue is the only thing carrying the meaning.
The trap: contrast does not save you
A pair can pass WCAG contrast comfortably and still be indistinguishable here. That is not a contradiction, it is what the two measurements are for. Contrast ratio is pure luminance, so two colors of equal lightness and opposite hue score identically whether they are red and green or red and red.
Where that happens, this page says so: the collision list mentions the contrast ratio when a colliding pair still passes 3:1. A green tick and a red cross at 4.6:1 against the page background will both be perfectly readable, and both the same gray.
The fix is almost never a different color. It is a second signal: a label, an icon with a different shape, a pattern, a position. Color can carry the meaning as long as it is not the only thing carrying it. That is WCAG 1.4.1 and it is the success criterion this tool is really about.
How the simulation works
Each color is converted from sRGB to linear light, then into LMS space, which describes the response of the three cone types in the eye. The cone type that is missing gets reconstructed from the other two, and the result is converted back. That follows the method in Vienot, Brettel and Mollon's 1999 paper. The matrices are applied to linear-light values here, so the source and the implementation can be checked against each other.
One detail worth stating because it is where implementations disagree: the transform is applied to linear light here, not to the gamma-encoded values. The widely copied shortcut applies the same matrices straight to sRGB bytes, which is faster and visibly wrong in the shadows. If a result here differs from another simulator, that is probably why.
The distance measurement is CIE76 in Lab space, using the colorimetry defined in CIE 15:2004. A pair is called collapsed when it ends up under 30 and has lost at least half the distance it started with. That threshold is Benchvale's product rule, not a CIE or WCAG pass mark. The second condition stops the tool flagging colors that were already similar, which is a palette problem rather than a color-vision finding.
Those numbers are a judgment call, not a standard, and they were calibrated against a
real case rather than picked. A status green at #1E8E3E and a status red
at #D93025 sit 112 apart normally and land at 20 under protanopia and 25
under deuteranopia. Both are unmistakably the same olive. An earlier version of this
page used a stricter single threshold and reported that pair as fine, which is exactly
the failure the tool exists to prevent.
What this does not cover
This simulates full dichromacy, where one cone type is absent entirely. The milder anomalous forms, deuteranomaly in particular, are considerably more common: the cone is present but its response is shifted. Someone with deuteranomaly will see more difference between your colors than this shows.
That makes this a harder test than most people face, which is the right way round for a check. A palette that survives it is safe. A palette that fails it is not necessarily unusable, it just needs that second signal.
It also does not cover achromatopsia, which is very rare, or the enormous everyday category of people looking at a cheap monitor in direct sunlight, who are functionally in a similar position. Designing for the simulated case tends to fix that one too.
Questions
Which type should I check against?
Deuteranopia if you only check one. Red-green deficiencies are by far the most common and deuteran types are the largest group within them. Tritanopia is rare enough that it is rarely the deciding factor, though it is cheap to check since it is a checkbox.
My palette passes. Am I done?
Not quite. This checks whether your colors can be told apart. It cannot check whether color is the only thing carrying meaning, which is the actual requirement. A chart with six distinguishable line colors and no labels still fails for anyone printing it in black and white.
Why do the simulated colors look washed out?
Because reconstructing a missing cone response genuinely collapses part of the color space. It is not an artifact of the tool. The set of colors a dichromat can distinguish is smaller, so a wide-gamut palette maps onto a narrower one and distinct hues land on the same result.
Does it simulate images?
No, palettes only. Image simulators exist and are good. This is aimed at the design system stage, where you are choosing eight colors that will end up everywhere and it is much cheaper to catch a collision now than in every chart you ever ship.
Does my palette leave the page?
No. The matrices and the distance calculation all run in your browser. Once the page has loaded, you can turn off your wifi and it keeps working.
Related tools
Contrast is the other half of this and they are separate checks: the contrast grid takes the same palette and reports every pair's WCAG ratio. For one pair, the contrast checker. Once the palette survives both, export it to CSS and JSON tokens.