Color Blindness Simulator

What this tool does

A colour scheme that looks clear to you may not look clear to everyone. A noticeable share of people see colours differently, and two colours you find easy to tell apart can look almost the same to them. If you design anything, you often cannot tell whether your colours work for those viewers, because you are not seeing what they see.

That is what this does. You upload an image and choose a type of colour vision deficiency, and it shows you how that image would appear to someone with it. It lets you step into another viewer's shoes, so you can spot where your colours might fail and fix them before they cause anyone trouble.

How to use it

1. Upload an image. Upload the image that you want to check.
2. Choose a type. Pick a type of colour vision deficiency to simulate its effect.
3. Compare the result. See how the colour or image would look with that deficiency, alongside the original.

Give it your colours or design, switch between the types, and compare each simulated view with the original to see what changes and what becomes hard to tell apart.

How it works

The simulator transforms the colours of what you give it to approximate how they would be perceived with a particular deficiency. For each type, it adjusts every colour to reflect the reduced or altered response of one kind of colour-sensing cell in the eye, then shows you the result. Colours that rely on the affected channel shift or converge, while others change little.

The outcome is an approximation, not a perfect window into another person's sight, since real perception varies and no simulation is exact. But it is close enough to be genuinely useful: it reliably reveals where two colours that look distinct to typical vision collapse into near-sameness under a given deficiency. That is the practical thing you need to know, and it is what the simulation makes visible.

What colour vision deficiency is

Colour vision deficiency, often called colour blindness, is seeing a narrower range of colour differences than most people, so that certain colours become hard to distinguish. It is seldom a total loss of colour; usually it is that particular pairs, most often reds and greens, look far more alike than they do to typical vision.

It comes down to the colour-sensing cells in the eye. Typical vision uses three types, each responsive to a different part of the spectrum, and their overlapping signals let us separate many colours. When one type is missing or responds weakly, the differences it would have carried are lost, and colours that depend on it blur together. This is usually inherited, and because it affects a real portion of any audience, it is something worth designing around rather than treating as rare.

The types it can simulate

Colour vision deficiency comes in a few main forms, each tied to one of the three colour-sensing cell types, and the simulator can show their effects separately. The red-green kinds are by far the most common: one form weakens or removes sensitivity toward the red end, the other toward the green, and both make reds, greens, browns, and oranges harder to separate.

There is also a much rarer blue-yellow form, tied to the third cell type, which makes blues and yellows and their neighbours harder to tell apart. Simulating each type matters because they affect different colour pairs, so a design that holds up under one may still fail under another. Checking across the types, rather than just one, gives you a fuller sense of who might struggle with your colours and where.

Why simulate colour blindness

The main reason is to make your work usable by more people. If a chart tells red apart from green to signal good and bad, or a form marks errors only by turning fields red, a viewer with a red-green deficiency may miss the message entirely. Simulating their view lets you catch these problems while you can still change them.

It is a core part of designing accessibly. Anyone building interfaces, charts, maps, signage, or presentations has an audience that includes people who see colour differently, and checking a design against the common deficiencies is how you make sure it works for them too. Rather than guessing, you can see the weak points directly and address them, which is far more reliable than hoping your colours happen to be safe.

Designing so colour is not the only signal

The single most useful lesson the simulator teaches is that colour should rarely be the only thing carrying meaning. If the sole difference between two states, two lines on a graph, or two categories is their colour, then anyone who cannot tell those colours apart is left with nothing. The fix is to add a second signal alongside the colour.

That second signal can be simple: a label, an icon, a pattern, a shape, or a difference in position or brightness that does not depend on hue. A graph might use different line styles as well as colours, a status might show an icon as well as a tint, an error might carry text as well as red. Used this way, colour still helps everyone who can see it, while the extra signal ensures the meaning survives for those who cannot. The simulator shows you where you are relying on colour alone, and that is your cue to add the backup.

Questions people ask

How does the simulator work?

You upload an image and pick a type of colour vision deficiency, and it adjusts the colours to approximate how they would appear with that deficiency, shown against the original.

Is the simulation exact?

It is a close approximation, not a perfect view into another person's sight. It reliably shows where distinct colours collapse into near-sameness, which is the practical thing to know.

Why check more than one type?

Because each type affects different colour pairs. A design that works under one deficiency may still fail under another, so checking across the types gives a fuller picture.

What is the main thing to fix?

Anywhere colour alone carries meaning. Add a second signal, a label, icon, pattern, or shape, so the message survives for viewers who cannot tell the colours apart.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4 and accessibility guidance. https://www.w3.org/TR/css-color-4/
2. Color blindness, colour vision deficiency and its types. Wikipedia. https://en.wikipedia.org/wiki/Color_blindness
3. Color vision, how the eye senses colour. Wikipedia. https://en.wikipedia.org/wiki/Color_vision