Focus appearance

Criterion 2.4.13, added in WCAG 2.2 at level AAA, is the one that puts numbers on a focus indicator. It asks three things of the drawing that appears when a control takes focus. The indicator must cover at least the area of a 2 CSS pixel thick perimeter of the control, and be no thinner than 2 pixels in any direction. The pixels it occupies must change by at least 3:1 between the unfocused and focused states. And those pixels must either clear 3:1 against the colours next to them or be at least 2 pixels thick. Nothing in there is about colour taste. It is a floor, expressed in pixels and ratios, under a drawing that is otherwise left to you.

Three terms sit close together here and they fail independently. A focus ring is the drawing itself, the thing you style. Focus visible is about when that drawing appears, which is the question :focus-visible answers by telling a keyboard arrival apart from a mouse press. Focus appearance is only about whether the drawing you made is strong enough for somebody to find. A gorgeous ring shown at all the wrong moments passes this one and fails that one, and a perfectly timed one pixel hairline does the reverse.

The 3:1 number is borrowed from non-text contrast, which is where most people first meet it, but the two measure against different things and that is where the mistakes happen. Non-text contrast measures a control’s boundary against the surface behind it. Focus appearance measures the indicator against the pixels it replaced, focused state versus unfocused state. An indicator that recolours a border the control already had can satisfy 1.4.11 comfortably and still fail here, because what gets measured is the change, and grey to blue is often a smaller change than it looks.

In practice a browser’s own default indicator passes, and almost every failure is a custom one. The three habits that cause them are a one pixel outline, a pale tint of the brand colour, and a border recolour that adds no area at all. Two small choices fix most of it: draw the indicator with outline rather than border, so it costs no layout, and give it an outline-offset, which moves the indicator off the control and onto the page behind it, where it usually has more contrast to work with and where a reader can see its full perimeter.