👁️ Color Blindness Simulator

See how a color looks to people with common forms of color vision deficiency — protanopia, deuteranopia and tritanopia — to sanity-check a UI or chart palette.

Pick a Color

Or Enter HEX

The matrix behind each swatch

Your hex is split into red, green and blue bytes, then multiplied by a fixed 3×3 matrix - one per deficiency. Protanopia, missing the long-wavelength cone, uses:

R' = 0.567R + 0.433G + 0.000B
G' = 0.558R + 0.442G + 0.000B
B' = 0.000R + 0.242G + 0.758B

Every row sums to 1, so overall lightness is roughly preserved while red and green collapse toward each other. Run the default #E63946 through it: R' is 230×0.567 + 57×0.433 = 155, G' is 230×0.558 + 57×0.442 = 154, B' is 57×0.242 + 70×0.758 = 67. The vivid red comes back as #9B9A43, a dull olive. Deuteranopia (0.625/0.375, 0.7/0.3, 0.3/0.7) turns the same colour into #A5B242.

Reading the result

Compare pairs, not single colours. The question is never "does this look right", it is whether your two chart series or your success and error states still land on different swatches.
Tritanopia (blue-yellow) is far rarer than the two red-green forms, which together affect roughly 8% of men.
Three-digit hex works. #e34 is expanded to #ee3344 before the maths; anything that is not six valid hex digits is rejected.

These are dichromacy matrices - the full absence of one cone type. Most people with colour vision deficiency are anomalous trichromats, who see something between your original swatch and the simulated one. The matrices are also applied to gamma-encoded bytes rather than linear light, which is the usual fast approximation, so treat the output as indicative.

Frequently asked questions

What is the difference between protanopia and deuteranopia?

Protanopia is a missing red cone and also dims red light, so reds look darker and murkier. Deuteranopia is a missing green cone with normal brightness. Both make red and green hard to separate.

Which colours should I avoid putting next to each other?

Red against green, and green against brown or orange, are the pairs that collapse. Blue against orange survives all three simulations here, which is why it is the safest two-colour chart pairing.

Is colour alone enough to show status in a UI?

No. WCAG 1.4.1 requires that colour is never the only way information is conveyed, so pair it with an icon, a label, or a different line style.