๐ŸŽจ

Color Blindness Simulator

Simulate how designs look to color-blind users

How to Use

  1. 1

    Upload an image of your design, screenshot, or any visual.

  2. 2

    Switch between simulation modes: Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (total color blindness).

  3. 3

    Compare the original and simulated views side by side to identify accessibility issues.

Frequently Asked Questions

What types of color blindness are simulated? โ–ผ
Protanopia (reduced red sensitivity, affecting ~1% of males), Deuteranopia (reduced green sensitivity, ~1% of males), Tritanopia (reduced blue sensitivity, rare), and Achromatopsia (no color perception, very rare).
Why does this matter for design? โ–ผ
About 8% of males and 0.5% of females have some form of color vision deficiency. Checking your designs ensures they are usable and readable for all users, which is also a WCAG accessibility requirement.
Is my image uploaded to a server? โ–ผ
No. The simulation uses CSS filter matrices and Canvas API entirely in your browser.