Check whether a design reads under color blindness

The job

Red/green status badges, chart series colors, and map legends can collapse into the same hue for many readers. Simulating protanopia, deuteranopia, and tritanopia shows which distinctions survive and which vanish.

How to do it

Drop in the image — a screenshot of the UI or the exported chart works — pick a type, and compare the simulated PNG against the original. The critical check: can you still tell status colors and series apart without hovering or reading labels?

• Protanopia and deuteranopia are the common red–green confusions; tritanopia (blue–yellow) is rarer.
• If two colors merge, differentiate by shape, pattern, or a direct label — not a second color.
• Contrast matters separately: run the text through the contrast checker for WCAG ratios.

Worked example

A dashboard uses green for “healthy” and red for “down”. Under deuteranopia both read as the same olive — the simulation shows the ambiguity instantly, and adding an icon next to each badge fixes it without a redesign.

Limits

The matrices approximate complete protanopia/deuteranopia/tritanopia — partial forms (protanomaly etc.) are milder and not modeled. It is a per-pixel mathematical transform of the image as rendered, not a guarantee of any individual's perception. PNG/JPG/WebP up to 25 MiB; output is PNG.