Focus State Contrast Checker

The two contrast rules every focus ring must clear

A focus indicator sits at the boundary between two things: the element it marks (a button, an input, a link) and the page area around that element. WCAG 1.4.11 Non-text Contrast requires the indicator to be visible against both. That means two separate 3:1 ratios, not one.

The mistake almost every product makes is testing only the focus ring against the page background. A bright yellow ring at 1.8:1 against a yellow button is invisible to a sighted keyboard user even if it clears 9:1 against the white page. Same accessibility failure, opposite direction.

WCAG 2.4.13: the new focus appearance rule

Added in WCAG 2.2 and shipped in October 2023, success criterion 2.4.13 Focus Appearance goes beyond the contrast rule. It requires:

• The focus indicator is at least as thick as a 2 CSS pixel solid line around the element, or covers the equivalent area.
• The focus indicator must have at least 3:1 contrast against the unfocused state of the element.
• The focus indicator cannot be hidden by author-created content (no overlapping tooltips obscuring the ring).

2.4.13 is an AA-level criterion, meaning it applies to all new content built to WCAG 2.2. Public sector bodies in the UK and EU must already meet it under the updated PSBAR regulations.

How focus rings actually fail in production

The "outline: none" reset

The most common single failure. A team adds outline: none to remove the default browser focus ring without supplying a replacement. This is a hard fail on 2.4.7 Focus Visible regardless of contrast. If you remove the default, you must provide an alternative.

/* Bad */
button:focus { outline: none; }

/* Good */
button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

The blue-on-blue button

Brand button in brand blue. Focus ring in the default browser blue. Visually almost identical. Test: focus ring colour against the button colour. If under 3:1, the ring is functionally invisible in the focused state. Fix: a contrasting focus colour, or use outline-offset to push the ring outside the button so the relevant test is ring against the page background.

Outline outside, but no offset

A ring drawn flush with the element's edge sits half on the element and half on the background. Under 1.4.11 the ring must clear 3:1 against both, simultaneously. Adding outline-offset at 2 px or more moves the ring into clear page space, where you only need to clear contrast against one colour.

Coloured backgrounds and gradients

Focus rings on dark hero sections or coloured cards. A focus ring that passes 3:1 against the page background can fail against a feature section's coloured background. The fix is usually a scoped focus colour for that section, or a two-tone ring (inner light, outer dark) that always contrasts against something.

Disabled and read-only states

WCAG technically exempts disabled controls from contrast requirements. But read-only controls are not disabled and must still meet the focus rules. A read-only input that uses muted styling will often have a focus ring at insufficient contrast.

Defensible focus ring patterns

The two-tone ring

An inner ring in white and an outer ring in a saturated colour. This always contrasts against something, regardless of whether the underlying background is light or dark. The pattern used by GOV.UK and several enterprise design systems.

button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #FFDD00;
}

The offset ring

Standard outline pushed out by 2 to 4 pixels so it sits clearly in page space. Simpler than the two-tone ring, works well when your page background is consistent.

button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

Background fill on inputs

For inputs and select elements, an alternative is to change the field's background colour on focus rather than relying on an outline. This satisfies 1.4.11 as long as the new background colour differs from the resting state by at least 3:1.

Frequently asked questions