Accessibility · vision preview
Color blindness simulator
Compare an original color against eight common color-vision simulations (protanopia, deuteranopia, tritanopia, and anomaly variants). Use it before you rely on red/green alone for errors, success, or chart series.
Why this tool exists
WCAG contrast ratios do not catch confusing hue pairs for color-blind users. Simulation is imperfect but catches obvious “red vs green” KPI lines that collapse into mud brown.
How to use it
- Pick a color with the native input or paste from your design system.
- Cycle vision types in the dropdown — compare side-by-side panels.
- Note which pairs become indistinguishable and add icons, labels, or patterns.
- Pair with the contrast checker for luminance, not just hue.
Use a different tool when…
You need medical diagnosis or compliance certification — this is a design aid, not clinical software.
Practical tips
- Simulations approximate sRGB matrices; they vary slightly by tool and display.
- Test charts with patterns, not only color swaps.
- Achromatopsia preview is rare but useful for checking reliance on hue alone.
FAQ
Which type should I test first?
Deuteranopia and protanopia cover most red-green confusion cases in UI.
Is this accurate for all displays?
It models sRGB. OLED, HDR, and uncalibrated monitors still shift perception.
Can I simulate entire screenshots?
This page is per-color. For full UI, test in browser extensions or design plugins too.
Do simulations satisfy legal requirements?
They help design; legal compliance still needs process, audits, and user testing.
Why eight types?
Covers common CVD categories cited in accessibility literature and design tooling.