🎨 Color Blindness Simulator

Upload a design or screenshot to see it through different types of color vision deficiency — all in your browser via Canvas image processing.

🖼️
Click or drag & drop a screenshot or image here
Supports PNG, JPG, WebP — processed entirely client-side
🎯 Upload an image to preview color blindness simulations
💡 Tip: Use the filter buttons above to simulate how people with different types of color blindness perceive your design. This helps ensure WCAG accessibility compliance.

How the Color Blindness Simulator Works

This tool uses the HTML5 Canvas API to apply color blindness simulation matrices directly in your browser. When you upload an image, it is drawn onto an invisible canvas and each pixel's RGB values are transformed using a mathematical model of human color vision deficiencies. The transformation matrices are based on the Brettel, Viénot, and Mollon (1997) physiological model, which simulates the response of L, M, and S cone cells in the human retina.

  • Protanopia (Red-Blind): Simulates missing L-cones (red-sensitive). Red hues appear darker and desaturated, shifting toward brown/green.
  • Deuteranopia (Green-Blind): Simulates missing M-cones (green-sensitive). Green hues appear muted, and red-green differentiation is lost.
  • Tritanopia (Blue-Yellow): Simulates missing S-cones (blue-sensitive). Blue hues appear greenish, and yellow/blue discrimination is impaired.
  • Achromatopsia (Monochrome): Simulates complete color vision absence. The image is converted to grayscale using luminance weights (0.299R + 0.587G + 0.114B).

Key Benefits for Designers

  • WCAG compliance testing: Ensure your color palette and contrast ratios are accessible to the approximately 8% of men and 0.5% of women with color vision deficiency.
  • Real-time iteration: Upload a screenshot of your design and immediately cycle through simulations without leaving the browser.
  • Side-by-side comparison: The split view shows the original image next to the simulated version, making it easy to spot accessibility issues.
  • Privacy guaranteed: Your design image is processed entirely client-side. No data is uploaded to any server.

Frequently Asked Questions

What is the difference between protanopia and deuteranopia?

Protanopia affects red-sensitive cones; reds appear darker. Deuteranopia affects green-sensitive cones; greens are muted. Both are forms of red-green color blindness. Protanopia is rarer but typically more severe.

Can I test fonts and text readability?

Yes! Upload a screenshot of your text-heavy design. The simulation will show whether your text color choices create sufficient contrast against backgrounds when color perception is impaired.

Is this accurate for clinical diagnosis?

No. This tool provides an approximation for design accessibility testing. Clinical diagnosis should be performed by an ophthalmologist using Ishihara plates or an anomaloscope.