Color Blindness Simulator
Preview how images appear to people with various types of color vision deficiencies — 8 simulation modes, real-time canvas rendering
Drag & drop image here
Supports JPEG, PNG, WebP, GIF
Understanding Color Blindness
What Is Color Blindness?
Color blindness (color vision deficiency) occurs when the eye's cone cells are absent or malfunction, reducing the ability to distinguish certain colors. It is usually inherited and affects around 8% of men and 0.5% of women worldwide.
Types of Deficiency
The three main categories are Protan (red deficiency), Deutan (green deficiency), and Tritan (blue deficiency). Each comes in a full (anopia) and partial (anomaly) variant. Achromatopsia is full monochromacy.
Prevalence
Deuteranomaly is by far the most common form (~5% of males). Protanopia and deuteranopia each affect about 1% of males. Tritanopia and achromatopsia are rare, affecting fewer than 1 in 10,000 people. The condition is rare in females due to X-linked inheritance.
Design Considerations
Never rely on color alone to convey information. Use patterns, icons, and labels alongside color. Ensure sufficient luminance contrast between foreground and background. Test your designs in multiple simulation modes before publishing.
Design for Everyone
Use Color + Shape
Pair color cues with icons, patterns, or text labels so color-blind users still understand your UI without relying on hue alone.
Avoid Red-Green Combos
Red and green are the most commonly confused pair. Use blue-orange or purple-yellow palettes for data visualisations and status indicators.
Maintain Luminance Contrast
Even when hues merge, high luminance contrast remains visible. Follow WCAG AA (4.5:1 for text, 3:1 for UI components) as a minimum baseline.
Use Colorblind-Safe Palettes
Palettes like Okabe-Ito, IBM Design, and WCAG-friendly sets are designed to remain distinguishable across the most common deficiency types.
Test Early, Test Often
Run simulations during the design phase — not just before launch. Browser extensions and tools like this simulator let you check any screenshot instantly.
Provide Text Alternatives
Charts and graphs should always have data labels, alt text, or an accessible data table. Screen reader users and color-blind users both benefit from descriptive content.