Contrast answers a different question
Contrast ratio compares one color against the one behind it. That is the right measure for whether text is readable, and it is what almost every tool on the web reports.
It is the wrong measure for a different and very common situation: two colors that have to be told apart from each other. A red dot meaning failed and a green dot meaning passed are not being read against the page. They are being read against one another.
Both clear AA for body text, if only just. Here they are, each measured the way a contrast checker would measure it.
Two passes. Nothing in a contrast report will ever mention these again. And to a viewer with deuteranopia they are the same muddy olive, which means the interface has stopped communicating.
The criterion is 1.4.1, and it is level A
WCAG 1.4.1 Use of Color says color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
It sits at level A, the lowest of the three. That placement works against it: teams checking themselves against AA tend to assume the A criteria were cleared long ago, and 1.4.1 is the one that quietly was not, because nothing automated flags it.
Who this affects
| Type | What collapses | Roughly |
|---|---|---|
| Deuteranopia | Green toward red | 1 in 16 men |
| Protanopia | Red toward green, and darker | 1 in 100 men |
| Tritanopia | Blue and yellow | Rare, and not sex-linked |
Taken together, around one man in twelve and one woman in two hundred has some form of color vision deficiency. On any product with a real user base, red-green signalling is failing for a group larger than most teams' entire mobile Safari cohort.
The fix is lightness
This is the useful part, and it follows from how dichromatic vision actually works. A dichromat is missing one of three cone types, so one hue axis collapses. Lightness discrimination is unaffected.
So two colors that differ in lightness stay distinguishable no matter which axis collapsed. Two colors that differ only in hue do not. The red and green above are nearly the same lightness, which is exactly why they merge.
In OKLCh you can move lightness while holding hue exactly, so the green stays the green your brand uses and simply sits at a different step. That is the same move this site makes for a failing contrast pair, run against a different target.
Color blindness checkSimulates all three deficiencies and returns the nearest color that stays apart under every one of them at once.Fixing one deficiency and breaking another is the trap worth knowing about. Separating a pair for deuteranopia can push it together for tritanopia, so the search has to optimize the worst case across all three rather than the one you happened to test.
And still do not rely on color alone
Separating two colors in lightness makes them distinguishable. It does not make them meaningful, and 1.4.1 is about meaning.
- —Put a shape with the color. A tick and a cross carry the meaning without any color at all.
- —Label the thing. A legend beside a chart series beats any amount of palette tuning.
- —Use position or pattern in charts, where a series can be dashed rather than merely a different color.
- —Never let a red border be the only sign that a field failed validation. Say what is wrong, in words, near the field.
The color work is worth doing anyway. It is what makes the interface legible at a glance for everyone, including the viewer who is fine on color and simply looking at a dim screen in bright sun.
Common questions
- Can two colors pass WCAG contrast and still be inaccessible?
- Yes. Contrast ratio measures each color against its background, not against the other color. A red and a green that both clear 4.5:1 on white can be indistinguishable to a viewer with deuteranopia, which is a failure of WCAG 1.4.1 Use of Color rather than of the contrast criteria.
- What is the most common form of color blindness?
- Deuteranopia, where green shifts toward red. It affects roughly one man in sixteen. Protanopia is less common at around one in a hundred men, and tritanopia, which collapses blue and yellow, is rare and affects all genders equally.
- How do I make two colors distinguishable for color blind users?
- Separate them in lightness rather than hue. Dichromatic vision loses a hue axis but keeps lightness discrimination, so two colors at clearly different lightness stay distinct under every deficiency. Holding hue and moving lightness in OKLCh keeps each color recognizably itself.
- Does WCAG ban red and green together?
- No. It bans color as the only channel carrying the information. Red and green are fine when a shape, a label or a position carries the same meaning alongside them.