Color Blindness Simulator
Simulate up to 6 colors across 8 CVD types with Delta E metrics, confusable pair detection, palette analysis and exportable reports
Colors to Simulate
Need to test a full design?
Try the Image Colorblind Simulator → upload screenshots and see how they look with CVD
See how your color(s) appear across all 8 types of color vision deficiency simultaneously.
How it works
Color blindness (Color Vision Deficiency, CVD) affects 8% of men and 0.5% of women — over 350 million people worldwide. Designing with chromatic accessibility is essential for inclusive interfaces.
Simulator Features
Multi-color Mode
Simulate up to 6 colors simultaneously. Perfect for verifying complete design palettes.
All Types View
Grid showing all 8 CVD types at once: protanopia, deuteranopia, tritanopia, achromatopsia and their partial forms.
Delta E Metrics (CIE76)
Measures how much each color shifts perceptually. From "imperceptible" to "very different" on a scientific scale.
Confusable Pair Detection
Automatically detects which colors in your palette become confusable under each CVD type.
Types of Color Blindness
🔴 Protanopia / Protanomaly (Red)
Affects L-cones (red). Protanopia is total absence (~1%), protanomaly is partial reduction (~1%). Reds appear darker and are confused with greens.
🟢 Deuteranopia / Deuteranomaly (Green)
Affects M-cones (green). Most prevalent: deuteranomaly affects ~5% of men. Red-green confusion without significant brightness change.
🔵 Tritanopia / Tritanomaly (Blue)
Affects S-cones (blue). Very rare (~0.01%). Blue-yellow confusion. Blues appear greenish.
⚫ Achromatopsia / Achromatomaly
Total or partial deficiency of all cones. Achromatopsia (~0.003%) produces grayscale-only vision.
💡 Practical Use Cases
Case 1: Dashboard Charts
Your chart uses red #EF4444 and green #22C55E for success/error.
→ Add both colors to the simulator → "Palette Analysis" tab
→ If a confusable pair alert appears, switch to blue/orange
Case 2: Complete Design System
Add your 5-6 primary design system colors to the simulator.
→ The "Simulation Matrix" shows how all colors look in each type
→ Export the report to document your palette's accessibility
Case 3: Form Validation States
Verify that your states (error, success, warning, info) are distinguishable for everyone.
→ Use the "Detail" tab to compare original vs simulated
→ If ΔE < 10 between two states, add icons or patterns
Case 4: Heat Maps & Data Visualization
Avoid red-green gradients. Use blue-white-orange or purple-white-orange instead.
→ Simulate your gradient endpoints in "All Types"
→ Look for ΔE < 15 (moderate shift) across all types