Color blindness simulator
Preview an image as seen with common types of color vision deficiency.
Runs in this tab. The file stays here.
Choose an image in the controls to preview it.
<!-- deuteranopia: approximate, applied in sRGB (the tool itself works in linear RGB) --> <filter id="deuteranopia"> <feColorMatrix type="matrix" values="0.367 0.861 -0.228 0 0 0.280 0.673 0.047 0 0 -0.012 0.043 0.969 0 0 0 0 0 1 0"/> </filter>
This runs in your browser. Nothing is uploaded.
About Color blindness simulator
Preview an image as someone with protanopia, deuteranopia, tritanopia, or no colour vision might see it. The image never leaves your browser.
Roughly one in twelve men and one in two hundred women have some form of colour vision deficiency, and the usual failure is a design that depends on red against green: chart lines, status badges, form errors. Choose an image, pick a type from the list, and the page shows the original beside the simulated version. Download simulated PNG saves what you see.
Four types are offered. Protanopia, deuteranopia, and tritanopia model the complete absence of the red, green, or blue cones, and achromatopsia is full greyscale. They use the published Machado matrices at full severity, applied in linear light. That means this is the strongest version of each condition. Plenty of people have a milder form ("red-weak" or "green-weak") that these previews overstate, and real perception varies from person to person, so this is a check on your design and not a diagnosis.
Very large images are shrunk to about eight megapixels first, so the preview and the download are not full-size for a big photo. The code panel beneath shows an SVG feColorMatrix filter for the chosen type, for testing the same thing in a browser, though it works in sRGB and is only an approximation of what the tool does. The actual fix for a colour-only signal is a second cue (a label, an icon, a pattern), and a contrast check for the text.
How to use Color blindness simulator
- 1Choose an image.
- 2Pick the type of colour vision deficiency.
- 3Compare the original with the simulated version.
- 4Download the simulated PNG if you need to share it.
What it won't do
- Four full-severity types; no partial (anomalous) conditions.
- Images over about eight megapixels are downscaled.
- A simulation, not a diagnosis; use contrast and non-colour cues alongside it.
Common questions
How accurate is the simulation?
It's a standard published matrix applied at full severity, which makes it a reasonable worst case for each type. It can't match how any one person sees, and milder conditions look closer to the original.
Why is there no "red-weak" or "green-weak" option?
Those are partial conditions, and the tool only models the complete forms (protanopia and deuteranopia). A design that holds up under the full version will survive the milder one too.
Does it check contrast?
No. It only shows colour shifts. Text and background pairs should go through the contrast checker as well.
Does the simulated copy leave the browser?
No. The pixels are transformed in a canvas in this tab and the download is made from that canvas.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation