2.4.13 Focus Appearance

Level AAA · added in WCAG 2.2

A visible focus indicator must be at least as large as a 2 CSS pixel thick perimeter around the element. Its pixels must also change by a contrast ratio of at least 3:1 between the focused and unfocused states.

Who it helps

People with low vision and keyboard users with attention difficulties need a focus indicator that is big and bold enough to spot quickly. A thin or faint ring is easy to lose on a busy page.

How to meet it

Use a solid outline at least 2 CSS pixels thick that goes all the way around the element.
Pick an outline color with at least 3:1 contrast against the colors it replaces, usually the page background around the element.
Avoid relying on a subtle background color change; most light tints fall far below 3:1 against white.
Exceptions: it doesn't apply when the browser draws an indicator you can't change, or when you haven't modified the indicator or its background.
Level AAA isn't required by most laws or policies, which point to AA. It's still worth meeting, because a strong focus style helps every keyboard user.

Examples

Fails:A 1px outline is only half the area of a 2px perimeter

.button:focus-visible {
  outline: 1px solid #1a5fb4;
}

Fails:A faint background change: #fff to #f0f0f0 is about 1.1:1

.menu-item {
  background: #fff;
}
.menu-item:focus-visible {
  outline: none;
  background: #f0f0f0;
}

Passes:A 2px solid outline: white to #1a5fb4 is a 6.29:1 change

body { background: #fff; }
.button:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 2px;
}

Passes:A 3px inset outline in #111 on white menu items, an 18.9:1 change

.menu-item {
  background: #fff;
}
.menu-item:focus-visible {
  outline: 3px solid #111;
  outline-offset: -3px;
}

Can a scanner detect this?

axe-core has no rule for focus appearance. Measuring indicator area and comparing focused and unfocused pixels needs screenshots of each state. You need to tab to each control and check the indicator's thickness and contrast by hand.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Drawing the indicator on one side only, such as a 2px bottom border, which is smaller than a full 2px perimeter.
Using a box-shadow glow that fades out, so few pixels actually reach the 3:1 change.
Choosing an outline color close to the button color while measuring contrast against the wrong background.
Assuming 2.4.7 Focus Visible already covers size and contrast, when it only requires some visible indicator.

Official W3C explanation of 2.4.13

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026