Color Blindness Simulator
See how an image or a set of colors looks to people with red, green, or blue color blindness. Compare the original against Protanopia, Deuteranopia, Tritanopia, and grayscale views — everything runs in your browser, and your image is never uploaded.
What is the Color Blindness Simulator?
The Color Blindness Simulator shows you how an image or a set of colors looks to someone with color vision deficiency. Drop in a screenshot, a chart, a logo, or a few HEX codes and instantly compare the original against Protanopia, Deuteranopia, Tritanopia, and grayscale views. It answers one practical question in a second: will the people I am designing for still be able to tell these colors apart?
Color blindness is more common than most teams assume. Roughly one in twelve men and one in two hundred women have some form of color vision deficiency. The large majority are red-green types — Deuteranopia (reduced or absent green sensitivity) and Protanopia (reduced or absent red sensitivity). Tritanopia, a blue-yellow deficiency, is much rarer, and complete color blindness (Achromatopsia), where everything is seen in shades of gray, is rarer still.
Why simulate color blindness?
If a status badge relies on red-versus-green alone, a red-green color-blind user sees two near-identical colors and loses the meaning entirely. Simulating those views before you ship is the fastest way to catch the problem. It directly supports WCAG accessibility guidance, which says color must never be the only way information is conveyed. By previewing your design through each deficiency you can confirm that charts, form errors, maps, buttons, and brand palettes still communicate without relying on hue alone.
How to use it
- Image mode: drag an image onto the drop area or pick a file. The original and each simulated version render side by side. Nothing uploads — processing happens locally on a Canvas.
- Palette mode: switch to the colors tab and enter two or more HEX codes (for example your brand or chart palette). The Closest pairs audit names the pair most likely to collapse under each condition, while the full grid shows every transformed color.
- Move Severity to inspect partial color weakness or the 100% dichromacy extreme. Then add labels, icons, shapes, or patterns anywhere color alone carries meaning. You can download a simulated image if you want to share the result.
The method behind it
Each pixel's red, green, and blue values are transformed by a 3x3 matrix that approximates how a given type of color blindness remaps color. We use the published Machado, Oliveira and Fernandes (2009) matrices at 0.1 severity intervals for Protan, Deutan, and Tritan simulation — a widely cited, perceptually grounded model that spans anomalous trichromacy through complete dichromacy. For each pixel the simulator multiplies the RGB vector by the chosen matrix, clamps the result back into the 0 to 255 range, and writes it to the output. Achromatopsia is rendered as luminance grayscale using the standard Rec. 601 weights. The exact same per-pixel function powers both image mode and palette mode, so a single HEX swatch and a full photo are simulated identically.
Examples
- A red/green traffic-light status table → under Deuteranopia the error red and ok green drift toward similar muddy tones, revealing that the table needs icons or labels, not color alone.
#FF0000(pure red) → in Protanopia it shifts toward a dark yellow-brown, showing how much luminance red loses for red-blind viewers.- A blue-and-purple data chart → under Tritanopia the blue and purple series converge, a classic reason to pick a color-blind-safe palette.
Common use cases
- Designers checking that a UI, icon set, or illustration is readable for color-blind users.
- Front-end developers auditing chart and dashboard palettes before release.
- Accessibility auditors documenting WCAG conformance with before/after evidence.
- Brand and marketing teams confirming a logo or campaign palette works for everyone.
- Teachers and educators demonstrating what color vision deficiency actually looks like.
Why use this one
Most simulators do only one thing — either they recolor an image or they tweak a single swatch, and many leave you to guess which palette colors collide. This tool handles images and palettes, lets you vary severity, names the closest pair under each condition, and runs entirely in your browser using Canvas, so your image is never uploaded and results appear instantly with no sign-up. For the rest of the color workflow it pairs naturally with the Contrast Checker, the Hex to RGB converter, and the Color Picker.
Frequently asked questions
Is my image uploaded anywhere?
No. The image is read with FileReader and processed pixel-by-pixel on a Canvas inside your browser. It is never sent to a server, so it stays completely private.
Which types of color blindness does it simulate?
Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (total color blindness, shown as grayscale). The first three cover the vast majority of color vision deficiency.
How accurate is the simulation?
It uses the published Machado, Oliveira and Fernandes (2009) matrices at 0.1 severity intervals for anomalous trichromacy through dichromacy. The closest-pair score is an OKLab comparison cue, not a WCAG verdict. Perception varies, so the tool is a design check rather than a medical diagnosis.