Primary text on surface
PassOriginal
Aa
Simulated
Aa
Original contrast13.98:1
Simulated contrast14.62:1
Color accessibility
Color Blindness Simulator + Safe Palette
Simulate protanopia, deuteranopia, and tritanopia to find risky color pairs, improve readability, and generate a safer palette for production UI.
Simulation settings
Choose a vision profile and run automatic safe-palette generation for risky pairs.
0Problematic pairs
4Passing pairs
ProtanopiaCurrent profile
Muted text on panel
PassOriginal
Aa
Simulated
Aa
Original contrast4.34:1
Simulated contrast4.67:1
Primary action button
PassOriginal
Aa
Simulated
Aa
Original contrast5.17:1
Simulated contrast7.49:1
Warning badge
PassOriginal
Aa
Simulated
Aa
Original contrast8.15:1
Simulated contrast6.68:1
Problem report
Pairs below 4.5:1 in the selected simulation are flagged as risky for text readability.
No problematic pairs for the current profile.
:root {
--safe-primary-text-foreground: #1e293b;
--safe-primary-text-background: #f8fafc;
--safe-muted-text-foreground: #64748b;
--safe-muted-text-background: #f1f5f9;
--safe-action-foreground: #ffffff;
--safe-action-background: #2563eb;
--safe-warning-foreground: #78350f;
--safe-warning-background: #fef3c7;
}Color blindness simulator: what it checks and how to use it
A palette can look fine to the team but fail for users with color-vision deficiencies. Simulation reveals problematic combinations early in the design-to-dev flow.
How to use: 1) choose vision profile, 2) inspect simulated pairs, 3) generate safe palette, 4) export CSS/JSON tokens and apply them in your system.
Color blindness simulation FAQ
Why check multiple vision profiles?
Different deficiencies affect color channels differently. A pair that passes one profile may fail in another.
What does safe-palette generation do?
It adjusts foreground colors to meet readable contrast under the selected simulation while preserving visual direction as much as possible.
Does this replace WCAG contrast checks?
No. Best practice is to combine simulation with WCAG AA/AAA contrast checks.
What should I do after generating a safe palette?
Export tokens, update component styles, and re-run contrast and keyboard-flow checks before release.