Color Blindness Simulator
Add the colors of your palette — or upload an image — and see them as someone with protanopia, deuteranopia, or tritanopia would, plus a full grayscale pass. Everything runs in your browser; uploaded images never leave your device.
Add the colors of your palette
Your palette under each condition
| Original | Protanopia | Deuteranopia | Tritanopia | Grayscale | |
|---|---|---|---|---|---|
#E53935 | #6E6332 | #98892E | #FC003A | #7B7B7B | |
#43A047 | #A3923F | #978A4E | #329C8C | #8D8D8D | |
#1E88E5 | #598FE9 | #377DE3 | #009EAB | #858585 | |
#FDD835 | #EFD402 | #F9DF41 | #FFC6BA | #DADADA |
Or simulate an image (stays on your device)
Build a distinguishable palette in Moda
Take the colors that survived the simulation into charts, slides, and brand assets.
Try Moda free →The three conditions this tool simulates
Protanopia (missing long-wavelength cones) and deuteranopia (missing medium-wavelength cones) are the two red-green deficiencies; together they affect roughly 8% of men and 0.5% of women. Under both, reds and greens collapse toward similar muddy yellows — which is why a red/green status pair is the classic design failure. Tritanopia (missing short-wavelength cones) is much rarer and confuses blues with greens and yellows with violets. The grayscale pass is not a medical condition but a useful stress test: if your palette works with no hue at all, it works for everyone.
How the simulation works, and why it is approximate
Each color is converted to linear RGB and multiplied by the Machado, Oliveira & Fernandes (2009) severity-1.0 transformation matrix for the chosen condition — the standard physiologically-based approximation used by most simulation tools. Real color vision deficiency varies continuously in severity (anomalous trichromacy is far more common than complete dichromacy), monitors differ, and no simulation can reproduce an individual’s actual perception. Treat the output as a strong directional check, not ground truth — if two palette colors merge here, assume some of your audience cannot tell them apart.
Designing palettes that survive
The reliable fix is to vary lightness, not just hue: two colors that differ clearly in lightness stay distinguishable under every deficiency, which is why the grayscale column is a quick verdict on the whole palette. Beyond lightness, avoid encoding meaning in red-vs-green alone, add a second channel (icons, labels, patterns, position) for critical states, and test charts specifically — adjacent series in a pie or stacked bar are where merged colors do the most damage.
Frequently asked questions
Is my uploaded image sent to a server?
No. The image is drawn to a canvas in your browser, the simulation matrices are applied to its pixels locally, and the previews are generated as local data URLs. Nothing is uploaded anywhere. Large images are downscaled to at most 640px on the long edge for preview speed.
How accurate is the simulation?
It uses the Machado et al. (2009) matrices, a peer-reviewed standard also used by browser devtools and design plugins, applied in linear RGB. It models complete dichromacy at full severity — most people with color vision deficiency have milder anomalous trichromacy, so the real-world effect is usually somewhere between the original and what you see here. It approximates a typical observer, never a specific person.
Which condition should I prioritize testing?
Deuteranopia and protanopia — the red-green pair — cover the overwhelming majority of affected users. If your palette survives deuteranopia and the grayscale pass, tritanopia problems are rare enough that you have almost certainly caught the practical issues.
My two brand colors look identical in a column. What now?
Change their lightness apart rather than hunting for a "safe" hue pair — a noticeably lighter and darker version of the same two hues usually stays distinguishable in every column. For status colors (error/success), also add a non-color signal like an icon or label so color is never the only carrier.