Color Blindness Simulation

Step-by-Step Instructions

1. 1
   Open the Color Blindness demo. This page uses color as the only way to convey information.
2. 2
   In the side panel header, click the "Normal vision" dropdown.
3. 3
   Select Protanopia (red-blind) — the page transforms in real time.
4. 4
   Notice that the red/green status indicators become indistinguishable.
5. 5
   Try Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (total color blindness).
6. 6
   Check if important information is still understandable without color. If not, the page fails WCAG 1.4.1 Use of Color.
7. 7
   Select "Normal vision" to reset.