Color Blindness Preview

Contrast ratio measures a brightness difference. It does not measure whether two colours look like each other, and those are separate failures with separate fixes — which is why this tool reports a colour distance next to every ratio.

Color Blindness Preview — Check a Text and Background Pair for Contrast and ConfusionBuildFigure

Two numbers, two different failures

WCAG contrast ratio is a function of relative luminance only. Black on white is 21:1, and 4.5:1 is the floor for body text. It answers one question: is there enough brightness difference for the shapes of the letters to resolve.

Colour vision deficiency mostly leaves brightness perception intact. Someone who cannot separate red from green still separates light from dark perfectly well. So a pair can score 6:1, pass every automated audit, and still be useless if the reader's job is to tell it apart from a second colour that now looks the same. That is what the colour distance column is for. It is a plain Euclidean distance in CIELAB — under roughly 12 units, most people would call the two colours the same colour.

Which target to pick

TargetApplies toNotes
4.5:1Body textWCAG 2.1 AA, the usual legal baseline
3:1Text at 18pt or 14pt bold, icons, input borders, focus ringsNon-text UI components sit here too
7:1Anything aiming at AAAPublic sector work, or products with a low-vision audience

These are floors, not goals. A pair that lands on 4.6:1 fails the moment someone turns their screen brightness down or steps outside. If you have the freedom, aim well past the line rather than at it.

Why the ratios barely move between rows

People expect the contrast number to collapse under simulation and are suspicious when it does not. It does not because the simulation matrices redistribute chromatic information while leaving luminance close to where it was. That is a property of the underlying vision, not an artefact of the maths. Everything interesting is happening in the distance column, and that column is the reason to use this tool rather than a plain contrast checker.

When the brand colour cannot move

Often the palette is fixed and the answer has to come from somewhere else. Add a second signal: an exclamation icon on the error, a tick on the success, an underline on the link, a dashed line for the forecast series, a hatch pattern on the highlighted map region, the word "Overdue" in the status cell. You can also change the surrounding lightness rather than the colour itself — darkening a badge background is often more acceptable to a brand owner than shifting the brand colour, and it moves the ratio just as much.

Checking the whole thing, not just the pair

This tool judges one foreground against one background. A real screen has a dozen such pairs plus charts, states and hover styles, and the combination is what a user meets. Once individual pairs are sound, take a screenshot of the assembled page into the simulator and look at it whole — problems between two colours that never touch a text pair only appear at that level.

Questions people ask

The contrast barely changes across the four states. Is the calculation wrong?

It is right. Colour vision deficiency alters the chromatic channels while leaving luminance largely intact, and contrast ratio is defined purely from relative luminance. A pair that passes at normal vision will pass in the simulated states almost every time. The risk this tool is designed to surface is in the colour distance column, where two colours that are clearly different to you can converge to nearly the same value.

Can I use the suggested colour as-is?

As a starting point. It keeps the original hue and moves lightness towards black or white in 2% steps until the target is met, so it stays in family with what you had. In place, surrounded by other colours and rendered in a real typeface at a real weight, it will read slightly differently — check it in context and nudge it if needed.

What is the colour distance actually measuring?

Euclidean distance in CIELAB between the two simulated colours, sometimes written as Delta E 76. It is the simplest of the CIELAB distance formulas and it is not perceptually uniform everywhere — it overstates differences in saturated blues in particular. As a threshold indicator around the value of 12 it is reliable enough; do not read fine distinctions into a change from 18 to 20.

Does the severity setting match the research?

Only approximately. The full setting uses the published matrices exactly. The 60% and 30% settings interpolate linearly between those matrices and the identity matrix, which moves in the right direction but is not the same as the severity-specific matrices in the original paper. Judge borderline cases at full severity.

Related