Vision simulator
Enter a page address and look at it through eight kinds of eyesight, with the unfiltered page alongside. Links, alerts and charts that rely on color alone get easy to spot.
Three sensors, and what happens when one is missing
Your retina measures color with three types of cone cell, each most sensitive to a different band of light: long wavelengths (red), medium (green) and short (blue). The brain works out a color by comparing the three signals. If one type is absent or shifted, some of those comparisons can’t be made anymore, and colors that differ only along that axis end up looking the same.
The genes for the red and green cones sit on the X chromosome, which is why about 1 man in 12 has some form of red-green deficiency, against roughly 1 woman in 200. Most of them have a weakened cone, not a missing one. What they see falls somewhere between normal vision and the full simulation shown here.
The eight views
| View | What it models | What tends to break |
|---|---|---|
| Normal vision | The reference, shown without filters | |
| Deuteranopia | No working green cones; with milder forms, about 6% of men | Red and green status colors, orange next to green |
| Protanopia | No working red cones; about 2% of men with milder forms | Red text on dark backgrounds, which turns nearly black |
| Tritanopia | No working blue cones; under 1 person in 10,000 | Blue against green, yellow against pink |
| Achromatopsia | Brightness only. Also a page on a monochrome e-reader or a black-and-white printout | Any meaning carried by hue |
| Low vision | Reduced sharpness, like reading without your glasses | Small text, thin fonts, icons without labels |
| Cataracts | A clouded, yellowed lens, common after 60 | Pale gray text, light blue links |
| Screen in the sun | A phone outdoors at noon | Everything with modest contrast |
The three color blindness views use the transformation matrices published by Machado, Oliveira and Fernandes in 2009, at full severity, applied in linear RGB so that brightness stays faithful. The other views are built from CSS filters: grayscale for achromatopsia, a 2.5-pixel blur for low vision, blur with a sepia tint and lowered contrast for cataracts, and strongly reduced contrast with raised brightness for sunlight.
A five-minute review
- Deuteranopia, then links. Find the links inside a paragraph. If you can’t tell them from the surrounding text anymore, add an underline.
- Deuteranopia, then states. Look at form errors, stock labels, “online” dots and chart legends. A red message and a green message should also differ by an icon or a word.
- Achromatopsia. Check that the primary button still stands out from the secondary one. If both turn the same gray, hue was the only difference between them.
- Low vision. You should still be able to find the heading, the navigation and the main action from their shape and position.
- Sun, at phone width. Whatever text disappears here is the text to darken first. Measure it in the contrast ratio calculator.
WCAG puts the rule behind all this in success criterion 1.4.1: color must not be the only visual means of conveying information.
How the preview is made, and its limits
Our server downloads the HTML (up to 2.5 MB), removes every script, frame and event handler, and sends the result to your browser, which displays it in a sandboxed frame. The frame can’t run code or submit forms. Its images, fonts and style sheets are requested by your browser directly from the original site.
That has two side effects. Content a site builds with JavaScript, such as carousels, lazy-loaded sections or entire single-page applications, may be absent or look unfinished. And some web fonts refuse to load outside their own domain, so the typeface can differ from the live page.
A simulation is an approximation, shown on your own screen to your own eyes. It’s good at revealing where a design depends on color. It can’t tell you what a given person perceives. Feedback from people with a color vision deficiency or low vision is worth more than any filter.
Questions people ask
What is the most common type of color blindness?
Deuteranomaly, a weakened response of the green cones. Together with deuteranopia, its complete form, it affects about 6% of men. That’s why this tool opens on the deuteranopia view.
Do people with color blindness see in black and white?
Almost never. Complete absence of color vision (achromatopsia) affects roughly 1 person in 30,000. Most people with a deficiency see plenty of colors and mix up specific pairs, usually along the red-green axis.
Which colors are safe to use together?
Pairs that differ clearly in lightness stay distinct under every filter, dark blue with yellow or orange for example. Red with green, green with brown, and blue with purple are the combinations to avoid when the two colors mean different things.
Why does my page look broken in the preview?
The preview runs without JavaScript. If the layout, the menu or the content depends on scripts, those parts will be missing. The filters still apply correctly to whatever does get displayed.
Can I test a page that requires a login?
No. Our server requests the page as an anonymous visitor and has no access to your session, so all it gets is the login screen. For pages behind a login, use the vision deficiency emulation built into Chrome or Firefox developer tools.