Colour Blindness Simulator
Original and simulation side by side — protanopia, deuteranopia, tritanopia and achromatopsia, with adjustable strength.
How to Use
- Bring in an image
Paste a URL or pick a local file; the result can be downloaded as a PNG.
- Choose a type
Protanopia and deuteranopia are the common ones, tritanopia is rare; dropping the strength to 50% shows which colours start to blur together first.
- Audit item by item
Feed in a screenshot of your interface and walk each mode: chart lines, status badges, links versus body text, form errors — fix whatever you cannot tell apart.
FAQ
How common is red-green deficiency?
About 8% of men worldwide have a red-green deficiency and around 0.5% of women, because the relevant genes sit on the X chromosome and men have only one. That is one in twelve men, which is a ratio product design has to account for.
Is the simulation the same as real colour blindness?
Not exactly. Dichromacy is the common type and the simulation is reasonably close; monochromacy, where only brightness differs and there is no colour at all, cannot be reproduced by mixing channels. The value of the simulation is in exposing which colours become hard to tell apart, not in reproducing one person's exact view.
Are the images uploaded anywhere?
No. Reading the image, transforming the pixels and compositing all happen in the browser's canvas, and the page never sends a request carrying image content. You can disconnect and keep using it with identical results.
How do I use this for design review?
Bring in a screenshot of the interface and walk through each mode: can body text still be told from links, can you still count the lines on a chart, is a disabled button still readable, does an error message stand apart from ordinary text? If any answer is no, the design is not friendly to users with colour vision deficiency.