Tool

Color Blindness Simulator

Simulate how colors, user interfaces, and images appear to users with different forms of color vision deficiency.

Base Color

Select a color to see how it appears across different vision types.

#AA6238
Normal Vision
#aa6238
Protanopia
#909045
Protanomaly
#a0803f
Deuteranopia
#949948
Deuteranomaly
#9f7a40
Tritanopia
#a74e4f
Tritanomaly
#a85942
Achromatopsia
#7b7b7b
Achromatomaly
#937063

Important Note

This simulator uses mathematical approximations (transformation matrices) to demonstrate how colors might appear to individuals with various forms of color vision deficiency. It is intended for accessibility design testing and awareness, not for medical diagnosis. Real-world perception varies significantly between individuals.

About the Color Blindness Simulator

The Color Blindness Simulator helps developers, designers, and creators evaluate their work for accessibility. By applying standard transformation matrices, this tool demonstrates how visual assets might be perceived by individuals with Protanopia, Deuteranopia, Tritanopia, and other forms of color vision deficiency.

Why it matters

Roughly 1 in 12 men and 1 in 200 women have some form of color blindness, with Deuteranopia (green-blindness) being the most common. If a user interface relies entirely on color to communicate status (e.g., green for success, red for error), a significant portion of your audience may struggle to use your product.

Best Practices for Accessible Design

  • Never rely on color alone: Always pair color cues with icons, text labels, or distinct patterns.
  • Check contrast ratios: Ensure text has sufficient contrast against its background, regardless of the hue.
  • Use descriptive links: Avoid "click here" and use text that describes the destination, styling links with underlines in addition to color.

Frequently Asked Questions