The focus indicator must be large enough (2.4.13)
Rule
focus-appearance· Component patterns (best practice) · impact minor · Live only (static → incomplete)
Why it matters
WCAG 2.4.7 (AA) only requires that a focus indicator EXISTS; 2.4.13 (AAA) adds that it be big enough to notice — at least the area of a 2px-thick outline around the whole control — AND have 3:1 contrast against adjacent colors. The engine reads the real focused-state style captured while Tabbing the live page: a hairline (1px) solid outline with nothing to compensate fails the area prong, and a ≥2px outline whose color reaches under 3:1 against the surrounding (parent) background fails the contrast prong. A box-shadow, a ::before/::after or :focus-within ring, the UA "auto" ring, or a whole-element background/border change on focus all satisfy the minimum and are not flagged.
How to fix
Use an outline of at least 2px (:focus-visible { outline: 2px solid … }) in a color with ≥3:1 contrast against the background it draws over, or pair a thin outline with a box-shadow / an offset so the total indicated area meets the 2px-perimeter minimum.
Example
<style>a:focus-visible{outline:1px solid blue}</style><a href="/x">Link</a>
<style>a:focus-visible{outline:2px solid blue}</style><a href="/x">Link</a>
WCAG success criteria
2.4.13 Focus Appearance — Level AAA
The keyboard focus indicator must be large enough (at least the area of a 2 CSS-px thick perimeter of the component) and have at least 3:1 contrast between its focused and unfocused states, so it is easy to see which control is focused.
Standards
This rule contributes to the following standards:
WCAG AAA