WCAG 2.4.13 Focus Appearance: Design High-Visibility Focus Indicators

Last updated: 2026-03-31

Level AAA Operable WCAG 2.4.13

What This Criterion Requires

WCAG 2.4.13 Focus Appearance is a new AAA-level criterion in WCAG 2.2 that sets specific requirements for the size and contrast of focus indicators. While 2.4.7 (Focus Visible) simply requires that a focus indicator exists, and 2.4.11 sets minimum size at AA, 2.4.13 goes further by requiring that the focus indicator has a minimum area of a 2 CSS pixel thick perimeter around the unfocused component, and the contrast ratio between the focused and unfocused states is at least 3:1. This criterion ensures that focus indicators are not only present but are genuinely easy to see. Many websites technically pass 2.4.7 with a barely visible dotted outline that provides little practical benefit to keyboard users. Focus Appearance addresses this gap by defining what a good focus indicator actually looks like. Meeting this criterion benefits everyone who uses keyboard navigation, especially users with low vision, cognitive disabilities, or those navigating in challenging lighting conditions.

Why It Matters

A focus indicator that technically exists but cannot be easily seen provides little practical value to keyboard users. Many browser default focus styles are thin, low-contrast dotted outlines that are nearly invisible against complex backgrounds. Users with low vision may be unable to distinguish a 1-pixel dotted outline from the surrounding content. Users with cognitive disabilities may lose track of their position if the focus indicator does not stand out clearly. Even users with perfect vision can struggle to locate focus on screens with high ambient light or on lower-quality displays. By specifying minimum size and contrast requirements for focus indicators, this criterion ensures that keyboard users can always confidently identify which element is currently focused, making keyboard navigation reliable and efficient. Although this is AAA level, implementing strong focus indicators is considered a best practice that significantly improves usability for all keyboard users.

Common Failures and How to Fix Them

Thin 1px dotted outline with insufficient contrast

The default browser outline or a custom 1px dotted outline is used as the focus indicator. The indicator is too thin and has insufficient contrast against the background, making it nearly invisible to many users.

Inaccessible 
button:focus {
  outline: 1px dotted #999;
}
Accessible 
button:focus-visible {
  outline: 3px solid #0056b3;
  outline-offset: 2px;
}

Focus indicator removed without replacement

Developers remove the default focus outline for aesthetic reasons and provide no alternative focus indicator, or replace it with a subtle box-shadow that does not meet contrast requirements.

Inaccessible 
a:focus {
  outline: none;
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
Accessible 
a:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 2px;
}

Focus indicator color too similar to component background

The focus indicator color is chosen to match the design palette but does not provide sufficient contrast change between the focused and unfocused states of the element.

Inaccessible 
/* Button has blue background, focus adds slightly different blue */
.btn-primary:focus {
  outline: 2px solid #3366cc;
  /* Only 1.8:1 contrast against #2255bb button */
}
Accessible 
/* Use a contrasting color or add offset */
.btn-primary:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  /* White outline offset from button provides clear visibility */
}

How to Test

  1. Tab through all interactive elements and visually confirm that the focus indicator is clearly visible against all backgrounds on the page.
  2. Measure the focus indicator thickness: it should be at least 2 CSS pixels thick around the entire perimeter of the component.
  3. Use a color contrast analyzer to verify that the change in contrast between the focused and unfocused appearance is at least 3:1.
  4. Test on different monitor types and brightness settings to ensure the focus indicator remains visible in various viewing conditions.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria