WCAG 2.4.13 — Focus Appearance

What this requires

The focus indicator must satisfy minimum size and contrast requirements. Specifically:

An area at least as large as a 2 CSS-pixel-thick perimeter of the focused control, or a 1 CSS-pixel-thick line that wholly surrounds the control twice (i.e. the equivalent of a 2px ring).
The contrast ratio between focused and unfocused states is at least 3:1.
The focus indicator is not entirely obscured (overlap with 2.4.12).

How AI coding tools fail this

When asked for "a subtle focus ring", AI tools generate outline: 1px solid currentColor with low contrast — say, a light grey ring on a white button. The ring is technically present. It is also functionally invisible.

The second pattern: focus rings that change colour to match the button background, so the visible ring at "blue button focused" is a slightly darker blue. The 3:1 contrast between focused and unfocused states isn't there.

The third: rings drawn entirely inside the element (outline-offset: -2px) where the background is the same colour as the ring. The ring disappears at the edges where it should be most visible.

Failing examples

A 1px ring with low contrast:

:focus-visible {
  outline: 1px solid #d4d4d8;
  outline-offset: 2px;
}

Inside-ring with matching colour:

<button
  className="bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-inset"
>
  Continue
</button>

Passing examples

A high-contrast 2px ring with an offset so it stands clear of the element:

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

Where --ring is a token chosen to clear 3:1 against any background the focused element sits on:

:root {
  --ring: oklch(0.55 0.18 240); /* clears 3:1 on both white and dark bg */
}

Or, on coloured backgrounds, double-up with a contrasting outer ring:

<button className="bg-primary text-primary-foreground focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background">
  Continue
</button>

Edge cases

2 CSS pixels is the minimum perimeter thickness. A 2px ring all around the element passes; a 4px partial bracket on one side might not.
Contrast is measured between focused and unfocused states, not between the ring and the page background. The ring colour just has to make the focused state distinguishably different from the unfocused state — but in practice, contrast against the background is the easier-to-explain version.
Outline-offset matters. The ring needs to actually appear; a negative offset that clips it against the element edge can break the contrast measurement.
AAA target. AA's 2.4.7 just requires "visible"; AAA's 2.4.13 sets the numeric minimum.
High-contrast OS themes override author styles. The criterion is satisfied if the indicator works in the typical author-styled case.

How Jeikin handles this

The design-rule layer evaluates focus-ring tokens against the 2 CSS pixel and 3:1 contrast thresholds. The dashboard records each finding against 2.4.13 for AAA-targeting projects. axe-core flags absent or zero-pixel focus rings as the baseline check.

References

W3C — Understanding 2.4.13 Focus Appearance (opens in new tab)