Bouw een focusring die op elke achtergrond opvalt

Een site heeft lichte en donkere vlakken. Een focusrand van één kleur valt daardoor altijd op één van de twee weg. Zet daarom een lichte ring binnen een donkere: op een donkere knop valt de lichte op, op een lichte knop de donkere.

In de code ziet dat er zo uit:

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;   /* blijft staan in de hoogcontrastmodus */
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px #FFFFFF,              /* binnenring: licht */
    0 0 0 5px #08251C;              /* buitenring: donker */
  border-radius: 6px;
}

De doorzichtige outline lijkt overbodig maar is dat niet. In de hoogcontrastmodus van Windows verwijdert het systeem alle kleuren en schaduwen, waardoor de box-shadow verdwijnt. Een outline blijft wel staan en krijgt dan de systeemkleur.

Gebruik :focus-visible en niet :focus. Met :focus krijgt ook een bezoeker die met de muis klikt een rand om zijn knop. Met :focus-visible bepaalt de browser het zelf: een rand bij het toetsenbord, geen rand bij de muis.

Drie oplossingen die niet genoeg zijn:

Alleen de kleur van de knop veranderen. Kleurverschil alleen is geen zichtbare focus, en voor wie kleur anders ziet werkt het niet.
De rand strak om het onderdeel leggen. Met outline-offset blijft er lucht, waardoor de rand ook op een gekleurde knop opvalt.
Een rand dunner dan 2 pixels. Op een vergroot scherm valt die weg tegen de rand van het onderdeel zelf.