2.4.13 Focus Appearance

1. What is the goal of this criterion?

Imagine navigating a website with the keyboard – but the focus is so faint that you keep losing your place. Like a flashlight in the dark so dim you can’t tell where it’s pointing.

People with low vision, people with motor disabilities and anyone who uses the keyboard for practical reasons depend on clearly visible focus. The goal of WCAG Success Criterion 2.4.13 is straightforward: keyboard focus must not only be present, it must be large and high-contrast enough to be easy to see.

2. What exactly does it require?

This criterion is about how the focus indicator looks. When it is visible, an area of the indicator must meet two requirements at the same time:

Minimum size: the area is at least as large as a 2 CSS pixel thick perimeter around the unfocused component or sub-component. It doesn’t have to be an outline – other shapes are fine as long as they cover at least the same area. For a rectangle, that’s roughly 4 × width + 4 × height; for a 120 × 40 pixel button, about 640 square pixels.

Contrast: the same pixels have a contrast ratio of at least 3:1 between the focused and unfocused states. So it’s about the change between the two states, not the contrast against the background.

Exceptions apply when the focus indicator is determined by the browser and can’t be adjusted by you, or when you haven’t modified either the indicator or its background color – an unchanged default browser focus is not covered by this criterion.

How it fits in: Focus Visible at Level AA already requires a visible focus. 2.4.13 adds concrete values for size and contrast. The contrast of controls and their states against their surroundings is also covered by Non-text Contrast.

A simple example: on focus, a button gets a solid 2-pixel dark blue outline it didn’t have before, on a white background. Size and change in contrast both check out – the criterion is met.

3. Why does it matter for accessibility?

Imagine filling in a form with the keyboard, but the focus is so weak that you can’t tell which field you’re in. Frustrating for anyone – and simply impossible for people with low vision.

A clearly visible focus indicator improves accessibility because it:

• helps people with limited vision find the current focus
• supports people with motor disabilities who depend on the keyboard
• makes orientation easier for all keyboard users
• stays recognizable in difficult lighting, such as sunlight on the screen
• keeps working with magnification or custom display settings

And finally: a clearly visible focus makes interaction more efficient and less tiring for everyone.

4. How to meet the criterion

The quality of your focus indicators decides whether a website is genuinely usable with a keyboard. Here are some proven tips:

Ground rules for good focus indicators:

• A solid outline of at least 2 pixels drawn outside the element is the simplest safe solution – placed outside, it is always larger than the required area.
• Make sure the contrast between focused and unfocused states is at least 3:1.
• Make sure the indicator isn’t hidden or clipped, for example by overflow: hidden on a parent element.
• Use outline and outline-offset; outlines stay visible in forced colors mode (such as Windows contrast themes).
• Use :focus-visible so the indicator reliably appears for keyboard users.

Technical implementation:

.button:focus-visible {
  outline: 2px solid #0050a0;
  outline-offset: 2px;
}

For complex components:

• For components with sub-components, such as items in an open menu or cells in a grid, the area is measured on the focused sub-component.
• Shadow and glow effects outside the element don’t count when determining the perimeter.
• Test different display sizes and color schemes, including dark mode.

Common mistakes to avoid:

• Don’t just set outline: none without providing an equivalent alternative.
• Thin underlines or subtle color shifts usually aren’t enough: a color change only passes if it’s large enough and the same pixels change by at least 3:1.
• Don’t forget focus indicators on custom-built components.

5. Why this criterion matters for businesses

2.4.13 is a Level AAA criterion from WCAG 2.2 and not legally required under the European Accessibility Act or its German implementation, the BFSG – the underlying standard EN 301 549 requires WCAG 2.1 Level AA. As a concrete benchmark for good focus styles, it’s still very useful, for example as a rule in your design system.

1. Better usability for everyone

Clearly visible focus indicators make keyboard navigation easier – not just for people with disabilities. Experienced keyboard users find their way faster, too.

2. Clear rules for your design system

Instead of debating focus styles for every component, 2.4.13 gives you measurable values. Once they’re part of your design system, they save discussions and rework – and the required criterion 2.4.7 is covered along the way.

3. Brand perception and inclusion

Companies that think about everyone, even in details like focus indicators, show that they take accessibility seriously – rather than just ticking a box.

This section is general information, not legal advice.

6. The success criterion in the W3C’s words

Success Criterion 2.4.13 Focus Appearance (Level AAA)

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
• 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.

Note 1: What is perceived as the user interface component or sub-component (to determine the perimeter) depends on its visual presentation. The visual presentation includes the component’s visible content, border, and component-specific background. It does not include shadow and glow effects outside the component’s content, background, or border.

Note 2: Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.

Note 3: Contrast calculations can be based on colors defined within the technology (such as HTML, CSS, and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.

In short: a visible focus indicator must cover at least the area of a 2-pixel perimeter and change by a contrast of at least 3:1 between focused and unfocused states – except for an unmodified browser default.