Focus and UI check
Text is not the only thing with a contrast requirement, and not everything on this page has one. Check any interface part against the 3:1 that WCAG 1.4.11 asks for, including the three it deliberately exempts.
Measured against the background behind it.
| Non-text contrast1.4.11, level AA. Every control, border, icon and graphic that carries meaning. | 3:1 | Fails |
| Focus appearance2.4.13, level AAA. The stricter rule for focus indicators, which also asks for a minimum indicator area. | 3:1 | Fails |
The nearest color that reaches 3:1
Moving the element only, hue held exactly.
Non-text elements need 3:1, not the 4.5:1 body text needs. Checking a focus ring against the 4.5:1 figure is the commonest way a perfectly legal indicator gets redesigned for no reason, and the exemptions are the second commonest.
Why this rule exists
The other tools
Contrast checker
Two colors, the ratio, and the nearest color that passes.
Palette matrix
Every pair in your palette, checked at once.
Accessible ramp
One brand color, a full scale, every step measured.
Every passing color
Not one fix. The whole range of your color that clears the rule.
Color blindness check
Two colors that pass contrast can still be the same color.