Gallery · Focus states, scored
The four pixel blue outline from the US Web Design System
One bright blue outline, four pixels thick, with no offset. Loud on white and on dark backgrounds, lost on mid grays and on anything blue. The Focus Lab scores it 4 of 12 on its own and 9 of 12 with a white inner band.
What the lab says
The design system uses a single bright blue (its blue-40v) as the focus color for every component, four pixels wide and flush with the element. On white it reaches 3.2:1 and on near black 5.5:1, both clear passes. On the mid gray it drops to 1.3:1 and on this site's bright blue to 1.3:1, which is close to invisible. The lab scores it 4 of 12 across its backgrounds.
That is not a mistake in the design system. Government pages built with it are mostly white with dark text, and a thick blue ring on a white page is one of the most visible rings on the web. It is a reminder that a ring is scored against the backgrounds it will actually land on. Drop the same ring onto a blue hero or a photo and it fails.
The CSS, and the two-tone fix
As published, simplified to the parts that make the ring:
:focus {
outline: 0.25rem solid #2491ff;
outline-offset: 0;
}
Add a white inner band and the same blue scores 9 of 12 in the lab, failing only on the light gray, the mid gray, and the busy pattern. The lab's CSS output does this with two box shadows. Load the US Web Design System preset in the Focus Lab, turn on the second tone, and watch the cells change.