How accurate is this simulation?

The simulation uses Brettel et al. color transformation matrices, which are the industry standard for CVD simulation. Results are a close approximation of how colors appear to people with these conditions.

What's the most common type of color blindness?

Red-green color blindness (protanopia and deuteranopia combined) affects about 8% of men of Northern European descent. It's much rarer in women (~0.5%).

What colors should I avoid?

Avoid relying on red vs. green distinctions. Blue + orange is generally the safest high-contrast pair across all deficiency types.

Color Blindness Simulator – Free Online Tool

See how your colors look to people with different types of color vision deficiency: protanopia, deuteranopia, tritanopia, and more.

✦ FreeNo SignupInstantDesign Color Contrast & Accessibility Color Theory for Developers

Single Color

Pick any color to see how it appears under different types of color vision deficiency.

Original

Normal Vision~92%

Trichromatic, full color perception

#e63946

Protanopia~1.3% ♂

No red cones, reds appear dark/muddy

#9b9a43shifted

Deuteranopia~1.2% ♂

No green cones, greens look brownish

#a5b242shifted

Tritanopia~0.001%

No blue cones, blues appear greenish

#dd4040shifted

Achromatopsia~0.003%

Total color blindness, grayscale only

#5f5f5fshifted

Palette Comparison

Test how a full palette looks to people with different types of color blindness. Make sure your colors stay distinguishable.

Normal Vision~92%

Protanopia~1.3% ♂

Deuteranopia~1.2% ♂

Tritanopia~0.001%

Achromatopsia~0.003%

Tips for Color-Blind Friendly Design

Don't rely on color alone, add icons, patterns, or labels
Use sufficient contrast (check with the Contrast Checker)
Avoid red/green combinations for important distinctions
Test your palette with all deficiency types above
Blue + orange is generally the safest distinguishable pair

Example

Input

#e63946

Output

Protanopia: #787844 | Deuteranopia: #8e8b00 | Tritanopia: #e33500

A vibrant red shifts significantly for red-blind (protanopia) and green-blind (deuteranopia) viewers, appearing yellowish-brown.

How to Use Color Blindness Simulator

1
Pick a Color
Choose any color using the picker or paste a hex code.
2
View Simulations
See how the color appears under each type of color vision deficiency.
3
Test a Palette
Add multiple colors to check if they stay distinguishable across all deficiency types.
4
Refine Your Design
Adjust colors until they work for everyone.

What is Color Blindness Simulator?

Around 8% of men and 0.5% of women have some form of color vision deficiency. This tool simulates the most common types (protanopia/red-blind, deuteranopia/green-blind, tritanopia/blue-blind, and achromatopsia/total color blindness) so you can design with confidence that your colors communicate effectively for everyone.

Common Use Cases

✦Testing UI color palettes for accessibility
✦Checking data visualization colors are distinguishable
✦Validating brand colors work for color-blind users
✦Meeting WCAG accessibility requirements

Frequently Asked Questions

More Design Tools

Tools for accessibility, color, and visual asset generation.

Aa Color Contrast Checker ◈ Favicon Generator 🎨 Color Palette Generator 🌈 Gradient Palette Generator 🔄 Color Format Converter 📊 Color Scale Generator

View all Design tools