Build focus indicators that work on any background
A single-color focus ring always has a background it disappears against. A two-color indicator, a light outline with a dark shadow immediately outside it, keeps at least one of its colors visible whatever solid background it lands on. One number is doing that work and it is easy to miss. The two colors have to reach a contrast ratio of at least 9:1 with each other, and then W3C's arithmetic guarantees one of them clears 3:1 against any solid background. White against a deep navy comes out near 13:1, so a pair like that has room to spare. Pick two colors that merely look different and the guarantee is gone. W3C lists C40 as sufficient for 2.4.7 Focus Visible, as sufficient for 1.4.11 Non-text Contrast on the path about identifying a component's focus state, and as sufficient for the AAA rule about focus appearance. The argument W3C makes for it is maintenance rather than aesthetics. The alternative is a different focus class per background, which is slow to build and easy to leave incomplete, and one missed component is a control nobody can see themselves standing on. It is written for solid backgrounds, so a control sitting on a photograph still needs looking at.
How we find it in an audit
We tab through every page and watch the ring against every section, and the sections to watch are the dark hero, the tinted callout and the footer. Contrast tooling measures a focus indicator against a known background and cannot tell us which backgrounds a component will actually appear on, so the tabbing is the test.
How affected users experience it
This is for sighted keyboard users, including people with motor disabilities who cannot use a mouse and people with low vision who need the marker to be obvious. Focus that vanishes on the dark section means pressing Enter and finding out afterwards what was selected, which on a page with a Delete button is not a small thing.
Passes vs. fails
Passes
:focus-visible { outline: 2px solid #fff;
box-shadow: 0 0 0 4px #14304d; }Fails
:focus-visible { outline: 2px solid #fff; }
/* invisible on white sections */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 C40: Creating a two-color focus indicator to ensure sufficient contrast with all components. 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.