Focus Ring Designer

Créez des indicateurs de focus esthétiques ET accessibles. Générez le CSS prêt à copier.

Paramètres

Couleur du focus

Contraste: 5.2:1 ✓ OK (≥3:1)

Épaisseur: 3px

Décalage (offset): 2px

Style de bordure

Animation

Fond de prévisualisation

Utilisez Tab pour naviguer et voir le focus

Lien de navigation

CSS

:focus-visible {
    outline: 3px solid #2563EB;
    outline-offset: 2px;
    border-radius: 4px;
}

Tailwind CSS

focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-[2px] focus-visible:outline-[#2563EB]

Pourquoi le focus visible est essentiel ?

Navigation clavier

De nombreux utilisateurs naviguent sans souris. Sans indicateur de focus visible, ils sont perdus.

RGAA 10.7

Le critère 10.7 exige que la prise de focus soit visible. Un contraste minimum de 3:1 est recommandé.

Design ≠ Accessibilité

Cet outil prouve qu'un focus ring peut être beau ET accessible. Fini le outline: none !

Allez plus loin dans l'accessibilité

Votre site respecte-t-il les 106 critères du RGAA ? Lancez un audit complet gratuit pour découvrir les problèmes d'accessibilité et comment les corriger.

Scanner mon site gratuitement