Skip to main content
wcag22aa.org

Focus Appearance

WCAG 2.2 Success Criterion 2.4.13, Level AAA. The focus indicator itself must be big enough and high-contrast enough to actually see — this is about how the indicator looks, not what covers it.

By Levi Whitted Last reviewed: Published:

What it requires

In plain terms: when something has keyboard focus, the indicator you draw has to be both large enough and high-contrast enough that a user can actually find it (Source: W3C, Understanding SC 2.4.13 ) .

The two tests: area and contrast

1. Minimum area

The indicator must cover at least the area of a 2 CSS pixel thick line tracing the full perimeter of the unfocused control. For a rectangle of width w and height h, that target area is roughly 4 × (w + h) square CSS pixels. A solid 2 px outline that encircles the whole element meets it exactly; a 1 px underline along one edge does not.

2. Change-of-state contrast

The pixels that change between the unfocused and focused states must differ by at least 3:1. This is a change of contrast measured at the same pixels, not contrast against an adjacent color. A dark outline appearing on a light component, or a clear color shift, clears it; a faint glow usually does not.

How to meet it

The simplest conforming pattern is a thick, solid, high-contrast outline:

/* A solid 2px outline tracing the whole perimeter meets the
   area test; a dark color on a light UI clears the 3:1 change. */
:focus-visible {
  outline: 2px solid #1a2740;   /* >= 3:1 vs the unfocused state */
  outline-offset: 2px;          /* offset is allowed; keep it visible */
}

Use :focus-visible so the indicator shows for keyboard users without appearing on every mouse click. outline-offset is permitted and often improves visibility. If you prefer a different shape (an underline, a background change), it still must total the minimum perimeter area and clear the 3:1 change — only the pixels that actually meet 3:1 count toward the area (Source: W3C, Understanding SC 2.4.13 ) . Avoid outline: none without a replacement, and avoid 1 px hairline rings.

Exceptions

2.4.13 does not apply when either of these is true:

  • The focus indicator is determined by the user agent and cannot be adjusted by the author.
  • The focus indicator and the indicator’s background color are not modified by the author.

Who it helps

  • People with low vision, who cannot locate a thin or low-contrast focus ring, especially under magnification.
  • Sighted keyboard users in bright environments or on low-quality displays, where a faint indicator washes out.
  • People with attention or cognitive limitations, who need an unmistakable signal of where they are on the page.

How to test it

  1. Tab to each interactive control and confirm a focus indicator appears.
  2. Inspect the indicator’s thickness: does it total at least a 2 px perimeter of the control? A solid 2 px outline around the element is the easy yardstick.
  3. Compare the focused and unfocused states at the same pixels and confirm at least a 3:1 contrast change (a color picker or contrast tool helps).
  4. Check that custom-styled controls (buttons, links, inputs, custom widgets) all pass, not just the ones using the default ring.

Common questions

Is Focus Appearance (2.4.13) required for WCAG 2.2 AA?

No. 2.4.13 is Level AAA, so it is not part of an AA target. The AA-level focus requirement is 2.4.7 Focus Visible, which only requires that a focus indicator exists. 2.4.13 adds measurable size and contrast on top of that.

How big does the focus indicator have to be?

At least as large as a 2 CSS pixel thick line tracing the full perimeter of the component — roughly 4 times (width + height) in square CSS pixels for a rectangular control. A solid 2 px outline around the whole element meets this.

Does the default browser focus ring pass 2.4.13?

If you do not modify the focus indicator or its background at all, the criterion does not apply — that is an explicit exception. It only becomes your responsibility once you style focus yourself.

What contrast does the focus indicator need?

A 3:1 ratio between the focused and unfocused states at the same pixels. This is a change-of-state contrast, not contrast against an adjacent color.