Start scanning free

( Operable / WCAG 2.4.11 )

Focus indicator does not meet minimum size or contrast

This check maps to Focus Appearance. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level AA WCAG 2.4.11 — Focus Appearance

What’s wrong

A focus indicator is present but is too thin, too small, or lacks sufficient contrast to be clearly visible.

Why it matters

New in WCAG 2.2. This criterion goes beyond requiring a focus indicator to exist — it requires the indicator to be actually perceivable. People with low vision need a minimum sized, sufficiently contrasted focus ring to track keyboard navigation. A 1px dotted outline in a similar colour to the background technically passes 2.4.7 but fails users in practice.

How to fix it

The focus indicator must have a minimum 2px outline and a 3:1 contrast ratio between focused and unfocused states.

Before 
:focus-visible {
  outline: 1px dotted #aaaaaa;
}
After 
:focus-visible {
  outline: 3px solid #0052cc;
  outline-offset: 2px;
}

.dark-bg :focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

A practical rule of thumb: solid outline of at least 2px (3px is safer), with a colour that has 3:1 contrast against both the component background and the page background.

Learn more