Color blindness simulator

Simulate color-vision deficiencies to check accessibility.

Select an image or drag and drop one here

Use this to check the color accessibility of your design. It is an approximate simulation and may differ from actual perception.

A dashboard with a red line for down and a green line for up looks obvious - until it reaches someone who cannot tell those two apart. Drop a screenshot in here and switch between simulation types to see which parts of your design stop communicating. The result is an approximation, not a clinical reproduction, but it is usually enough to catch the problem.

How it works

What the four modes show

Mode	Cone type affected	Typical effect
Protanopia	Long-wavelength (red)	Reds darken and drift toward brown or grey
Deuteranopia	Medium-wavelength (green)	Red and green collapse into similar yellows
Tritanopia	Short-wavelength (blue)	Blues shift toward green, yellows toward pink
Achromatopsia	All colour information	Only brightness remains

How the simulation works

Every pixel's RGB values are multiplied by a fixed 3 x 3 matrix that approximates how the missing cone type reshapes the response. Achromatopsia uses the standard luminance weights - 0.299 red, 0.587 green, 0.114 blue - which is why it doubles as a greyscale check. These matrices are a simplification of the Brettel and Machado models: close enough to reveal problems, not a reproduction of what any particular person sees.

Reading the result

Look for information that disappears rather than for colours that changed. If two chart series become the same tone, or a red error badge stops standing out from a green success badge, the design is carrying meaning in hue alone. WCAG 2.2 success criterion 1.4.1 asks for a second cue - a label, an icon, a pattern, or a clear difference in lightness - so the meaning survives without colour.

Terms explained

Protanopia: Absence of the long-wavelength (red) cone. Reds look dark and are easily confused with greens and browns.
Deuteranopia: Absence of the medium-wavelength (green) cone. Red and green become difficult to separate; the green-weak family is the most common overall.
Tritanopia: Absence of the short-wavelength (blue) cone. Rare, and it pushes blues toward green and yellows toward pink.
Achromatopsia: Little or no colour perception at all, leaving only brightness. Very rare, and useful here as a luminance-only check.
Luminance: The perceived brightness of a colour independent of its hue. Two colours with the same luminance become indistinguishable in greyscale.

Frequently asked questions

How common is colour vision deficiency?

Red-green deficiencies affect roughly 8% of men and around 0.5% of women of northern European descent, with the green-weak type the most frequent. On a page with a few thousand visitors that is a meaningful number of people.

Is this an accurate medical simulation?

No. It applies a simplified transformation matrix and is intended as a design check, not a diagnosis. Real perception varies by individual and severity, and partial deficiency is far more common than the complete forms modelled here. For anything health-related, consult an eye-care professional.

What should I change if a design fails the check?

Add a cue that does not rely on hue - a text label, an icon, a dashed versus solid line, or a clear difference in lightness. Widening the lightness gap between confusable colours helps every reader, not only colour-blind ones.

Which colour pairs cause the most trouble?

Red with green is the classic case, but green with brown, blue with purple, and light green with yellow also collapse often. Traffic-light colour coding is the most frequent offender in dashboards and status tables.

Are my images uploaded?

No. The image is drawn to a canvas and transformed in your browser, and nothing is sent to a server. The download button saves the simulated version as a PNG.