Color blindness check

WCAG 1.4.1 is not about contrast. Two colors can clear 4.5:1 and still be indistinguishable to one man in twelve. This finds those pairs and separates them.

First color

Second color

Normal vision

What you see

Deuteranopia

Green looks like red

collapses · 0.07

Protanopia

Red looks like green, and darker than it should

collapses · 0.10

Tritanopia

Blue and yellow collapse together

stays apart · 0.34

These two collapse into one color

Anywhere these carry meaning on their own, a red dot against a green one, a positive line against a negative one, that meaning is lost. WCAG 1.4.1 is the criterion for this, and it is not about contrast: both colors can clear 4.5:1 against the page and still fail here.

Dichromatic vision keeps lightness discrimination, so the fix is to separate them in lightness. This is the nearest color that stays apart under all three deficiencies at once, with your hue held exactly.

Change the second

Simulated with the Machado, Oliveira and Fernandes (2009) model at full severity, applied in linear RGB. Distances are OKLab delta E, the same measure this site uses for how gentle a fix is.

Why this rule exists

Two colors can pass contrast and still be the same colorContrast is measured against the background. Whether two colors are distinguishable from each other is a different rule, and the one that catches red and green.

The other tools

Contrast checker

Two colors, the ratio, and the nearest color that passes.

Open

Palette matrix

Every pair in your palette, checked at once.

Open

Accessible ramp

One brand color, a full scale, every step measured.

Open

Focus and UI check

Fifteen interface parts, and which of them the 3:1 rule exempts.

Open