Free tool · No signup

Colour blindness & low vision simulator

We capture your homepage in a real Chrome at phone and desktop widths, then show it through common colour-vision deficiencies, blur and contrast loss — right in your browser.

No signup · Results in ~40 seconds · Nothing stored except the shareable report

What we check and why

How the simulation works

We load your homepage in a real Chrome browser at several screen widths and take screenshots of the first screens, the same capture our mobile-friendly test uses. The simulations are then applied in your own browser with standard SVG colour-matrix filters, so switching between them is instant and nothing extra is sent to our servers.

Colour-vision deficiencies are modelled with widely used matrices that approximate how the affected cone type changes perceived colour. They are approximations: real perception varies from person to person, and anomalous trichromacy (weaker rather than missing cones) is milder than the full deficiencies shown here.

Protanopia: no red cones; reds look dark and brownish. Affects about 1% of men.
Deuteranopia: no green cones; red and green are hard to tell apart. The most common type in its milder form.
Tritanopia: no blue cones; blue and green, yellow and pink are confused. Rare.
Achromatopsia: no colour at all, only brightness. Very rare, but the same view shows what your page looks like in greyscale.
Blur: a rough stand-in for low vision, uncorrected short sight or a phone read at arm's length.
Contrast loss: approximates cataracts, ageing eyes, glare or a dim screen outdoors.

What to look for

Check whether anything important is communicated by colour alone: required form fields marked only in red, links distinguished from body text only by colour, error and success messages, charts and status badges. Under deuteranopia a red error and a green success message can look the same. Add an icon, a text label or an underline so the meaning survives without colour (WCAG 1.4.1).

In the blur and contrast-loss views, ask whether your headline, phone number and main button are still readable. If they disappear first, increase the text size, weight or contrast. Light grey text on white is the most common casualty.

Next steps

For exact numbers, check your text and background colours in the colour contrast checker, and run the accessibility checker for an automated WCAG scan of the whole page. The simulator is a way to see the problem, not a measurement or a compliance test. It is also a useful way to show colleagues or a designer why a colour choice needs to change: a side-by-side view is often more convincing than a ratio.

Frequently asked questions

How common is colour blindness?

Red-green colour-vision deficiency affects roughly 1 in 12 men and 1 in 200 women of Northern European ancestry. Blue-yellow deficiencies and complete colour blindness are much rarer.

Are the simulations accurate?

They use standard approximation matrices and are good enough to spot problems such as red/green-only signals. Individual perception varies, so treat them as a guide rather than an exact reproduction.

Why do you only show the top of the page?

To keep the scan fast and the report small, the browser captures the first screens at each width. Most critical content — headline, contact details, main button — sits there.

Is the simulation done on your server?

No. Our server only captures the screenshots in a real browser; the filters are applied in your browser, so switching between views is instant.

Does a good result mean my colours meet WCAG?

No. The simulator shows how the page may look. Contrast requirements are measured with the contrast checker or the accessibility checker.