Color Blindness Simulator

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

1. 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.
2. Palette mode: switch to the colors tab and enter one or more HEX codes (for example your brand or chart palette). Each color is shown in its original form and under every deficiency type, so you can spot pairs that collapse into the same shade.
3. Scan the results, fix any colors that become indistinguishable, and get back to work. 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 Machado, Oliveira and Fernandes (2009) matrices for Protanopia, Deuteranopia, and Tritanopia — a widely cited, perceptually grounded model. 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 cover just one deficiency. This tool does both image and palette simulation, covers four deficiency types, 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