Focus Appearance in WCAG 2.2: What 2.4.13 Actually Demands of Your Outline

Tab through a storefront with a keyboard and watch the focus indicator. On a surprising number of sites it is a faint one-pixel dotted line, or a subtle color shift, or nothing at all, because the theme removed the outline for aesthetics and replaced it with nothing measurable.

The rule, stated plainly

Success Criterion 2.4.13, Focus Appearance, is Level AAA in WCAG 2.2, and it is the one that makes a visible focus indicator measurable. It requires the focus indicator to have an area at least as large as a 2 CSS pixel thick perimeter of the unfocused component, and a contrast ratio of at least 3 to 1 against adjacent colors. The older criterion, 2.4.7 Focus Visible, is Level A and only requires that the indicator be visible. 2.4.13 makes visible measurable, and the measurement is the part teams keep failing. Its sibling, 2.4.11 Focus Not Obscured (Minimum), is Level AA and covers a different failure: a sticky header or cookie banner hiding the focused element entirely.

The 3 to 1 contrast is against the adjacent colors, not against the page background alone. An outline that contrasts with the page but blends into the button it surrounds fails. The 2 pixel perimeter is a minimum area, not a minimum thickness on one side: a 1 pixel outline on all four sides of a small button can fail where a 2 pixel outline on two sides passes, because the area is what counts. These are the details that turn a visible indicator into a passing one, and they are the details a screenshot review never catches.

Why themes keep shipping broken outlines

The usual cause is a global CSS reset that removes outlines, followed by a focus style that was designed on a white background and never tested on the actual components. A blue outline on a blue button, a dark outline on a dark header, an outline that sits inside a component with overflow hidden and gets clipped to nothing. The second cause is the focus style that only exists on links and buttons, while custom components, divs with click handlers, and third-party widgets get nothing at all. If it is focusable, it needs an indicator, and if the indicator is clipped or low contrast, it fails the same way a missing one does.

The test takes ten minutes and no tools beyond a keyboard. Tab through the homepage, product page, cart, and checkout, and screenshot every focus stop. Measure the outline thickness and check the contrast against the adjacent color, not the page. Then do it again in dark mode, because a focus style that passes on white often fails on a dark header. For the contrast side of the same problem, see Non-Text Contrast: 3 to 1 on Icons and Focus, and for the obscured variant, Watching Accessible Names on Accordion FAQs.

The fix that sticks

Define one focus style in the design system, not one per component: a 2 pixel solid outline with a 2 pixel offset, in a color that contrasts 3 to 1 against both light and dark surfaces, or two styles, one per theme. Enforce it with a lint rule that flags outline none without a replacement, and add a focus-appearance assertion to the visual regression suite. A focus indicator is infrastructure. Treat it like any other shared component and it stops breaking one page at a time.

Frequently asked questions

What is the minimum focus indicator size under WCAG 2.2?

Success Criterion 2.4.13 requires an area at least as large as a 2 CSS pixel thick perimeter of the unfocused component. It is a minimum area, not a thickness on one side, so a 1 pixel outline all around a small control can still fail.

What contrast ratio does a focus indicator need?

At least 3 to 1 against adjacent colors. That means against the colors next to the indicator, including the component it surrounds, not just against the page background.

Does 2.4.7 Focus Visible still matter?

Yes, it is the Level A baseline that the indicator must be visible at all. 2.4.13 is the Level AAA rule that makes visible measurable with the area and contrast requirements, and 2.4.11 is the Level AA rule that the indicator must not be hidden behind a sticky header.

Why do our focus outlines disappear in dark mode?

The focus color was chosen against a white background and never tested on dark surfaces. Define the focus style per theme, or pick a color with 3 to 1 contrast against both, and test every focus stop in both modes.