Color Blindness Simulator

Enter any color and see how it appears with protanopia, deuteranopia, tritanopia, and achromatopsia.

Quick palette test:

Enter a hex color above to simulate color blindness.

How to Use the Color Blindness Simulator

  1. Pick a color using the color picker, type a hex code (e.g., #ff0000), or enter an rgb() value.
  2. View simulations — the tool instantly shows how your color appears under all four major types of color vision deficiency.
  3. Use the quick palette to quickly test common UI colors like primary buttons, error states, and success indicators.
  4. Check the contrast table to see if simulated colors still meet WCAG AA contrast requirements against white.

Understanding Color Vision Deficiency

Color blindness (more accurately called color vision deficiency or CVD) affects how the cone cells in the eye respond to different wavelengths of light. Human eyes have three types of cone cells — L (long/red), M (medium/green), and S (short/blue). When one type is absent or malfunctioning, colors in certain ranges appear similar or indistinguishable.

The Four Simulated Types

  • Protanopia — Missing L-cones. Reds appear very dark and are confused with greens and browns. Affects approximately 1% of males.
  • Deuteranopia — Missing M-cones. Reds and greens appear similar. The most common form, affecting approximately 5% of males.
  • Tritanopia — Missing S-cones. Blues and greens appear similar; yellows and pinks become confused. Rare, affects less than 0.01% of people.
  • Achromatopsia — Complete color blindness. Only brightness differences are perceived. Extremely rare (1 in 30,000), but monochromatic simulation is also useful for testing grayscale accessibility.

The Science: Vienot and Brettel Matrices

This simulator uses mathematically derived color transformation matrices. The Vienot (1999) model converts sRGB values to LMS color space (which maps to cone responses), eliminates the missing cone channel, and converts back to RGB. This produces accurate simulations for protanopia and deuteranopia. The tritanopia simulation uses an approximation of the Brettel (1997) dichromatic model. Achromatopsia is simulated using standard luminance weighting (ITU-R BT.601).

Why This Matters for Web Accessibility

Approximately 8% of males and 0.5% of females have some form of color vision deficiency — that is roughly 300 million people worldwide. WCAG 2.1 Success Criterion 1.4.1 (Use of Color) requires that color is not the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Common violations include red-only error states on form fields, green-only success indicators, and charts that rely entirely on color coding without patterns or labels. Use this simulator to audit your palette before deploying your design.

Design Recommendations

To make your designs accessible to users with color vision deficiency, consider these guidelines: avoid placing red and green as the only contrast pair for important information; add icons, patterns, or text labels to supplement color coding; use blue-orange pairs instead of red-green for maximum distinguishability across all CVD types; test charts and data visualizations using this tool; and always verify contrast ratios using WCAG guidelines. Our Color Contrast Checker can verify that your color combinations meet WCAG AA and AAA thresholds.

Frequently Asked Questions

Deuteranopia (green-blind) is the most common, affecting about 5% of males. Protanopia (red-blind) affects about 1% of males. Tritanopia (blue-blind) is rare. Achromatopsia (total color blindness) affects 1 in 30,000 people.
This tool uses the Vienot (1999) linear RGB transformation matrices for protanopia and deuteranopia, and approximations based on the Brettel (1997) model for tritanopia. Achromatopsia uses standard luminance weights (ITU-R BT.601).
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. WCAG 2.1 criterion 1.4.1 requires that color is not the only visual means of conveying information.
Both involve red-green confusion. Protanopia (missing L-cones) makes reds appear very dark. Deuteranopia (missing M-cones) is more common — reds and greens appear similar but reds retain more brightness than in protanopia.
Use patterns or icons alongside color, ensure sufficient contrast, avoid pure red-green combinations for critical info, and follow WCAG 1.4.1 and 1.4.3. Test all UI colors with this simulator before shipping.