Preview how any colour appears to people with 8 different types of colour vision deficiency. Build more accessible, inclusive designs.
Use the colour picker or type a HEX code. Try the sample buttons for quick common-colour examples.
The grid shows how your colour appears across every major type of colour vision deficiency simultaneously.
Select any vision type from the dropdown below the grid to compare it directly against normal vision.
Colour blindness (colour vision deficiency) is the reduced ability to distinguish certain colours. It affects approximately 8% of men and 0.5% of women. The most common type is red-green colour blindness (deuteranopia/protanopia).
The tool simulates Protanopia (no red cones), Deuteranopia (no green cones), Tritanopia (no blue cones), Protanomaly (weak red cones), Deuteranomaly (weak green cones), Tritanomaly (weak blue cones), Achromatopsia (no colour vision), and Achromatomaly (very weak colour vision).
The simulation applies established colour transformation matrices (based on the Brettel, Viénot and Mollon model and the Machado model) to the input colour to approximate how it appears to a person with that type of colour vision deficiency.
Yes. Checking your UI colours against colour blindness simulations is an important step in building accessible products. WCAG 2.1 guideline 1.4.1 requires that colour is not used as the only means of conveying information.
This tool simulates individual HEX colours. For full image simulation, you can use browser extensions like Colorblindly or the Dalton extension, which apply the same filters to entire pages.
Yes. All simulation calculations happen entirely in your browser. No data is ever sent to any server.
