WCAG 2.4.13: Focus Appearance
2.4.7 says a focus indicator must exist. This criterion says what a good one looks like: at least as large as a 2 CSS pixel thick perimeter around the component, changing the pixels with at least 3:1 contrast between the focused and unfocused states. A faint 1px ring technically satisfies AA; this AAA criterion demands an indicator you cannot miss.
The success criterion, in full
When the keyboard focus indicator is visible, an area of the focus indicator meets all the following: it is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and it has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
Exceptions: the focus indicator is determined by the user agent and cannot be adjusted by the author, or the focus indicator and the indicator’s background color are not modified by the author.
Two tests, both required: a sizefloor (the area of a 2px band around the component’s border) and a change-contrastfloor (the indicator pixels must differ by 3:1 between states). The exceptions only apply while you leave the browser’s default focus rendering — and its background — completely untouched.
Who this helps and why
Every sighted keyboard user depends on the focus indicator the way a mouse user depends on the cursor. For people with low vision, the difference between a hairline ring and a thick, high-contrast one is the difference between using the keyboard comfortably and hunting for their place after every keypress.
Low-vision keyboard users
A 1px pale ring disappears against busy backgrounds and at high zoom. A 2px+ high-contrast indicator stays findable at a glance.
People with motor disabilities
Keyboard, switch, and alternative-input users track focus continuously; a weak indicator forces slow, error-prone re-orientation.
Users with attention or memory difficulties
An unmistakable focus position reduces the cognitive cost of remembering where you were between keystrokes.
Everyone in poor conditions
Glare, low-quality displays, and dark rooms shrink effective contrast for all users — strong indicators survive real-world viewing.
The two requirements, unpacked
1. Size: the 2 CSS pixel perimeter
Picture the component in its unfocused state and trace a band 2 CSS pixels thick along its border. The total area of that band is the minimum area your focus indicator must change. The rule is deliberately shape-agnostic: you do not have to draw an outline — a thick background change, a bold border, or a combination can qualify — but the changed pixels must add up to at least that perimeter’s area. The practical shortcut: a solid outline of 2px or more around the whole component always passes the size test. Small partial indicators — an underline only, a corner tick, a 1px hairline — usually do not.
2. Contrast: 3:1 between the two states
Compare the indicator’s pixels in the focused state against the same pixels in the unfocused state. White page, focused element gains a #005fcc ring: those pixels went from white to dark blue — a huge change, pass. Light-gray border darkening to medium gray on focus: the before/after ratio may be under 3:1 — fail, no matter how thick the border is. Both tests must pass simultaneously.
The exceptions
Default browser focus rings are exempt — but only while genuinely default. If the user agent draws the indicator and you cannot adjust it, or if you have modified neither the focus indicator nor the background it renders on, the criterion does not apply. Add any :focus styling, or place default rings over backgrounds you styled, and the exemption is gone.
2.4.7, 1.4.11, and 2.4.13: three layers of focus visibility
2.4.7 Focus Visible — Level AA
A visible focus indicator must exist for every keyboard- operable element. Sets no bar for how large or strong it is — removing outlines with outline: none and adding nothing back is the classic failure.
1.4.11 Non-text Contrast — Level AA
The visual information identifying states — including focus indicators — needs 3:1 contrast against adjacent colors. A pale yellow ring on a white page fails here.
2.4.13 Focus Appearance — Level AAA
Adds the size floor (area of a 2px perimeter) and the state-change contrast floor (3:1 between focused and unfocused pixels). The complete specification of a robust indicator.
And once the indicator looks right, make sure it can be seen: 2.4.11 and 2.4.12 Focus Not Obscured keep sticky headers and overlays from covering the element the indicator is drawn on.
Code examples
A global focus style that clears the AAA bar
One well-chosen :focus-visible rule covers the whole site: 2px+ thickness satisfies the size test, and a dark ring on light backgrounds (or vice versa) satisfies the change contrast.
/* ✗ Common failures */
:focus { outline: none; } /* fails 2.4.7 outright */
:focus { outline: 1px dotted #ccc; } /* too thin, too faint */
/* ✓ Thick, high-contrast, keyboard-only indicator */
:focus-visible {
outline: 3px solid #005fcc; /* ≥2px thick perimeter: size ✓ */
outline-offset: 2px; /* separates ring from the edge */
}
/* On white (#fff), pixels change #fff → #005fcc ≈ 7.2:1 — contrast ✓ */A two-color ring that works on any background
Sites with mixed light and dark surfaces can pair an outline with a contrasting box-shadow halo, so the state change stays ≥3:1 wherever the component sits.
/* ✓ Dark ring + light halo: visible change on light and dark */
:focus-visible {
outline: 2px solid #0b3d91; /* inner, dark ring */
box-shadow: 0 0 0 5px #ffffff, /* light separator */
0 0 0 7px #0b3d91; /* outer, dark ring */
}Why background-only changes often fail
A subtle background tint on focus can meet the size test (it changes the whole component area) but fail contrast — the pixels barely change. Measure the before/after ratio, or just use a ring.
/* ✗ #f8f9fa → #e9ecef is ≈1.1:1 — imperceptible state change */
.button:focus-visible { background: #e9ecef; }
/* ✓ Strong pixel change plus a ring */
.button:focus-visible {
background: #003366; /* light → dark: well over 3:1 */
color: #ffffff;
outline: 2px solid #003366;
outline-offset: 2px;
}Common failures
- outline: none with no replacement — fails 2.4.7 before 2.4.13 is even in question.
- A 1 CSS pixel outline: half the required perimeter thickness, so the indicator area falls short of the size minimum.
- Low-contrast state changes — a light gray border darkening slightly, or a faint background tint — under 3:1 between the two states.
- Indicators on only one edge (an underline or left bar) whose total changed area is smaller than a 2px perimeter of the component.
- A default browser focus ring placed over author-styled dark backgrounds it was never designed for — modifying the background voids the exception.
- Focus styles applied on :hover styling assumptions — looks fine for mouse users but was never checked in the keyboard-focused state.
- Relying on the text caret alone in custom widgets — a caret is not an indicator sized to the component's perimeter.
- Inconsistent overrides: a design-system ring on buttons, but bare inputs and custom controls that fall back to nothing.
How to test for 2.4.13
- 1
Tab to every interactive element
Buttons, links, inputs, custom widgets — each must show its focus state. Note any element whose indicator looks thin, faint, or partial; those are your measurement candidates.
- 2
Measure the indicator's thickness and coverage
Zoom in with a screen magnifier or take a screenshot and inspect at pixel level. An enclosing outline of 2 CSS px or more passes the size test outright; partial or hairline indicators need their changed area compared against the 2px-perimeter area.
- 3
Sample the same pixels in both states
Screenshot the component unfocused and focused, use a color picker on the indicator pixels in each, and compute the contrast ratio between the two colors. It must be at least 3:1.
- 4
Repeat on every background the component sits on
The same ring can pass on white and fail on a dark hero section or over imagery. Test each themed surface — and dark mode — separately.
- 5
Check the exceptions honestly
Only skip a component if the browser draws its focus ring and neither the ring nor the background beneath it is touched by your CSS. Any author styling of either pulls the component back into scope.
A contrast checker does the ratio math for you — use the Contrast Checker with the before/after pixel colors, and log results in the WCAG 2.2 checklist.
Frequently asked questions
What does WCAG 2.4.13 Focus Appearance require?
When the keyboard focus indicator is visible, an area of the indicator must meet two conditions at once: it must be at least as large as the area of a 2 CSS pixel thick perimeter drawn around the unfocused component (or sub-component), and those pixels must have a contrast ratio of at least 3:1 between the focused and unfocused states. In short: the focus indicator must be big enough to see and must change the pixels enough to notice. It is a Level AAA success criterion introduced in WCAG 2.2.
What does 'the area of a 2 CSS pixel thick perimeter' mean in practice?
Imagine tracing a 2px-wide band along the border of the component in its unfocused state — the area of that band is your minimum. A solid outline that is at least 2 CSS pixels thick and encloses the whole component always meets the size test, which is why 'outline: 2px solid' (or thicker) around the element is the canonical implementation. Indicators that are smaller in total area — a 1px outline, a short underline, or a change confined to one small corner — can fail because they do not add up to that perimeter's area.
What does the 3:1 contrast requirement compare?
It compares the same pixels between the two states: the colors of the indicator's pixels when the component is focused versus the colors of those pixels when it is not focused. A dark blue ring appearing on a white background changes those pixels from white to dark blue — far more than 3:1, so it passes. A subtle change, like a light gray border becoming a slightly darker gray, may not reach 3:1 and fails even if the ring is thick enough. This is a change-of-state contrast, distinct from 1.4.11's requirement that a visible indicator contrast with adjacent colors.
What are the exceptions in 2.4.13?
There are two. First, if the focus indicator is determined by the user agent and cannot be adjusted by the author — for example, a native control whose focus ring the browser draws and your code cannot restyle. Second, if the focus indicator and the indicator's background color are not modified by the author — meaning you left the browser's default focus rendering completely alone. The moment your CSS changes focus styles or the backgrounds they draw against, you own the result and the size and contrast requirements apply.
How does 2.4.13 relate to 2.4.7 Focus Visible and 1.4.11 Non-text Contrast?
2.4.7 (Level AA) only requires that some visible focus indicator exists — it sets no minimum for size or strength, so a faint 1px ring technically passes it. 1.4.11 (Level AA) requires visual information used to identify UI states, including focus indicators, to have 3:1 contrast against adjacent colors. 2.4.13 (Level AAA) goes further than both: it dictates a minimum indicator area (the 2px perimeter) and a minimum 3:1 change between focused and unfocused states. Think of 2.4.7 as 'there is one', 1.4.11 as 'you can see it against its surroundings', and 2.4.13 as 'it is big and obvious'.
Was Focus Appearance a Level AA criterion at some point?
In draft versions of WCAG 2.2 it was proposed at Level AA, but the requirements proved hard to specify simply, so the final specification split the concern: focus obscuring became 2.4.11 (AA) and 2.4.12 (AAA), while Focus Appearance shipped as 2.4.13 at Level AAA. That history is worth knowing because the working group considers strong focus indicators genuinely important — a thick, high-contrast :focus-visible outline is cheap to implement and is widely treated as best practice even by teams that only target AA.
Related Success Criteria
A mechanism is available to bypass blocks of content that are repeated.
Web pages have titles that describe topic or purpose.
Focusable components receive focus in an order that preserves meaning.
The purpose of each link can be determined from link text or context.
More than one way is available to locate a page within a set of pages.