2.4.13 Focus Appearance

What this rule means

WCAG 2.4.13 is a new AAA criterion in WCAG 2.2 that goes beyond 2.4.7 (Focus Visible) by defining specific requirements for the size and contrast of focus indicators. The focus indicator must have a contrasting area that is at least as large as a 2 CSS pixel thick perimeter around the unfocused component, and must have a contrast ratio of at least 3:1 between the focused and unfocused states.

In practical terms, this means a thin 1px dotted outline — which technically passes 2.4.7 — does not pass 2.4.13. The focus indicator must be substantial, high-contrast, and clearly distinguishable from the unfocused state. The intent is to ensure that focus indicators are truly usable, not just technically present.

Why it matters

Many websites technically have a "visible" focus indicator that is practically invisible — a thin light-gray outline on a white background, or a barely perceptible color shift. These indicators fail users with low vision, users in bright environments, and anyone who needs a clear visual cue to track keyboard focus.

By defining minimum size and contrast requirements, this criterion ensures focus indicators are genuinely useful. A robust focus indicator dramatically improves the keyboard navigation experience for everyone — not just users with disabilities but also power users, users on high-DPI displays, and users in varying lighting conditions.

Related axe-core rules

There are no automated axe-core rules for 2.4.13. The size and contrast requirements for focus indicators require manual inspection and measurement. Tools like the WCAG 2.2 Focus Appearance bookmarklet can help.

How to test

1. Tab through all interactive elements and visually verify that each focus indicator is clearly visible and has adequate size.
2. Measure the focus indicator thickness — it must be at least 2 CSS pixels wide around the entire perimeter.
3. Use a contrast checker to verify the focus indicator has at least 3:1 contrast against adjacent unfocused colors.
4. Compare the focused and unfocused states — the change must have at least 3:1 contrast ratio.

• Test on different backgrounds — the focus indicator must be visible against both light and dark areas.
• Check that the focus indicator is not solely a color change — it should include a shape or border change.

How to fix

Design focus indicators that meet the minimum size (2px perimeter) and contrast (3:1) requirements.

Compliant focus indicator styles

/* Meets 2.4.13: 3px solid outline with high contrast */
:focus-visible {
  outline: 3px solid #0051a8;
  outline-offset: 2px;
}

/* Meets 2.4.13: Double-ring for any background */
:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #ffffff;
}

/* Meets 2.4.13: Box shadow approach */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px #0051a8;
}

Focus indicators that fail 2.4.13

/* Fails: 1px is below the minimum 2px perimeter */
:focus-visible {
  outline: 1px solid #999999;
}

/* Fails: Insufficient contrast (light gray on white) */
:focus-visible {
  outline: 2px solid #cccccc;
}

/* Fails: Only a color change, no perimeter indicator */
:focus-visible {
  background-color: #e0e0e0;
  outline: none;
}

Calculating the minimum focus area

/*
 * For a button that is 100px x 40px, the minimum focus indicator area is:
 * Perimeter = 2 * (100 + 40) = 280px
 * Minimum area at 2px thickness = 280 * 2 = 560 square CSS pixels
 *
 * A 3px outline around this button provides:
 * Area = 2 * (106 + 46) * 3 = 912 square CSS pixels (passes easily)
 *
 * Note: outline-offset adds to the outer dimensions
 * With outline: 3px and outline-offset: 2px:
 * Outer dimensions = (100+10) x (40+10) = 110 x 50
 * Focus area = 2 * (110 + 50) * 3 = 960 square CSS pixels
 */

Theming focus indicators

:root {
  --focus-color: #0051a8;
  --focus-width: 3px;
  --focus-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --focus-color: #6bb3ff;
  }
}

@media (forced-colors: active) {
  :root {
    --focus-color: Highlight;
  }
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

Common mistakes

• Focus outlines thinner than 2 CSS pixels — 1px dotted or dashed outlines fail the size requirement.
• Low-contrast focus indicators — a light blue outline on a white background may not reach 3:1 contrast.
• Relying on background color change alone as the focus indicator without a perimeter change.
• Focus indicators that work on light backgrounds but fail on dark backgrounds (or vice versa).
• Not testing focus appearance in high contrast mode (Windows High Contrast / forced-colors).
• Using outline colors that match the component's border color, making the focus state indistinguishable.