Gallery · Focus states, scored
The two pixel accent outline from GitHub Primer
A thin blue outline drawn inside the element edge, the ring on every GitHub page. Clean on white, near black, and the system's own grays; lost on blue, green, red, and mid gray. The Focus Lab scores it 4 of 12 alone and 10 of 12 with a white inner band.
What the lab says
Primer draws a two pixel accent-colored outline with a negative offset, so the ring sits just inside the element rather than around it. That keeps it from being clipped by overflow and from pushing layout, two real problems with outer rings. The accent blue reaches 5.2:1 on white and 3.4:1 on near black. On a mid gray it falls to 2.0:1, on this site's green to 1.2:1, and on the bright blue to 1.3:1. Four of twelve pass.
Inside GitHub that is fine: buttons and links sit on white, on a near-white canvas, or on the dark theme's near black, and the ring was tuned for those. Two pixels is also thin. The accessibility guideline asks for a focus indicator at least as large as a two pixel perimeter, so this is at the floor, and the inside offset means the ring overlaps the element's own border on bordered controls.
The CSS, and the two-tone fix
As published, simplified:
:focus-visible {
outline: 2px solid #0969da;
outline-offset: -2px;
}
With a white inner band the same blue scores 10 of 12, failing only on the mid gray and the busy pattern. Load the GitHub Primer preset in the Focus Lab and turn on the second tone to see it.