Color blindness simulator
Preview any image the way people with the four main types of color vision deficiency see it — side by side with the original.
Processed on your device — nothing is sent anywhere.
How it works
- Drop an image into the box, or click “Use sample swatches” to start with a built-in color test chart.
- Pick a deficiency type — protanopia, deuteranopia, tritanopia or achromatopsia. The simulated view updates instantly next to the original.
- Click Download to save the simulated version as a full-resolution PNG.
Frequently asked questions
- How does the simulation work?
- Each pixel’s red, green and blue values are transformed with a standard 3×3 matrix that models how a missing cone type collapses the color space. This is the same matrix approach used in accessibility tooling and design software, and it runs directly on the image data in your browser.
- How accurate are these simulations?
- Matrix-based simulation is a well-established approximation of dichromatic vision, accurate enough to reveal every practical design problem — indistinguishable chart series, low-contrast states, red/green status colors. Real perception varies between individuals, and many people have partial (anomalous) deficiency that is milder than the full simulation shown here.
- Is my image uploaded anywhere?
- No. The image is decoded and transformed entirely in your browser using the canvas API — no server ever receives it. That makes the tool safe for unreleased product screens, client work and confidential designs.
- What is the difference between protanopia and deuteranopia?
- Both are forms of red-green color blindness, but protanopia means the red-sensing cones are missing while deuteranopia means the green-sensing cones are. The practical result is similar — reds, greens, oranges and browns become hard to tell apart — though in protanopia reds also appear noticeably darker. Deuteranopia and its milder form are the most common, affecting roughly 6% of men.
- Why should designers test images this way?
- About 1 in 12 men and 1 in 200 women have some form of color vision deficiency, so any product with real traffic has color-blind users. Simulating your charts, maps, status indicators and UI states shows immediately whether information survives without its color — and whether you need to add labels, patterns or stronger lightness contrast.
About this tool
Color vision deficiency affects roughly 8% of men and 0.5% of women — for any interface, chart or map with real users, that is a meaningful share of the audience. The most common forms, protanopia and deuteranopia, merge red and green into a narrow band of murky yellows and browns, which is exactly the axis most design systems lean on for success and error states. This simulator shows you an image the way those users see it, side by side with the original, so problems stop being theoretical.
The tool covers the four dichromatic conditions. Protanopia (missing red cones) and deuteranopia (missing green cones) both erase the red-green axis, with protanopia additionally darkening reds. Tritanopia (missing blue cones, much rarer) confuses blue with green and yellow with pink. Achromatopsia removes color entirely, leaving only lightness — a useful worst-case test, because an image that still communicates in grayscale is safe for everyone.
Everything runs locally in your browser. The image is drawn to a canvas and each pixel is re-mapped through a standard 3×3 simulation matrix for the selected condition — the same technique used by professional accessibility checkers. Nothing is uploaded, so screenshots of unreleased features and client work stay on your device. The preview is downscaled for instant switching between types, while the download renders the simulation at the image’s full resolution.
A practical workflow: drop in a screenshot of your dashboard or chart and cycle through protanopia and deuteranopia first, since they cover the vast majority of affected users. If two adjacent series or states become indistinguishable, fix it by varying lightness rather than hue, adding direct labels, or using patterns and icons alongside color. The built-in sample swatch chart is a quick way to see how each condition reshapes the palette before you test your own work.