Ship a clearly visible custom focus indicator
Drawing your own focus indicator? G195 sets the bar it has to clear. W3C's test measures three things. The indicator area has to be at least the size of a 1 CSS pixel border around the component, or 4 CSS pixels along its shortest side. The contrast has to change by 3:1 or more between the focused and unfocused states, which compares two states rather than measuring against a background. And where the ring does not reach 3:1 against the colors beside it, it has to be at least 2 pixels thick. W3C lists this as sufficient at 2.4.7 Focus Visible and at 1.4.11 Non-text Contrast, both Level AA, and again at the Level AAA rule about focus appearance. The state-change measurement is the part designs fail without noticing, because a ring can pass a contrast check against the page and still barely change anything when focus arrives.
How we find it in an audit
Our reviewers tab through every interactive element and photograph the focused and unfocused states side by side. Then we measure. The change between the two states, and the thickness of the ring. Dark rings on dark surfaces and light rings on light surfaces are the two designs that pass a casual look and fail the measurement.
How affected users experience it
A sighted keyboard user has one marker of where they are, and a hairline outline in mid-grey is a marker that disappears on half the site. They end up tabbing and guessing, or moving the mouse to find themselves again, which people with motor disabilities often cannot do. A ring with a contrasting halo works on any surface, which is why the two-color pattern keeps turning up.
Passes vs. fails
Passes
:focus-visible { outline: 3px solid #1a4fd6; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; } gives a two-color ring visible on any background.Fails
*:focus { outline: none; } paired with a redesign ticket that never shipped, so keyboard users get no visual focus anywhere on the site.How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Element in sequential focus order has visible focusA tool can check this
Other ways to satisfy this rule
6 guides on this site are filed under 1.4.11 Non-text Contrast. W3C lists this one as sufficient for that rule when used for identifying a user interface component's focus state, so the condition is part of the test rather than a footnote to it.
This guide is our interpretation of W3C technique G195: Using an author-supplied, visible focus indicator. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.