Online Tool Store
Color Contrast Simulator by Condition
Simulate how a foreground/background color pair appears under deuteranopia, protanopia, or tritanopia, with the resulting contrast ratio against WCAG thresholds. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Example
Color Contrast Simulator by Condition
- Foreground
- #2f6fed
- Condition
- Deuteranopia
Example shown — replace it with your own colors and condition.
Simulated appearance
How it works
- Enter a foreground and background color pair.
- Choose a color vision condition to simulate.
- See the simulated appearance and contrast ratio.
The method
Each color is transformed using a standard color-blindness simulation matrix for the selected condition, then the resulting contrast ratio is recalculated against WCAG thresholds.
FAQ
Which color vision conditions does this simulate?
Common types of color vision deficiency — deuteranopia, protanopia, and tritanopia — the three most frequently encountered in accessibility testing.
Does this replace a full accessibility audit?
No — it's a quick visual check for one color pair at a time. A full audit should also cover contrast ratios, focus states, and screen reader behavior.
What contrast ratio should I aim for?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text — checking this under simulated conditions catches problems normal vision might miss.
How we compare
| Feature | Online Tool Store | Browser DevTools contrast checker | Physical color-blindness simulator glasses |
|---|---|---|---|
| Simulates specific conditions | Yes | No | Yes |
| No extra hardware | Yes | Yes | No |
| Free to use | Yes | Free | Cost |
For checking a specific color pair against multiple conditions quickly, this beats a standard contrast checker that only shows normal vision.