Color Blindness Simulator

What this tool does

Color Blindness Simulator approximates how a single CSS colour or an uploaded image would appear to someone with the three main forms of colour vision deficiency, plus full colour blindness. It helps designers and developers sanity-check that charts, status colours and UI states stay distinguishable without relying on hue alone.

Around one in twelve men and a much smaller share of women have some form of colour vision deficiency, most often trouble telling red and green apart. A design that relies only on colour, such as a red versus green status dot or a chart with no labels, can be unreadable to that audience even though it looks perfectly clear to everyone else.

This simulator applies the widely used approximation matrices popularised by tools such as Coblis, which transform the red, green and blue channels of a colour or image to mimic what each condition removes or confuses. It is not a full physiological model built from cone sensitivities, but it is the same style of approximation used across most consumer colour-blindness checkers, and it is accurate enough to catch colour-only distinctions before they ship.

How to use Color Blindness Simulator

1. Choose whether to simulate A single colour or An image.
2. For a colour, type or pick it; the original sits next to its four simulated versions.
3. For an image, drop a file; it renders once and produces four simulated canvases below it.
4. Compare the simulated swatches or images with the original to spot pairs that become too similar.
5. Read the short description under each condition to understand what is being simulated.
6. Download any simulated image as a PNG to share with a team or attach to a design review.

Tips for better results

• Deuteranopia is the most common form, so if a design only survives one check, make it that one.
• Pair colour with a second signal, such as an icon, pattern, label or position, so meaning survives even when hue does not.
• Test status colours like success, warning and error together, not just two at a time; three similar hues are harder to separate than two.
• Achromatopsia removes all colour, which is a useful stress test for whether contrast and shape alone still carry the design.

Common use cases

• Checking that a chart’s series colours remain distinguishable for colour-blind viewers.
• Reviewing status indicators, badges and alerts before a design or accessibility sign-off.
• Previewing how a logo or brand palette holds up under different colour vision conditions.
• Teaching or demonstrating colour vision deficiency in a workshop or classroom setting.

Common mistakes to avoid

• Treating the simulation as medically exact; real colour vision deficiency varies in severity between individuals, even within the same named condition.
• Checking only protanopia or deuteranopia and skipping tritanopia, which affects a smaller but still real group of people.
• Fixing colours in isolation without checking the whole interface together, since adjacent colours interact.