Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.
Contrast: 1,4:1. Je moet er met je neus tegenaan zitten om het te zien.
De browser toont standaard een duidelijke focus. Maar de designer wilde iets “subtielers.” Het resultaat: een indicator die er is maar onzichtbaar is.
/* Niet doen: te subtiel */
button:focus-visible {
outline: 1px solid #E0E0E0;
}
/* Wel doen: duidelijk zichtbaar */
button:focus-visible {
outline: 2px solid #0066CC;
outline-offset: 2px;
}
Twee factoren bepalen de zichtbaarheid:
- Kleur: voldoende contrast met de achtergrond (minimaal 3:1)
- Dikte: minimaal 2px (1px is op veel schermen nauwelijks zichtbaar)
Let op: test op alle achtergrondkleuren die op je website voorkomen. Een donkerblauwe focus op wit is perfect. Op een donkerblauwe footer? Onzichtbaar.
Dubbele ring als universele oplossing:
button:focus-visible {
outline: 2px solid #0066CC;
outline-offset: 2px;
box-shadow: 0 0 0 4px #FFFFFF;
}
Donkere ring op lichte achtergrond. Witte schaduw op donkere achtergrond. Altijd zichtbaar.
