Color Blindness Simulator

Color Blindness Simulator shows one color through four different color vision deficiencies at once, and can push the same simulation through an entire image.

What is Color Blindness Simulator?

Color Blindness Simulator shows a single color as it would appear through four different color vision deficiencies, all at once, and can apply the same treatment to a whole image. Enter one color and the page renders a row of swatches, beginning with the untouched original so that every simulated swatch has a reference beside it.

The row covers the deficiencies the simulator models, in order:

• Protanopia, the absence of the long-wavelength cone that carries red, which turns reds toward olive and darkens them noticeably.
• Deuteranopia, the absence of the medium-wavelength cone, the commonest dichromacy and the one that collapses red and green into each other.
• Tritanopia, the absence of the short-wavelength cone, which affects the blue and yellow axis and is far rarer than the other two.
• Achromatopsia, the loss of color vision altogether, where the swatch is reduced to a single luminance value.
• Plus the untouched original, sitting first in the row as the only swatch that is not a simulation.

Each swatch comes from multiplying the red, green and blue channels by a fixed three-by-three matrix, following the Brettel and Machado approximations. Protanopia combines the channels with 0.567 and 0.433 on the first row, 0.558 and 0.442 on the second, and 0.242 and 0.758 on the third. Deuteranopia uses 0.625 and 0.375, then 0.7 and 0.3, then 0.3 and 0.7. Tritanopia uses 0.95 and 0.05, then 0.433 and 0.567, then 0.475 and 0.525. Achromatopsia applies the same luminance weights of 0.299 red, 0.587 green and 0.114 blue to all three output channels, which is why its swatch always lands on a grey. The matrices act on the 8-bit channel values directly and the results are clamped inside the 0 to 255 range, so this is an approximation of each deficiency rather than a colorimetrically exact transform.

The image half of the page works the same arithmetic over pixels. Drop an image in, choose one of the four deficiencies from the dropdown, and the canvas is redrawn through that matrix. The picture is scaled so its longest edge is at most 800 pixels before processing, which keeps the redraw quick but means the simulated canvas is a downsampled version of what you supplied. A button replaces the image whenever you want to try another.

Some limits are worth holding in mind, because a simulation is easy to over-read.

• Four deficiencies with no severity control. Every matrix is full strength, so the partial forms, which are much more common than the complete ones, are not represented.
• Nothing is exported. The swatches and the canvas are for reading on screen, and no file is produced.
• One image at a time, with no camera feed and no live capture.
• The matrices approximate how these deficiencies are typically modelled. They are not a measurement of any individual's vision.
• Legibility is not judged. The page shows what the colors become, not whether the result can still be used.

Use the swatch row as a fast check on a single brand color, then run the simulation over a real screenshot of your interface, an image color blindness preview of the screens you actually ship. That is where the combinations you did not think about will surface. When two colors in a chart turn into the same swatch, the fix is almost always to separate them in lightness rather than in hue.

It is worth being clear about what a cvd simulation can and cannot establish. The protanopia deuteranopia preview swatches answer the question of whether two particular colors survive one conversion each, and they make no attempt to rank a palette or score a design. Read them as a set of views to think with rather than as a pass mark.

How to use Color Blindness Simulator

1. Pick a color in the swatch field to populate the row of simulated views.
2. Compare the original against the protanopia, deuteranopia, tritanopia and achromatopsia swatches, looking for pairs that become hard to tell apart.
3. Drop an image into the simulation panel to see the same deficiency applied across a whole picture.
4. Choose the deficiency from the dropdown and use the replace button to swap the image when you want to compare another screen.

When to use Color Blindness Simulator vs related tools

Use the color blindness simulator when you want one color seen through every deficiency at once, and when you need to push that view across a whole screenshot rather than a single swatch. If one deficiency is the concern, the dedicated deuteranopia simulator and tritanopia simulator pages keep the comparison to a single pair, the deuteranomaly simulator covers the partial form, and picking text colors that survive the same problem belongs with the color blind friendly color picker.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Color Blindness Simulator