Focus Appearance
When the keyboard focus indicator is visible, it is at least as large as a 2 CSS pixel thick perimeter of the unfocused component, and has a contrast ratio of at least 3:1 between the focused and unfocused states.
In plain language
When you use Tab to move through a page with your keyboard, whatever is focused needs a clear visual indicator — a border or outline that visibly stands out from what's around it.
The recommended minimum is an outline at least 2 CSS pixels thick, with a contrast ratio of at least 3:1 between the focused and unfocused states. If a design uses 3px or 4px, that's even better — what matters is that anyone navigating by keyboard can immediately tell where the focus is on the page.
Note: 2px and a 3:1 contrast ratio are the minimum values defined by the W3C — a floor, not a target. For the full specification, see the official documentation for this criterion.
Why it matters
A faint or tiny focus indicator is technically "there," but effectively invisible to someone with low vision. This criterion sets a concrete minimum size and contrast so the indicator is genuinely usable, not just technically present.
In practice
Fails this criterion
A focus indicator changes a button's border from dark grey to a very slightly lighter grey — technically different, but barely perceptible.
Meets this criterion
The same button gets a solid, thick outline that clearly contrasts with both the button and the background when focused, easy to spot at a glance.
Test it yourself
Tab through the page's interactive elements and look closely at the focus indicator on each one. Is it clearly visible and easy to spot, or thin and low-contrast enough that it's easy to miss?