Color Blindness Simulator

It applies the Vienot and Brettel transformation matrices, the same approach Chrome DevTools and most design tools use. They model full dichromacy, the strongest form of each deficiency, so real users often see somewhat more color than the simulation shows.

Four: protanopia (red-blind, about 1 percent of men), deuteranopia (green-blind, also about 1 percent), tritanopia (blue-blind, rare), and achromatopsia (total color blindness). Each renders as its own labeled image so you can compare them directly.

Yes. Every simulated version has a PNG link in its caption, so you can drop the protanopia or deuteranopia render straight into a design review deck or an accessibility report.

Deuteranopia removes the input from medium wavelength cones, so reds and greens both land in a yellow-brown band. If the two colors also share similar lightness, nothing is left to separate them, which is why status dots and diff views are frequent casualties.

Not literally, but criterion 1.4.1 (Use of Color, Level A) forbids color as the only carrier of information, and simulation is the fastest way to check whether you've broken it. Pair color with icons, labels, or patterns and the requirement mostly takes care of itself.

After simulating your colors under a vision type, the tool measures the perceptual distance between every pair. Pairs closer than a deltaE of 10 are flagged as collisions, meaning most people with that deficiency would struggle to tell them apart.

No. The image is drawn onto a canvas element and every pixel transformation runs locally in your browser. You can load a confidential mockup without it touching a server.