Color Blindness Simulator

How common it is

Around one in twelve men and one in two hundred women have some form of colour vision deficiency, which is roughly 300 million people worldwide. For an interface with any meaningful audience, this is not an edge case; it is a substantial and entirely predictable slice of your users.

The types

Red-green deficiency is by far the most common, and splits into deuteranomaly and deuteranopia, affecting green perception, and protanomaly and protanopia, affecting red. Tritanopia, affecting blue and yellow, is rare. Achromatopsia, seeing no colour at all, is rarer still. Testing against deuteranopia catches the majority of real problems, and greyscale catches almost everything else.

Never let colour be the only signal

This is the entire rule, and everything else follows from it. A red field marking an error and a green one marking success are indistinguishable to a large share of users. Add an icon, a label, a pattern or a shape. A chart distinguished only by line colour needs different dash patterns or direct labels. Required form fields marked only in red need an asterisk or the word required.

Red and green together is the worst pairing

It is also the most common in status indicators, precisely the place where being misread matters most. Blue and orange carry a similar semantic weight, remain distinguishable to nearly everyone, and are the standard substitution. Where red and green must stay for convention, differentiate them by lightness as well as hue.

The greyscale test is faster than any simulator

Convert a screenshot to greyscale. Anything that becomes indistinguishable was relying on hue alone. It takes seconds, needs no plugin, and catches the large majority of problems a full simulation would find, which is why it is worth doing on every design before it ships.

Contrast is a separate requirement

A palette can be perfectly distinguishable to colour-blind users and still fail WCAG contrast, or the reverse. They are independent checks addressing different needs, and passing one says nothing about the other.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.