Colour Blindness Simulator

1. 1Add a screenshot of the design, chart or interface.
2. 2Switch between the four types.
3. 3Look for anything that becomes indistinguishable — a red and green line, a status badge, a link.
4. 4Download the simulation if you need it for a report or a ticket.

Each simulation applies a matrix that redistributes the red, green and blue channels to approximate what reaches the brain when one type of cone is missing. Deuteranopia and protanopia both affect the red-green axis and together account for the large majority of cases, at roughly 1% of men each. Tritanopia affects blue and yellow and is rare. Achromatopsia, no colour vision at all, is rarer still.

The purpose is a decision, not a picture. If a chart's two lines merge, or a green tick and a red cross become the same grey, the design is carrying meaning in colour alone — which is exactly what accessibility guidance warns against.

The fix is almost never a different palette. Add a text label, a different shape, a pattern or a position so the information survives without colour. That helps in greyscale printing and bright sunlight too.

Images are decoded by the browser, redrawn on a canvas and re-encoded on your own machine. Nothing is uploaded, so there is no waiting on a queue and no copy of your photos anywhere else.

• Test charts, maps, status badges and anything else where colour carries meaning.
• Start with deuteranopia, the most common type.
• Never rely on colour alone: add labels, icons, patterns or position.
• Check links in body text. If they are distinguished only by colour, add an underline.

• How to check a design works for colour-blind people
• How to pick colours from an image and build a palette
• How to turn a photo black and white — the three methods compared