Color Tools

Color Blindness Simulator

Simulate how colors appear to people with different types of color vision deficiencies. Test your website colors, designs, and images for accessibility compliance.

8
Simulations
WCAG
Compliance
Real-time
Preview

Color Blindness Simulator

Upload an image or enter colors to simulate different types of color vision

Real-time Simulation

Drag & drop an image here, or click to browse

Supports JPG, PNG, GIF, WEBP (Max 5MB)

Affected Population: 8% of men, 0.5% of women
Most Common Type: Deuteranomaly (6% of men)
WCAG Compliance: Checking...

Upload an image or select colors to see simulation

Normal Vision Simulation
Color Contrast Ratio --:1
WCAG AA (Normal Text): --
WCAG AAA (Normal Text): --
WCAG AA (Large Text): --
Tips:
  • • Use both color and symbols
  • • Ensure sufficient contrast
  • • Test with simulations
Best Practices:
  • • 4.5:1 contrast minimum
  • • Don't rely on color alone
  • • Use patterns/textures

Types of Color Vision Deficiency

Protanopia (Red-blind)

Missing or malfunctioning red cone cells. Reds appear black, oranges and greens appear yellow.

Affects: ~1% of males

Deuteranopia (Green-blind)

Missing or malfunctioning green cone cells. Greens appear beige, reds appear brown.

Affects: ~1% of males

Tritanopia (Blue-blind)

Missing or malfunctioning blue cone cells. Blues appear green, yellows appear violet.

Affects: ~0.01% of population

Achromatopsia (Total)

No functional cone cells. Sees only in black, white, and shades of gray.

Affects: ~1 in 30,000 people

Color Weakness (Anomalous Trichromacy)

Protanomaly, Deuteranomaly, Tritanomaly: These are milder forms where cone cells are present but don't function properly. Colors appear duller and less vibrant, but not completely absent.

Deuteranomaly is the most common, affecting about 6% of males. They see greens as more red.

Web Accessibility Guidelines (WCAG)

1

Don't Rely on Color Alone

Use text labels, icons, patterns, or other visual cues in addition to color to convey information.

Buttons Charts Form Errors
2

Sufficient Color Contrast

Ensure text has enough contrast against its background for readability.

WCAG AA (Minimum): 4.5:1 for normal text
WCAG AAA (Enhanced): 7:1 for normal text
3

Test Your Designs

Use tools like this simulator to check how your designs appear to people with color vision deficiencies.

  • • Test charts and data visualizations
  • • Check button and link states
  • • Verify form validation colors
  • • Review image color choices

Accessibility Checklist

Text contrast ratio ≥ 4.5:1
Don't use only red/green for status
Use textures/patterns in charts
Provide text alternatives for colors
Test with color blindness simulator
Ensure focus indicators are visible