👁️

Color Blindness Simulator

Test your designs for accessibility by simulating different types of color vision deficiency

Vision Type

MildSevere

About Deuteranomaly

Prevalence:5% of males
Type:Green-weak (altered M-cones)

The most common form of color blindness. People have reduced sensitivity to green light.

Test Custom Colors

Test Images

JPG, PNG, GIF up to 5MB

Color Simulation

Original Colors

#ff0000
#00ff00
#0000ff
#ffff00
#ff00ff
#00ffff
#ffa500
#800080
#ffc0cb
#a52a2a
#808080
#000000

As Seen by Deuteranomaly

#cc4200
Changed
#33bd24
Changed
#0000db
Changed
#ffff24
Changed
#cc42db
Changed
#33bdff
Changed
#edbc17
Changed
#66216e
Changed
#f2d0c9
Changed
#8c4a2a
Changed
#808080
No change
#000000
No change

Sample UI - Original

Primary Button
Success Message
Information Alert

Sample UI - Deuteranomaly

Primary Button
Success Message
Information Alert

Accessibility Recommendations

✓ Best Practices

  • • Use high contrast ratios (at least 4.5:1)
  • • Don't rely on color alone to convey information
  • • Add patterns, textures, or icons alongside colors
  • • Test with multiple color vision types

⚠️ Common Issues

  • • Red/green combinations (especially for errors/success)
  • • Blue/purple distinctions
  • • Low contrast color combinations
  • • Charts with similar colored sections

💡 Alternative Solutions

  • • Use symbols: ✓ for success, ✗ for errors
  • • Add text labels to color-coded elements
  • • Use patterns or textures in charts
  • • Provide alternative viewing modes