Accessibility Utility
Colorblind Simulator
Upload an image and see it beside four simulated views, so you can tell whether your colors still read for people with color vision deficiency. Each view applies the standard protanopia, deuteranopia, tritanopia, and achromatopsia transforms in your browser. The image never leaves your device.
Original
Green-blind
Red-blind
Blue-blind
No color
Simulations run in your browser and are an approximation of common color vision deficiencies, not a medical diagnosis. The image never leaves your device.
How to use it
1. Load an image
Use the built-in sample, upload your own, or drop a file onto the tool.
2. Compare the views
The original sits beside four simulated views, one per color vision type.
3. Spot the problems
Look for colors that merge, text that loses contrast, or status cues that vanish.
4. Save a view
Download any simulated image to share the issue with your team.
The four color vision types
| Type | Common name | What changes |
|---|---|---|
| Deuteranopia | Green-blind | Missing green cones. The most common form of color blindness. Red and green look alike. |
| Protanopia | Red-blind | Missing red cones. Red looks darker and is easily confused with green and black. |
| Tritanopia | Blue-blind | Missing blue cones. Rare. Blue and green blur together, and yellow can disappear. |
| Achromatopsia | No color | No working color cones at all. The scene is seen only as shades of gray. |
Common questions
How does the colorblind simulator work?
Each pixel of your image is multiplied by a standard 3-by-3 color-transform matrix, one matrix per condition. The math runs on your own device with the canvas API, so the result updates instantly and nothing is uploaded. The matrices are the widely used approximations for protanopia, deuteranopia, and tritanopia, plus a luminance matrix for full achromatopsia.
Which types of color blindness does it show?
Four. Deuteranopia (missing green cones) and protanopia (missing red cones) are the common red-green types. Tritanopia (missing blue cones) is rare and affects blue and yellow. Achromatopsia is total color blindness, where the scene is seen only in grays.
Is this a medical test?
No. It is a design and accessibility aid that approximates how a palette may appear to people with these conditions. Real color vision varies from person to person, and many people have partial rather than total deficiency. Use it to catch risky color choices, not to diagnose anyone.
Does my image get uploaded anywhere?
No. The image is read in your browser with the FileReader and canvas APIs, and every pixel is transformed on your own device. Nothing about the picture is sent to a server, so the tool keeps working offline once the page has loaded.
Why should I check my designs against this?
About 1 in 12 men and 1 in 200 women have some color vision deficiency. A chart, map, or button that relies on red versus green alone can be unreadable for them. Checking early lets you add labels, patterns, or stronger contrast before you ship.