Color Blindness Simulator

What this tool does

This tool shows how a set of colours appears to people with different forms of colour vision deficiency. You build a small editable palette, and for every colour the tool renders five swatches side by side: normal vision, Protanopia, Deuteranopia, Tritanopia and Achromatopsia. Each simulated colour is produced by applying a standard transformation matrix to the colour’s red, green and blue channels, then clamping the result back into range. The output is a comparison grid — your colours down the rows, vision types across the columns — so you can see at a glance which colours stay distinct and which collapse into one another.

Use cases

Colour-vision simulation is most valuable wherever colour carries meaning. In web design, status indicators, chart series, tags and form validation often rely on colour, and a red-green pairing that looks obvious to you can be indistinguishable to a colour-blind user. Data-visualisation work benefits enormously: a line chart with six similar hues may turn into a tangle for a viewer with deuteranopia. Brand and identity designers can check that a logo’s colourways still read as intended. Accessibility auditors use it to flag colour-only information that needs a secondary cue. Even illustrators and game artists use it to make sure important elements — a highlighted item, an enemy, a clickable object — remain readable for everyone.

How to use it

1. Start from the default palette, a varied starter set of six colours.
2. Edit any colour with its native picker or by typing a hex value.
3. Click Add colour to grow the palette, or Remove to drop a swatch.
4. Read the comparison grid: each row is one of your colours, each column a vision type. Every cell shows the simulated colour and its hex code.
5. Look for rows where several columns become similar — that signals colours your design should not rely on hue alone to separate.
6. Adjust the palette and watch the grid update instantly. Use Reset to return to the starter set.

Tips

The fastest way to read the grid is to scan a single column and ask whether the colours within it are still easy to tell apart. If two swatches that were clearly different under normal vision look almost identical under Deuteranopia, that pair is a risk. Increasing the lightness gap between them usually helps more than changing hue, because brightness differences survive every type of deficiency — including achromatopsia, which keeps only brightness. Reserve pure red-and-green pairings for cases where a label, icon or position also conveys the meaning. When choosing chart colours, prefer a palette that varies in both hue and lightness so the series stay separable in every column of the grid.

Related techniques

Colour-blindness simulation pairs naturally with a contrast checker: contrast deals with text legibility against its background, while this tool deals with telling colours apart from each other — two different and equally important accessibility concerns. A colour converter helps you express an adjusted colour in the format your code needs, and a palette generator can suggest harmonious sets that you can then run through this simulator to verify. Build all of these checks into your workflow early. Catching a confusing colour pair while you are still choosing the palette is far cheaper than discovering it in a late-stage audit — though a simulator like this is a starting point, not a replacement for testing with real users.