Colorblind Simulator
Simulate how users with color vision deficiency perceive colors to design accessible color schemes
Last updated:
How to Use
Expand how to useCollapse how to use
- 1
Choose a mode
Enter foreground and background colors in palette mode, or upload an image in image mode
- 2
Review simulation results
Check how colors appear under 7 types of color vision deficiency along with WCAG contrast ratios
- 3
Improve your colors
Adjust your color scheme if contrast ratios are insufficient to ensure accessibility for all users
Contrast ratio: 17.06:1
ProtanopiaProtanopia
DeuteranopiaDeuteranopia
TritanopiaTritanopia
AchromatopsiaAchromatopsia
ProtanomalyProtanomaly
DeuteranomalyDeuteranomaly
TritanomalyTritanomaly
About Colorblind Simulator
Colorblind Simulator shows how users with color vision deficiency (CVD) perceive your colors using the scientifically validated Brettel (1997) method. Approximately 8% of males have some form of red-green color blindness — a significant portion of any web or app audience. Upload a screenshot of your UI or test a foreground/background pair to see how it appears across 7 CVD types, from the common deuteranopia and protanopia to the rare achromatopsia. WCAG contrast ratios are displayed alongside each simulation, giving you objective data to back accessibility review decisions before design tokens are finalized in Figma or Storybook.
Key Features
- Scientific color vision simulation using the Brettel method (7 types)
- WCAG contrast ratio checking in palette mode
- Visual simulation via image upload
- Client-side simulation using JavaScript canvas processing (Brettel 1997 LMS model)
Use Cases
- Test your design system's status colors (success green, error red, warning yellow) to ensure they remain distinguishable for users with deuteranopia
- Upload a Figma or Storybook screenshot to validate that interactive chart colors or data visualizations are accessible before shipping
- Verify that form validation states (red border vs. green border) don't rely solely on color to convey meaning
- Check that navigation active states, link colors, and button variants are identifiable under protanopia conditions
- Provide evidence for WCAG 1.4.1 (Use of Color) compliance during an accessibility audit or Section 508 review
FAQ
What is color vision deficiency?
Color vision deficiency (CVD) is a condition where distinguishing certain colors is difficult. It affects approximately 8% of males and 0.5% of females worldwide. The most common types are protanopia and deuteranopia, which affect red-green color perception.
What is the Brettel method?
The Brettel et al. (1997) method is a color vision simulation technique based on the LMS cone response model of the human visual system. It performs projection transformations according to specific color vision characteristics and is one of the most widely used scientific simulation methods.
Is my image data safe?
Yes. All simulation is performed via JavaScript Canvas API directly in your browser. Pixel data is never transmitted to any server, so images containing UI mockups or proprietary screenshots are safe to use.
What are the contrast ratio standards?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 3:1 for large text (18pt+ or 14pt bold+). Government and healthcare systems typically require the stricter AAA standard of 7:1 for normal text. This tool shows WCAG AA pass/fail alongside the simulation so you can assess both color perception and contrast in one step.
Does this tool replace user testing with people who have CVD?
No — simulations are approximations based on mathematical models and should be used as a design aid, not a definitive accessibility guarantee. Real-world perception varies between individuals. Use simulation results to guide design decisions, then validate with actual users and automated tools like axe-core or Lighthouse.