色盲模拟器

Why color blindness simulation matters for design

Roughly 1 in 12 men and about 1 in 200 women have some form of color vision deficiency. That means in any audience of a few hundred people, dozens are seeing your charts, status indicators, maps, and buttons differently from how you designed them. A red "error" and a green "success" badge can look identical to a person with red-green color blindness. This tool lets you upload an image and instantly see it reprocessed through four common types of color vision deficiency, side by side with the normal version, so you can catch accessibility problems before they ship.

How the simulation works under the hood

Color vision starts with three types of cone cells in the retina, each tuned to long (red), medium (green), or short (blue) wavelengths. The major forms of color blindness happen when one cone type is missing or shifted. To simulate this, the tool reads every pixel of your image with the HTML5 Canvas API and multiplies its red, green, and blue values by a fixed 3×3 transformation matrix that approximates how a missing cone redistributes color information. For each pixel, the new red channel is a weighted blend of the original R, G, and B, and the same for green and blue. The reprocessed pixels are written back to a canvas and shown as a new image.

The grayscale case is different

The achromatopsia tile does not use a color-shift matrix. Instead it computes the luminance of each pixel using the standard Rec. 709 weights: 0.2126 × R + 0.7152 × G + 0.0722 × B. Those coefficients are not arbitrary — the human eye is far more sensitive to green than to red, and least sensitive to blue, so green contributes the most to perceived brightness. Setting all three channels of each pixel to this single luminance value produces a perceptually correct grayscale, not the muddy result you get from naively averaging the three channels equally. This is also why the grayscale view is the single most useful test: if two colors collapse to the same shade of gray, they will be hard to tell apart for anyone with reduced color perception, and impossible for someone with total color blindness.

A worked example

Imagine a dashboard where "passing" cells are green (#22c55e) and "failing" cells are red (#ef4444). To normal vision these are obviously different. Run the image through the Deuteranopia tile and both colors shift toward a similar muddy yellow-brown — the green-red distinction nearly vanishes. Now look at the Achromatopsia tile: the red maps to a medium-dark gray and the green to a slightly lighter gray, but they are close enough that a viewer would struggle to sort the table by status. That single comparison tells you the design relies on color alone and needs a second cue.

What to do with what you see

• Never rely on color alone. Pair every color-coded signal with a shape, icon, label, or pattern — a checkmark and an X, "Pass"/"Fail" text, solid versus dashed lines.
• Prefer blue-orange to red-green. The most common deficiencies are red-green; blue and orange stay distinguishable across nearly all types.
• Check charts and maps especially. Heatmaps, line charts, and choropleth maps are the worst offenders because they encode meaning purely in hue.
• Test brightness contrast, not just hue. If the grayscale tile shows two elements at the same lightness, increase their luminance difference even if the hues differ.

Limitations to keep in mind

• These are approximations. The matrices are widely-cited linear-RGB transforms, but real color perception varies between individuals and is not perfectly linear. Treat the output as a strong warning system, not a clinical diagnosis.
• Anomalous trichromacy is not shown. Milder forms (protanomaly, deuteranomaly) where a cone is shifted rather than absent are not separately simulated; the dichromat versions here represent the stronger, worst-case end.
• Your own monitor matters. Display calibration and ambient light affect what you and your users actually see.

Every transformation runs locally in your browser using canvas pixel manipulation. The image you upload is never sent to a server, so you can safely test private screenshots and unreleased designs.