Colorblind Simulator
Upload an image and see how it looks to people with different types of color vision deficiency. About 1 in 12 men and 1 in 200 women are affected — is your design still readable?
Drop an image here
or click to browse · paste from clipboard (Ctrl+V)
Simulations use the Machado et al. (2009) model. Processing is local — the image never leaves your browser.
The same frame, two ways of seeing
The candy-colored houses of a Greek harbor town, simulated with the same Machado matrices this tool uses. For roughly 1 in 12 men, the right side is what this scene looks like.
Original · normal vision
Deuteranopia · no green cones
What is a colorblind simulator?
A colorblind simulator transforms an image to approximate how it appears to someone with color vision deficiency (CVD). Roughly 1 in 12 men and 1 in 200 women have some form of it — most commonly reduced sensitivity to red or green. If your chart, map, game, or interface uses color as the only signal, a meaningful share of your audience may not see the difference. This tool shows you exactly what they see, side by side with the original.
Four deficiency types
Protanopia, deuteranopia, tritanopia, and full achromatopsia — the complete dichromatic set plus total color blindness.
Research-grade model
Uses the Machado et al. (2009) transformation matrices applied in linear RGB — a standard model in vision research.
Two viewing modes
Compare all five versions in a grid, or switch to full-width view to inspect each simulation at maximum size.
Local & downloadable
Processing happens in your browser — nothing is uploaded. Download any simulation as a PNG for reports or reviews.
Test your design in three steps
-
Upload an image
A screenshot of your UI, a data chart, a map, a poster — anything where color carries meaning.
-
Compare the versions
Scan the grid for places where two different colors collapse into one. Switch to full width for a closer look.
-
Fix and re-test
Where colors merge, add a second cue — labels, patterns, icons, or a bigger lightness difference — and run it again.
Designing so the simulation stops scaring you
You can't fix color vision — you can stop depending on it. The patterns that survive every simulation:
- Never encode meaning in hue alone. Red/green status dots become identical under deuteranopia. Pair every color signal with a second channel: an icon, a label, a shape, a pattern.
- Separate by lightness, not just hue. A dark red and a light green survive simulation even when the hues collapse, because the lightness difference remains. Run your pair through the Contrast Checker — if it passes as text, it will stay distinguishable here too.
- Charts are the danger zone. Multi-line charts with rainbow legends are unreadable for roughly 1 in 12 men. Use direct labels on the lines, varied dash patterns, or a color scale that varies in lightness (like a single-hue ramp from the Shades generator).
- Test deutan first. Deuteranopia and protanopia cover the vast majority of color vision deficiency — if your design reads in those two views, tritanopia rarely breaks it.
Related tools & guides
- Contrast Checker — Pair the simulation with hard numbers — test your text colors against WCAG.
- Photo Palette Extractor — Extract a palette, then come back and see how it survives each simulation.
- Color blindness types explained — Protanopia to achromatopsia — what each type changes and how common they are.
Frequently asked questions
How accurate is the simulation?
It uses the Machado et al. (2009) physiologically-based model at full severity, applied in linear RGB — a widely used standard in accessibility tooling and vision research. Individual perception varies, so treat it as a strong approximation, not a medical instrument.
What's the difference between protanopia and deuteranopia?
Both make red and green hard to distinguish, but for different reasons: protanopia is the absence of red-sensitive cones (reds also look darker), while deuteranopia is the absence of green-sensitive cones. Deuteranomaly — a milder green shift — is the single most common form of CVD.
Is my image uploaded anywhere?
No. The transformation runs pixel-by-pixel in your browser using the Canvas API. The image never leaves your device, and closing the tab removes it from memory.
My design fails the test. What should I do?
Never rely on hue alone. Add a second channel: text labels, icons, patterns or dashes in charts, and larger lightness differences between adjacent colors. Then verify the lightness difference numerically with the Contrast Checker — a pair that passes 3:1 usually survives every CVD type.
Which type should I prioritize testing?
Red-green deficiencies (protanopia and deuteranopia) cover the overwhelming majority of affected users, so fix those first. Tritanopia and achromatopsia are much rarer — but if your design survives achromatopsia (pure grayscale), it survives everything.