How to use the colour-blindness simulator
- Add a screenshot. Drop in a screenshot of a page, an app screen, a chart or a design export. Paste works too. A sample dashboard is loaded first, using red and green to show status.
- Compare every type at once. The grid shows your image as seen with the four main types of colour vision deficiency, next to the original.
- Look closely at one. Switch to Compare one and drag the slider across the image to see exactly what changes. Lower the severity to see the milder, more common forms.
- Fix and re-check. Anything that relies on colour alone, such as red and green status dots or chart lines, needs a second cue: a label, an icon, a pattern or a difference in lightness. Check your fix with the contrast checker.
How common is colour blindness?
Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Most of them have red–green deficiencies (deuteranomaly and protanomaly), where reds, greens, browns and oranges look similar. Blue–yellow deficiency (tritanopia) and total colour blindness (achromatopsia) are rare. On a site with 10,000 visitors a month, that can be several hundred people.
How the simulation works
Refract uses the physiologically based model published by Machado, Oliveira and Fernandes in 2009, which estimates how the cone cells in the eye respond when one type is missing or shifted. Colours are converted to linear light before the model is applied, which matters for accurate results. The severity slider blends between normal vision and the full deficiency to approximate the milder forms.
What it means for accessibility
WCAG 2.2 success criterion 1.4.1 says colour must not be the only way information is shown. Charts need labels or patterns as well as colours, form errors need text as well as a red border, and links in body text need an underline or another visual cue. A simulator makes those problems obvious in seconds.
Frequently asked questions
Is my image uploaded?
No. The simulation runs in your browser and the image never leaves your device.
Is the simulation exactly what colour-blind people see?
No simulation can be exact, because colour vision varies from person to person. The Machado model is the one most researchers and accessibility tools use, and it’s accurate enough to reveal colours that become hard to tell apart.
Which type should I test most?
Deuteranopia and protanopia, the red–green types, affect by far the most people. If a design works for both, it works for most viewers.
Can I test a live website?
Take a screenshot of the page and drop it in. To test while you build, browser developer tools such as Chrome’s Rendering panel can also emulate vision deficiencies.