Color Blindness Simulator

Preview color accessibility issues in an image

Color can carry important meaning in charts, buttons, maps, dashboards and marketing graphics. But not everyone sees color differences the same way. This color blindness simulator helps you preview how an image may appear with common color vision deficiencies, so you can spot places where information depends too heavily on red-green or blue-yellow contrast.

The simulation is performed entirely in your browser. The image is drawn to a canvas, each pixel is transformed with a standard 3×3 color matrix, and the resulting canvas is displayed and downloadable as a PNG. No server receives your screenshot or design, which is especially useful for unreleased interfaces, client work and internal dashboards.

Understanding the simulation types

Protanopia simulates missing or non-functioning long-wavelength red cones, which can make reds appear darker and reduce red-green distinction. Deuteranopia simulates missing medium-wavelength green cones, another common red-green deficiency. Tritanopia simulates missing short-wavelength blue cones, affecting blue-yellow perception and occurring less often. The Normal option leaves the image unchanged so you can compare quickly against the transformed versions.

Designing beyond color alone

A simulator is a review aid, not a complete accessibility audit or medical diagnostic tool. Use it to find risky color pairings, then improve the design with labels, icons, patterns, underlines, stronger contrast and redundant cues. Charts should not rely only on differently colored lines; error states should include text or shape changes; buttons should remain recognizable without hue. If the simulated preview still communicates the same message, your image is more likely to work for a wider audience. Review important screens at their real display size too, because small labels, thin chart lines and subtle background tints can become harder to distinguish after the color transform is applied.

Reading the results

Red-green deficiencies are much more common than blue-yellow ones, so protanopia and deuteranopia are usually the first two previews to check. Switch between the options and compare the original with each version: if two categories, lines or status colors become hard to tell apart, the design depends too much on hue. Keep in mind that these are approximations of full dichromacy. Milder forms of color weakness and rarer conditions such as complete color blindness are not covered, and real perception varies between people and lighting conditions. The downloaded PNG keeps the full resolution of your original and includes the simulation name in the file name.