Two-tone navy and white ring

Button Button Button Button

Why it works

Two bands, one light and one dark. On white the navy band shows. On near black the white band shows. On bright blue, which is close in luminance to navy, the white band carries the ring. On the busy pattern at least one band contrasts with every stripe. The two bands contrast with each other at 11.4:1, so the ring always has a crisp edge.

The lowest score across the twelve lab backgrounds is 4.1:1 on bright blue. Everything else is above 5:1.

The CSS

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #0b3d5c;
}

outline: none is safe here only because the ring is declared in the same rule. Swap the navy for your own dark brand color; keep the white band.

Try it in the lab