Aller au contenu principal

Focus Ring Designer

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

Paramètres

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

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 !