Free Online Color Blindness Simulator
Preview images under protanopia, deuteranopia, and tritanopia.
0% shows the original colors. 100% applies the full deficiency matrix.
Simulation happens entirely in your browser using canvas pixel math. It is an educational approximation, not a medical diagnosis. Colors, screen calibration, and display settings all affect how a real deficiency looks.
About the Color Blindness Simulator
Roughly one in twelve men and one in two hundred women have some form of color vision deficiency. Designers, teachers, developers, and anyone who publishes charts or interfaces can benefit from seeing their work through a different pair of eyes. This simulator applies established color vision deficiency matrices to an uploaded image and shows the original and the simulated version side by side. It runs locally in the browser, so the image never leaves your device and no account is required.
What the four simulation types mean
Protanopia describes the absence of functioning red-sensitive cone cells. Reds appear much darker, and red-green distinctions collapse toward muddy browns and yellows. Deuteranopia is the absence of green-sensitive cones and is the most common severe form; it also merges reds and greens, but brightness relationships differ from protanopia. Tritanopia affects the blue-sensitive cones, making blues and greens hard to separate and pushing yellows toward pink. Achromatopsia removes color perception almost entirely, leaving a grayscale image.
Using the strength slider
Real color vision varies continuously. Anomalous trichromacy, where one cone type is shifted rather than missing, produces milder effects than complete dichromacy. The strength slider blends the original pixels with the fully simulated pixels, which lets you approximate partial deficiency or simply reduce the effect when you want to compare details. A 100% setting represents the complete absence of that cone response, while 50% is a useful middle ground for checking whether a redundant cue still survives.
Designing beyond color
A simulation is most valuable when it reveals information that exists only as color. If a red error label and a green success label become identical, add an icon, a border pattern, or explicit text. Charts should use different shapes or direct labels as well as different hues, and links inside paragraphs should be underlined rather than distinguished by blue alone. Contrast is another frequent casualty: a color pair that passes WCAG contrast in the original image may fail after simulation, especially when red and green have similar luminance. Use the contrast checker alongside this tool when the image contains text or interface controls.
Frequently asked questions
Does this show exactly what a color-blind person sees?
No. The matrices model the most common dichromatic deficiencies under standardized viewing conditions. Real perception depends on the exact type and severity of the deficiency, lighting, display calibration, and individual adaptation. Use the result as a practical review aid rather than a clinical simulation.
Why do the simulated images look washed out?
When one cone channel is removed, the remaining channels are recombined to estimate the missing response. That projection reduces the total range of colors, so saturated reds and greens often become duller and darker. This is expected and is part of what makes the simulation useful.
Is my image uploaded anywhere?
No. The file is read with the browser FileReader API and processed on a canvas on your device. The download button exports the simulated canvas directly, and closing the page removes everything.