The yellow and black ring from the GOV.UK Design System
A bright yellow fill with a thick black bottom edge, used across UK government services. Yellow and black are two tones, so it scores 12 of 12 in the Focus Lab with a lowest ratio of 4.6:1.
Why it works
Most focus rings are an outline around the element. This one changes the element itself: the focused link gets a solid yellow background and a thick black line underneath. Yellow against the page shows on every dark and mid-tone background; the black line shows on every light one, including white and the yellow fill itself. That is a two-tone ring by another route, and the Focus Lab agrees: using yellow and near-black as the two tones, every one of the twelve backgrounds passes, with the lowest pair at 4.6:1.
It is also deliberately loud. The design system's own guidance says the state has to be obvious to someone who has looked away and back, not just to someone watching the cursor. The yellow is the same one used for the site's focus everywhere, so a user learns it once.
The CSS
The link pattern, as published in the design system's stylesheet (simplified to the parts that make the ring):
a:focus {
outline: 3px solid transparent; /* keeps a ring in forced-colors mode */
background-color: #ffdd00;
box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
color: #0b0c0c;
text-decoration: none;
}
The transparent outline is the detail people miss. In Windows high contrast mode, background colours and box shadows are removed, but an outline is drawn in the system colour even when it is transparent, so the ring survives there too.
The full pattern, including the versions for buttons and form inputs, is in the design system's focus states guidance. The stylesheet is MIT licensed; the pattern is reproduced here in simplified form with attribution.