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.

The element

What it sits on

What is it

Controls3:1

Indicators3:1

Graphics3:1

Exemptno requirement

Focused button

2.47to 1

Measured against the background behind it.

What this element passes and fails
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.

3.01:1

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 parts of your interface that need 3:1, and the parts that need nothingWCAG 1.4.11 asks for 3:1 on controls, borders and meaningful graphics. It also exempts several things outright, and that is where the wasted work happens.

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

Color blindness check

Two colors that pass contrast can still be the same color.

Open