Focus Appearance
The focus indicator has to be big enough and different enough to see. Big enough means an area at least as large as a 2 CSS pixel thick perimeter of the unfocused component, or of the sub-component that actually took focus, such as one item in an open menu or one cell in a grid. That is a minimum area, not a minimum thickness, and the difference matters in both directions. A 2px line sitting inside the component against its outer edge passes, and that is what an ordinary CSS border gives you. Push the same line further in and it fails, because a shorter perimeter encloses less area, so an inset line needs 3px to win the area back. Two rectangles flanking a button pass, with no perimeter at all. Different enough means a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
Why it matters
Visible at Level AA carries no number, so a one-pixel pale outline satisfies the words while disappearing on screen. This criterion puts figures on it and ends the argument. The contrast test is not the one people expect, though. It compares the same pixels across two states rather than two colors sitting next to each other, so changing a button's own fill from black to white passes and changing it from black to dark gray does not.
Who this rule protects
Anybody who works the page by keyboard, and W3C's own summary names older readers first among the people who cannot see a small change in appearance.
How to check it yourself
- Compare the area of the indicator against the area of a 2 CSS pixel perimeter of the component, since the rule sets a minimum area and not a minimum thickness.
- Watch where an inner line actually sits. Against the component's outer edge, 2px is enough. Inset a few pixels further in, that same 2px encloses less area and fails, and 3px is what brings it back.
- Measure the contrast between the same pixels in the focused and unfocused states, not between the indicator and the color beside it. Work from the colors you declared rather than from a screenshot, because the softened edge pixels the browser draws are explicitly allowed to be ignored.
- Where only part of the indicator changes by 3:1, count only that part toward the area.
- Check the indicator on every background in the palette, and check it again on a component that grows or shrinks responsively.
Failures we see most often
- A 1px pale outline gets used, which fails on area and usually on contrast too.
- A 2px line is inset a few pixels within the component, which looks like the border that would have passed and does not.
- The whole indicator is 2px thick but only 1px of it actually changes by 3:1.
- Script removes focus when a component receives it, which fails this rule and two Level A ones with it.
Who this one is for
Read from this rule's own note above, so the grouping and the note cannot disagree.
- Motor and keyboard-onlypeople who cannot use a mouse, or cannot use one precisely
How to fix it
- Set the indicator once in the design system, sized so it scales with the control rather than being fixed.
- Use a two-color indicator. W3C gives the number that makes it work. Two colors at least 9:1 apart from each other guarantee one of them clears 3:1 against any solid background.
- Or build a strong indicator inside the component, contrasting against its own internal background, which is the other documented technique.
- Or take one of the two exceptions, which both come down to keeping your hands off. One covers an indicator the browser draws and you have no way to adjust. The other covers leaving the indicator and the colors immediately behind it exactly as they arrived. Restyle either one and the exception is gone.
Step-by-step fix guides (5)
Passes vs. fails
Passes
A 2px indicator drawn around the component, at 3:1 between its focused and unfocused pixels, set once as a design token.
Fails
A 1px solid #ccc outline, too small on area and too close in color to the surface behind it.
In audits and lawsuits
This one is new in WCAG 2.2, at AAA, and it is the most detailed criterion in the standard to test by hand. For a 90 by 30 pixel button the target area works out at 480 square pixels. W3C offers a shortcut worth taking. If you need complicated arithmetic to decide whether an indicator is large enough, use a bigger indicator. Two things get missed. The same indicator is also governed by criterion 1.4.11 at Level AA, which measures adjacent contrast rather than change of contrast, so an indicator can pass one and fail the other. And both documented failures here break criteria at Level A or AA as well, which is where they will actually get written up.