Color Blindness Simulator
See how a color combo appears to users with different types of color blindness. Test accessibility for protanopia, deuteranopia, and tritanopia.
Color Selection
Color Blindness Type
Simulation Result
Original Colors
As seen with Protanopia
Accessibility Tips
About Color Blindness Simulator
A Color Blindness Simulator is an accessibility testing tool that shows how colors and color combinations appear to people with different types of color vision deficiencies. It simulates protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and other forms of color blindness to help ensure your designs are accessible to all users.
Why use a Color Blindness Simulator?
Using a Color Blindness Simulator is essential for creating inclusive designs that work for all users, including the 8% of men and 0.5% of women who have some form of color blindness. This tool helps you identify potential accessibility issues early in the design process, ensuring your color choices don't exclude users or make content difficult to perceive.
Who is it for?
This tool is crucial for UX/UI designers ensuring accessibility compliance, web developers testing color contrast and readability, product managers prioritizing inclusive design, accessibility specialists conducting audits, and anyone responsible for creating digital content that needs to be accessible to users with color vision deficiencies.
How to use the tool
Input your color combination or upload an image to test
Select the type of color blindness to simulate (protanopia, deuteranopia, tritanopia, etc.)
View the simulated result to see how your colors appear to users with that condition
Compare the original and simulated versions side by side
Adjust your color choices if needed to improve accessibility and readability
Frequently Asked Questions
How do I check how my design looks to colour-blind users?
Upload an image or paste a colour value, and the tool simulates how it appears under different types of colour blindness — protanopia (red-blind, ~1% of men), deuteranopia (green-blind, ~6% of men), tritanopia (blue-blind, <1%), and monochromacy (full colour blindness, very rare). Each simulation transforms the image's colours mathematically to approximate the visual experience. Run side-by-side comparisons to identify problems before they affect real users.
What are the main types of colour blindness?
Three main types affecting roughly 8% of men and 0.5% of women. Red-green colour blindness (most common): protanopia (red cones missing — reds look dark/grey) and deuteranopia (green cones missing — reds and greens look similar). Blue-yellow colour blindness (rare): tritanopia. Total colour blindness (monochromacy): extremely rare. Practical impact: red-green is the most important to design for — affects ~6-8% of men. The simulator covers all main types.
Is the simulation accurate?
It's a reasonable approximation. The transformations use well-established colour models (Brettel-Viénot-Mollon, Machado et al.) that mathematically map normal vision to colour-blind perception. The result is close enough to identify accessibility problems (red/green ambiguity, low contrast, colour-only differentiation), but not a perfect substitute for testing with actual colour-blind users. For high-stakes designs (medical alerts, traffic systems), conduct user testing with colour-blind participants alongside the simulator.
What design changes help colour-blind users?
Five practical rules. (1) Never rely on colour alone for meaning — pair with shape, icons, text labels (e.g. red error icon + 'Error' word, not just red). (2) Use sufficient lightness contrast — even people with normal colour vision benefit. (3) Avoid red-green colour pairs for critical information; prefer blue-orange or other high-contrast pairs. (4) Use patterns or textures alongside colours in charts and graphs. (5) Test designs with the simulator before shipping. WCAG 2.2 Criterion 1.4.1 (Use of Color) makes these mandatory for accessibility compliance.
Is this related to general accessibility (WCAG)?
Yes — colour blindness is part of broader accessibility considerations. WCAG 2.2 Criterion 1.4.1 (Use of Color) requires that colour isn't the only means of conveying information. Criterion 1.4.3 (Contrast Minimum) requires 4.5:1 contrast for normal text. Colour-blind users benefit from both — they're a high-need population for the same patterns that benefit all users. For full accessibility audits, combine this simulator with a contrast checker, keyboard-only navigation testing, and screen reader testing.
Can I check specific colours rather than full images?
Yes — enter individual HEX/RGB/HSL values to see how each looks under different colour blindness conditions. Useful for testing brand palette choices, button states (default vs hover vs active), and chart colour schemes. The tool shows side-by-side comparisons for each colour blindness type. For testing real interfaces, screenshot the UI and run the image through the simulator — it catches problems that individual colour testing might miss.
Are some colour combinations universally good?
Blue-yellow combinations are generally safer than red-green for colour-blind users. Blue (around 240° hue) and yellow (around 60° hue) remain distinguishable for most types of colour blindness. Combining hue contrast WITH lightness contrast (dark blue + light yellow) ensures both colour-blind and normal-vision users see differentiation. For data visualisation, palettes like ColorBrewer's qualitative schemes are designed for colour-blind accessibility.
Where does the 8% of men statistic come from?
The 8% figure (and ~0.5% for women) comes from large-scale population studies of red-green colour blindness, the most common type. The exact percentage varies by population: ~8% in northern European populations, ~5% in East Asian populations, ~3-4% in African populations. The X-linked recessive inheritance makes it far more common in men (men have one X chromosome; one mutation expresses; women need two). Regardless of specific percentages, accessibility benefits everyone — design for the broadest possible audience.
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.