2.4.13 Focus Appearance

WCAG 2.2 · 2.4.13 AAA Operable

What it requires

When a user-interface component receives keyboard focus, the focus indicator must be large enough and have enough contrast to be easy to see. Specifically, where the default focus indicator is wholly or partly hidden by author-supplied styling, the visible focus indicator must meet all of the following:

  • Area — at least the area of a 2 CSS-pixel-thick perimeter of the unfocused component (or an equally sized region).
  • Contrast — a contrast ratio of at least 3:1 between the focused and unfocused states of the pixels that change colour.

It also is satisfied automatically if the focus indicator has a contrast ratio of at least 3:1 and is at least 2 CSS pixels thick, or encloses the component, or matches the platform default. This is the AAA companion to the broader keyboard-visibility requirement of 2.4.7 Focus Visible (AA).

  • Sighted keyboard users who cannot see where focus is when the indicator is thin, low-contrast, or removed.
  • People with low vision for whom a faint outline is invisible.
  • People with cognitive or attention disabilities who lose their place without a clear, prominent focus cue.
  • Anyone navigating by keyboard, switch, or voice in bright light or on low-quality displays.

How to detect it

Checks for 2.4.13 Focus Appearance
Check How Catches
Keyboard tab-through Tab through every interactive element; confirm a clearly visible indicator on each. Missing or removed focus styling.
Indicator size Inspect the outline / ring; verify it is at least 2 CSS pixels thick around the component. Thin 1px outlines that fail the area requirement.
Contrast measure Sample focused vs unfocused pixels with a contrast tool; require ≥ 3:1. Low-contrast indicators against the background.
Zoom & themes Re-test at 200% zoom and in dark / high-contrast modes. Indicators that disappear in some themes.
Automated tools axe and similar flag outline:none patterns but cannot fully judge area or contrast. Partial — manual verification required.

How to fix it

  1. Never strip focus styling with outline: none unless you replace it with an equally visible indicator.
  2. Use a focus ring at least 2 CSS pixels thick that fully encloses the component.
  3. Choose a colour with at least 3:1 contrast against both the component and its surroundings; add an offset so it stands clear of the element.
  4. Scope styles to :focus-visible so the ring shows for keyboard users.
  5. Re-test across zoom levels and every theme you ship.
.btn:focus-visible {
  outline: 3px solid #1a5fff; /* ≥ 2px, ≥ 3:1 contrast */
  outline-offset: 2px;
}

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule that confirms 2.4.13 Focus Appearance. Focus indicator size, contrast and offset must be checked by manual review using the console snippet and steps below.

Run this in the browser console

focus-appearance-audit.js 
// Read-only: lists focusable elements and their focus-related styles.
const focusable = document.querySelectorAll(
  'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const rows = [...focusable].map(el => {
  const s = getComputedStyle(el);
  el.style.outline = '2px dashed magenta'; // visual hint only
  return {
    tag: el.tagName.toLowerCase(),
    text: (el.textContent || '').trim().slice(0, 30),
    outlineWidth: s.outlineWidth,
    outlineColor: s.outlineColor,
    outlineOffset: s.outlineOffset,
    boxShadow: s.boxShadow
  };
});
console.table(rows);
console.log('Tab through these and watch the focus indicator.');

What to check manually: Tab to each control and confirm the focus indicator is at least as large as a 2 px perimeter and has at least 3:1 contrast against both the focused and unfocused states — visual perception no script can confirm.