BASELINE
Normal Color
Original color without simulation.
RGB 52, 152, 219
FREE ACCESSIBILITY TOOL
Color Vision Simulator
Preview how a color may appear under several common types of color vision deficiency.
These simulations are approximations for design and accessibility testing. Human color perception varies, so simulated colors should not be treated as a medical or diagnostic representation of an individual's vision.
#
#3498DB.
SELECTED COLOR
#3498DB
RGB 52, 152, 219
SIMULATION
Color Vision Comparison
Compare the original color against approximate simulations of several color vision deficiencies.
#3498DB
Dichromacy
Protanopia
Approximation of red-cone deficiency.
RGB 95, 96, 203
Dichromacy
Deuteranopia
Approximation of green-cone deficiency.
RGB 90, 82, 199
Dichromacy
Tritanopia
Approximation of blue-cone deficiency.
RGB 57, 190, 187
Anomalous Trichromacy
Protanomaly
Approximation of reduced red sensitivity.
RGB 73, 124, 211
Anomalous Trichromacy
Deuteranomaly
Approximation of reduced green sensitivity.
RGB 71, 117, 209
Anomalous Trichromacy
Tritanomaly
Approximation of reduced blue sensitivity.
RGB 54, 171, 203
Monochromacy
Achromatopsia
Approximate grayscale representation.
RGB 130, 130, 130
SIDE-BY-SIDE
Quick Visual Comparison
The same color shown through each simulation.
Normal
#3498DBProtan
#5F60CBDeutan
#5A52C7Tritan
#39BEBBProt-A
#497CD3Deut-A
#4775D1Trit-A
#36ABCBAchrom
#828282
ACCESSIBLE DESIGN
Don't rely on color alone
A successful interface should remain understandable even when users perceive colors differently.
1
Add another visual cue
Use text, icons, shapes, patterns, or labels alongside color when communicating status or meaning.
2
Check contrast separately
Color-vision simulation and contrast testing solve different accessibility problems. A color can remain distinguishable and still have inadequate text contrast.
3
Test important color pairs
Pay particular attention to charts, alerts, maps, validation states, dashboards, and controls that use color to distinguish one state from another.
4
Keep labels visible
Don't remove useful text labels just because a color appears obvious to users with typical color vision.
SIMULATED MODES
Types included in this tool
Protanopia
Red-cone deficiency simulation.
Deuteranopia
Green-cone deficiency simulation.
Tritanopia
Blue-cone deficiency simulation.
Protanomaly
Reduced red sensitivity simulation.
Deuteranomaly
Reduced green sensitivity simulation.
Tritanomaly
Reduced blue sensitivity simulation.
Achromatopsia
Monochromatic grayscale approximation.
IMPORTANT
Use simulations as one accessibility check
A simulator can help reveal color combinations that may be difficult to distinguish, but it does not replace contrast testing, keyboard testing, semantic markup, assistive-technology testing, or evaluation against applicable WCAG requirements.