Free online tools to generate, calculate, convert, format, transform, and de/en-code.
 

Color Blindness Simulator

Test how your images and designs appear to people with different types of color vision deficiency. Upload an image or load from URL to see simulations of various forms of color blindness.

Drop an image here or click to upload

Supports JPG, PNG, WebP, and other image formats

Note: URL must be a direct link to an image file and allow CORS access

Try an example:


Types of Color Blindness

Color blindness (color vision deficiency) affects approximately 8% of men and 0.5% of women worldwide. Understanding how your designs appear to people with color blindness is crucial for accessibility.

Red-Green Color Blindness (Most Common)
Protanopia ~1% of males

Complete absence of red cone photoreceptors. Red appears as dark gray or black, and colors like orange, yellow, and green appear shifted. Protanopes cannot distinguish between red and green hues.

Protanomaly ~1% of males

Reduced sensitivity to red light. Similar to protanopia but less severe. Red, orange, and yellow appear more green.

Deuteranopia ~1% of males

Complete absence of green cone photoreceptors. Green appears beige, and red appears brownish-yellow. The most common form of color blindness.

Deuteranomaly ~5% of males

Reduced sensitivity to green light. The most common type of color deficiency, affecting about 5% of males. Green and red-yellow hues are shifted.

Blue-Yellow Color Blindness (Rare)
Tritanopia ~0.001%

Complete absence of blue cone photoreceptors. Blue appears green, and yellow appears violet or light gray. Extremely rare, affecting both males and females equally.

Tritanomaly Very rare

Reduced sensitivity to blue light. Blue and green, as well as yellow and red, are difficult to distinguish.

Complete Color Blindness (Extremely Rare)
Achromatopsia ~0.003%

Complete absence of color vision - sees only in shades of gray. Often accompanied by other visual problems like sensitivity to light and poor visual acuity.

Design Tips:
  • Never rely on color alone to convey information
  • Use patterns, textures, or labels in addition to colors
  • Ensure sufficient contrast between foreground and background
  • Test your designs with this simulator before deployment
  • Use tools like WCAG contrast checkers for accessibility compliance

Feedback

Help us improve this page by providing feedback:


Share with