Color Blindness Simulator
See how a foreground/background colour pair appears to users with different types of colour blindness. Test protanopia, deuteranopia, tritanopia and achromatopsia on your swatches.
Color Selection
Color Blindness Type
Simulation Result
Original Colors
As seen with Protanopia
Simulated with Viénot 1999 in linear-light sRGB. Protanopia and deuteranopia use the Viénot, Brettel & Mollon (1999) single-plane projection; tritanopia uses the Brettel, Viénot & Mollon (1997) two-plane projection; achromatopsia collapses the colour to Rec. 709 relative luminance.
Accessibility Tips
About Color Blindness Simulator
A Color Blindness Simulator is an accessibility testing tool that shows how a colour pair appears to people with colour vision deficiencies. You enter a foreground and a background HEX value and the tool renders both the original swatch and the simulated one side by side for protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), the three matching anomalous types, and achromatopsia. The dichromat transforms use the Viénot, Brettel & Mollon (1999) projection for protan and deutan and the Brettel, Viénot & Mollon (1997) two-plane projection for tritan, both applied in linear-light sRGB.
Why use a Color Blindness Simulator?
Using a Color Blindness Simulator is essential for creating inclusive designs. Red-green colour vision deficiency affects roughly 8% of males and 0.5% of females of Northern European ancestry, and deuteranomaly alone accounts for about 5% of males. This tool helps you catch colour pairs that collapse into the same hue for those users — before the design ships — so that state, status and category are never signalled by colour alone.
Who is it for?
This tool is crucial for UX/UI designers ensuring accessibility compliance, web developers testing colour contrast and readability, data-visualisation authors picking series colours, product managers prioritising inclusive design, accessibility specialists conducting audits, and anyone responsible for creating digital content that needs to be accessible to users with colour vision deficiencies.
How to use the tool
Enter your foreground (text) colour as a HEX value, or pick it with the colour swatch
Enter the background colour the same way
Or start from a Quick Preset — the default red-on-green pair is a deliberately risky combination
Choose a vision type: protanopia, deuteranopia, tritanopia, protanomaly, deuteranomaly, tritanomaly, achromatopsia or normal vision
Compare the Original Colors panel with the simulated panel rendered beside it
Check whether the foreground text is still readable and still distinguishable from the background
Adjust the HEX values — usually by separating the two colours in lightness, not just in hue — and re-check
Copy the simulated HEX values with the Copy Colors button to paste into your design file or issue tracker
Frequently Asked Questions
How do I check how my colours look to colour-blind users?
Enter a foreground and a background HEX value, then pick a vision type. The tool renders your original pair and the simulated pair side by side on the same sample text, so you can see at a glance whether the two colours still separate. Work through protanopia, deuteranopia and tritanopia in turn — a pair can survive one and fail another. This simulator works on colour swatches, not uploaded images: to check a finished screen, sample its key colours with your browser's eyedropper (DevTools' colour picker) and test those pairs here.
What are the main types of colour blindness?
Red-green deficiency is by far the most common, affecting about 8% of males and 0.5% of females of Northern European ancestry. It splits into deuteranomaly (green-weak, ~5% of males — the single most common form), protanomaly (red-weak, ~1% of males), deuteranopia (no M-cones, ~1% of males) and protanopia (no L-cones, ~1% of males). Blue-yellow (tritan) defects are far rarer, about 0.01% — one in 10,000 — and unlike red-green they affect both sexes equally because the gene is not X-linked. Complete achromatopsia, where no colour is perceived at all, occurs in roughly 1 in 30,000 people.
How accurate is the simulation?
The dichromat simulations are the standard published models: Viénot, Brettel & Mollon (1999) for protanopia and deuteranopia, and the Brettel, Viénot & Mollon (1997) two-half-plane projection for tritanopia, both applied to linear-light sRGB rather than gamma-encoded values (applying them to gamma-encoded RGB is a common bug that produces visibly wrong results). Achromatopsia collapses the colour to Rec. 709 relative luminance. The three anomalous types are an approximation: there is no exact projection for them, so the tool interpolates 60% of the way from your colour toward the matching dichromat in linear RGB. Everything runs in your browser — no colour value is ever sent to a server.
What design changes help colour-blind users?
Five practical rules. (1) Never rely on colour alone for meaning — pair it with shape, icon or text (a red error icon plus the word "Error", not just red). (2) Separate your colours in lightness, not only in hue; lightness survives every form of colour blindness. (3) Avoid red-green pairs for critical distinctions; blue-orange pairs stay separable for protan and deutan viewers. (4) Use patterns, dashes or direct labels in charts instead of a colour legend. (5) Test before shipping. WCAG 2.2 Success Criterion 1.4.1 (Use of Color) makes rule 1 a conformance requirement, not a nicety.
Is this related to general accessibility (WCAG)?
Yes. WCAG 2.2 Success Criterion 1.4.1 (Use of Color) requires that colour is never the only means of conveying information, indicating an action or distinguishing a visual element. SC 1.4.3 (Contrast Minimum) requires a 4.5:1 contrast ratio for normal text and 3:1 for large text; SC 1.4.11 (Non-text Contrast) requires 3:1 for UI components and graphical objects. Contrast ratio is computed from relative luminance, which colour blindness does not change — so a pair that passes contrast can still fail this simulator, and vice versa. Run both checks.
Can I test a screenshot or an uploaded image?
No — this tool simulates colour swatches, not images. You supply a foreground and a background HEX value and it shows the simulated pair on sample text. That is the right granularity for the decisions you actually make: brand colours, button states (default, hover, active, disabled), status badges, and chart series colours. To evaluate a whole interface, pull its key colours out with a browser eyedropper and test them pairwise here, then use the colorblind-safe-palette-generator tool when you need a whole set of colours that stay mutually distinguishable.
Are some colour combinations universally good?
Blue-orange and blue-yellow pairs are far safer than red-green, because protan and deutan deficiencies leave the blue-yellow axis intact. Combining hue contrast with lightness contrast — dark blue against light yellow, for instance — protects you further, since lightness differences survive every type including achromatopsia. For categorical data, use a palette designed for this: the Okabe-Ito eight-colour set, Paul Tol's qualitative schemes, or ColorBrewer's colour-blind-safe sets. The colorblind-safe-palette-generator tool can build and verify such a palette against all three dichromat models at once.
Where does the 8% of men statistic come from?
It comes from large population studies of red-green colour vision deficiency, and it is population-specific: roughly 8% of males of Northern European ancestry, about 5% in East Asian populations and 3-4% in populations of African ancestry. The female figure is about 0.5% everywhere. The gap between the sexes is inheritance, not biology of the eye: the L- and M-cone opsin genes sit on the X chromosome, so a single affected X expresses the trait in males, while females need both copies affected. Tritan defects (~0.01%) are autosomal and therefore affect both sexes equally.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.