Level AAAWCAG 2.2

2.4.13 Focus Appearance

The keyboard focus indicator has an area at least as large as a 2 CSS pixel thick perimeter, and a contrast ratio of at least 3:1 against adjacent colors in both its focused and unfocused states.

Last reviewed: September 9, 2026

Understanding 2.4.13

2.4.7 Focus Visible only requires that some focus indicator exists; it says nothing about how big or how perceptible that indicator has to be. 2.4.13 closes that gap by setting quantitative minimums for size and contrast, addressing the real-world problem of focus indicators that technically exist but are too thin or too low-contrast for low vision users, users with tremor, or anyone in a bright environment to actually notice.

How to Meet It

Use a focus indicator that is at least 2 CSS pixels thick around the entire focused component (a solid outline with `outline-width` of 2px or more is a common approach), and confirm it has a contrast ratio of at least 3:1 against the adjacent background colors in both the focused and unfocused states of the component. Avoid default browser outlines that some browsers render very thin or that some resets remove entirely, and avoid relying solely on a subtle color or shadow change with insufficient contrast.

Code Examples

INCORRECT

a:focus, button:focus {
  outline: 1px dotted #999; /* Thin and low-contrast against a white background */
}

CORRECT

a:focus-visible, button:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px; /* Thick, high-contrast indicator meeting the minimum size and 3:1 contrast */
}

Frequently Asked Questions

How is this different from 2.4.7 Focus Visible?

2.4.7 (AA) only requires that a keyboard focus indicator is present in some form. 2.4.13 (AAA) additionally specifies quantitative minimums for that indicator's size and color contrast, so a site could pass 2.4.7 with a focus style that is technically visible but still fail 2.4.13 for being too thin or too low-contrast.

Does outline-offset count toward the required thickness?

The offset itself is just a gap between the component and the outline; what matters is the thickness of the visible outline stroke itself, which needs to be at least 2 CSS pixels. A larger offset can improve perceivability by separating the indicator from the component's own edge, but it doesn't substitute for outline thickness or contrast.

Related Success Criteria

2.4.1 Bypass Blocks 2.4.2 Page Titled 2.4.3 Focus Order 2.4.4 Link Purpose (In Context)

Quick Facts

Criterion2.4.13
LevelAAA
IntroducedWCAG 2.2

Automate Compliance

AccessiSight automatically scans and identifies 2.4.13 issues in your codebase.

Try Scanner Free