Color Blindness Simulator

Knowledge Base

Why This Matters for Thumbnails and Graphics

Roughly 1 in 12 men and 1 in 200 women have some form of colour vision deficiency: for a channel with any meaningful reach, that's a real slice of your audience seeing a different version of every thumbnail and graphic you publish. A design that relies purely on a red/green distinction (a common failure) can become illegible or confusing for these viewers.

The Three Types Simulated Here

• Protanopia: Missing red-sensing cones, reds appear darker and can be confused with dark greens or browns.
• Deuteranopia: Missing green-sensing cones, the most common form. Reds and greens both shift toward similar yellowish-brown tones.
• Tritanopia: Missing blue-sensing cones, rare. Blues and yellows become the hardest to distinguish.

Designing Around It

Pair colour with a second signal (contrast, shape, or text label) rather than colour alone to convey meaning. Check your thumbnail's text/background contrast independently with the Contrast Checker (WCAG). Strong luminance contrast reads clearly across all colour vision types even when hue distinctions are lost.

FAQ

Q: Is this simulation clinically accurate?
A: It uses simplified, widely-used approximation matrices applied directly to standard RGB values, a solid practical check for design purposes, not a substitute for clinical colour vision testing.

Q: Which type should I prioritise checking for?
A: Deuteranopia is the most common form by a wide margin, so if you only check one, check that, but all three take seconds to review here.

Designing for colour vision differences

Around one in twelve men and one in two hundred women have some form of colour vision deficiency. Deuteranopia and protanopia, both affecting red and green discrimination, account for the large majority. Tritanopia, affecting blue and yellow, is rare. For an audience of any size, assuming everyone sees your colours as you do is assuming something untrue.

The practical rule is short: never let colour be the only thing carrying meaning. A red bar and a green bar of identical shape become the same bar. Adding a label, a pattern, a different shape or a position that distinguishes them costs nothing and removes the problem entirely. Charts, status indicators and before and after comparisons are where this goes wrong most often.

Red against green is the pairing to avoid, and it appears constantly in thumbnails, progress indicators and subtitles. Blue against orange survives almost every form of colour vision deficiency and reads strongly for everyone, which is part of why it became such a common film palette.

Brightness difference rescues most designs. Two colours differing clearly in lightness remain distinguishable under every simulation here, even when their hues collapse together. If a design still works when you view it in greyscale, it will work for colour vision deficiency too, and checking in greyscale is faster than checking three simulations.

Test the things carrying information rather than the whole picture. A photograph looking slightly different under simulation is fine, because nothing depends on its exact hues. A chart where two lines cross, a map keyed by colour, a red error message beside a green success message, or a thumbnail where the subject is separated from the background by hue alone are the places where a difference in perception becomes a difference in understanding.

Simulations approximate rather than reproduce. They model the most common forms and cannot show the milder partial versions, which are more widespread than the complete ones. Passing a simulation is good evidence and not a guarantee, so where a decision genuinely matters, showing the design to somebody with the condition beats any amount of modelling.

Vocabulary

Colour vision deficiency. A reduced ability to distinguish certain colours, caused by one type of cone cell in the eye responding differently or being absent. Affects roughly one in twelve men and one in two hundred women.

Deuteranopia. The most common form, where the cone responding to green light is absent. Red and green appear similar, both tending toward yellow and brown. Often described loosely as red-green colour blindness.

Protanopia. A form where the cone responding to red light is absent. Reds appear darker and shift toward grey, so a red warning against a dark background can become close to invisible.

Luminance contrast. The difference in brightness between two colours, independent of their hue. The most reliable way to keep elements distinguishable, because brightness differences survive every form of colour vision deficiency.