Color Blindness Simulator

Preview how colors appear to people with different types of color vision deficiencies,helping create more accessible designs

Or try a sample image:

Sample 1Sample 2Sample 3Sample 4

Simulation Type

Original

Simulated Vision

Select a Color

#4285F4RGB(66,133,244)

Simulation Type

Original

Simulated Vision

Suggested Alternative Colors

Understanding Color Vision Deficiencies

Protanopia

A type of red-green color blindness where the L-cones (long-wavelength cones) in the retina are absent or don't function properly. This affects the perception of reds,making them appear darker and often indistinguishable from greens and browns.

Affects approximately 1% of males and 0.02% of females

Deuteranopia

A type of red-green color blindness where the M-cones (medium-wavelength cones) in the retina are absent or don't function properly. People with deuteranopia have difficulty distinguishing between reds,greens,browns,and oranges. Unlike protanopia,reds don't appear as dark.

Affects approximately 1.2% of males and 0.01% of females

Tritanopia

A rare form of color blindness where the S-cones (short-wavelength cones) in the retina are absent or don't function properly. This affects the perception of blues and yellows. Blues may appear greenish,while yellows and oranges might look pinkish.

Affects less than 0.01% of the population regardless of gender

Achromatopsia

A complete form of color blindness (monochromacy) where a person sees no color at all,only shades of gray,white,and black. This condition is usually accompanied by other vision problems like light sensitivity and poor visual acuity.

Extremely rare,affecting approximately 0.003% of the population

Design Tips for Color Accessibility

  • Don't rely solely on color to convey information - use text,patterns,icons,or other visual cues
  • Maintain high contrast between text and background (WCAG recommends a minimum contrast ratio of 4.5:1)
  • Avoid problematic color combinations:
    • Red/green (most common issue)
    • Green/brown
    • Blue/purple
    • Light blue/gray
    • Green/blue
    • Light green/yellow
  • Use colorblind-friendly palettes in your design system
  • Test your designs with simulation tools like this one
  • Consider adding patterns or textures to distinguish between similar colors
  • Label colors directly when appropriate

Recommended Colorblind-friendly Palettes

IBM's Color Blind Safe Palette

Wong's Palette

Color Blindness Comparison

Type Cone Affected Difficulty with Common Confusions
Protanopia L-cones (red) Reds appear darker Red/green,green/brown,purple/blue
Deuteranopia M-cones (green) Greens appear more beige Red/green,green/brown,blue/purple
Tritanopia S-cones (blue) Blues appear greenish Blue/green,yellow/pink,purple/red
Achromatopsia All cones All colors Sees only grayscale