Free tool · No sign-up
Does your page still make sense without colour or sharp vision?
Enter a web address or upload a screenshot and see it through simulations of colour vision deficiency, achromatopsia, blurred vision and low contrast sensitivity, next to the original. It is the quickest way to find links, errors and charts that only colour tells apart.
What a simulation can and cannot show
Colour vision deficiency is common. Colour Blind Awareness estimates it affects about 1 in 12 men and 1 in 200 women, most often as a reduced ability to tell reds and greens apart. Simulations make that easy to design for: if two states of a control, two lines on a chart or an error and a success message become the same colour in the filter, you have found information carried by colour alone. The colour blind friendly design guide shows how to fix it for links, form errors, status messages and charts.
What a simulation cannot do is show you what a particular person sees. The filters here apply a published model of typical cone loss, an illustrative blur and a flat loss of contrast. Real vision varies with the person, the condition, the screen and the light, and many forms of low vision, such as field loss or sensitivity to glare, cannot be shown on a screenshot at all. Treat a simulation as a way to find problems, never as proof that a design works for someone.
A simulation also cannot measure contrast. If text fades badly under blur or low contrast sensitivity, check the actual ratio with the contrast checker, or for text over photos the text over image contrast checker.
The WCAG criteria it helps with
| Criterion | What it asks | What to look for |
|---|---|---|
| 1.4.1 Use of Color (A) | Colour is not the only way information, actions or responses are shown. | Links in text with no underline, red-only errors, required fields marked only in colour, chart series and status badges that differ only by hue. |
| 1.4.3 Contrast (Minimum) (AA) | Text has at least 4.5:1 contrast with its background, or 3:1 when large. | Grey body text, placeholder text and text over images that fade first under blur and low contrast sensitivity. Then measure them. |
| 1.4.11 Non-text Contrast (AA) | Control boundaries, focus indicators and meaningful graphics have at least 3:1 contrast. | Pale input borders, icon-only buttons and chart lines that vanish, especially under low contrast sensitivity. |
How the simulations work
- For a web address, our server opens the page in a headless Chrome at 1280 by 800 with reduced motion, scrolls through it so lazy images load, and returns one screenshot up to 4,000 pixels tall. Every filter is then applied in your browser, so switching between them is instant.
- Protan, deutan and tritan simulations apply the Machado, Oliveira and Fernandes (2009) matrices in linear light. At 100% they model the full loss of one cone type; lower severities blend the matrix with normal vision, which approximates the anomalous forms rather than reproducing the paper's separate values for each step.
- Achromatopsia replaces every colour with a grey of the same relative luminance.
- Blurred vision applies a Gaussian blur at three levels, scaled with the screenshot so it stays the same relative to the page. The levels are illustrative and not calibrated to a measure of acuity.
- Low contrast sensitivity halves contrast around mid-grey and softens the image slightly.
Frequently Asked Questions
How accurate is a colour blindness simulation?
It is a model, not a recording of anyone's sight. The colour vision filters use the Machado, Oliveira and Fernandes (2009) model, which is widely used for this, and show a typical result for each type. Two people with the same diagnosis can see differently, and the model does not include things like viewing conditions or how a person has learned to use the cues they have. Use the simulation to spot designs that depend on colour, then fix them so they no longer depend on it.
Which conditions does it simulate?
Protan, deutan and tritan colour vision deficiency, each from a mild anomalous form up to the full loss of one cone type (protanopia, deuteranopia, tritanopia); achromatopsia, shown as lightness only; blurred vision at three illustrative levels; and low contrast sensitivity, shown as halved contrast with slight softening. Low vision covers far more than blur, including field loss and light sensitivity, which a screenshot filter cannot represent.
Does a page that looks fine in every simulation meet WCAG?
Not on its own. WCAG 1.4.1 Use of Color asks that colour is never the only way information is conveyed, which a simulation helps you find, but 1.4.3 and 1.4.11 set measured contrast ratios that only a contrast check can confirm. Many other criteria have nothing to do with vision at all. Run an automated scan and check contrast with a contrast checker as well.
Why does the screenshot look different from the page in my browser?
Our server loads the page once, 1280 pixels wide, as a new signed-out visitor with reduced motion turned on, so you may see a cookie banner, a different hero image or a paused carousel. The screenshot stops at 4,000 pixels. Some sites block automated browsers altogether; for those, and for pages behind a login, take a screenshot yourself and upload it.
Is my page or image stored?
An uploaded image never leaves your browser. For a web address, our server loads the page, sends the screenshot back to your browser and does not keep it. As with our other URL tools, we log the site that was checked and whether the capture worked.
Why not just switch on a colour blindness filter in the operating system?
Operating system colour filters are designed to help people with colour vision deficiency tell colours apart, so they shift colours rather than simulate the deficiency. Browser developer tools do include vision deficiency emulation, which is a good way to check a page you are building. This tool works on any public page or image without developer tools, compares the result with the original side by side, and adds severity levels, blur and low contrast sensitivity.
Essential Accessibility Resources
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences