Un ratio de contraste de 4,5 pour 1 sur le texte d’un bouton ne garantit absolument rien sur la visibilité de son indicateur de focus au clavier. Cette confusion, fréquente chez les développeurs qui maîtrisent déjà bien le contraste de texte, mérite d’être clarifiée avant qu’elle ne se transforme en défaut systématique sur toute une bibliothèque de composants.
Ce texte ne traite pas des autres nouveaux critères de WCAG 2.2, couverts par ailleurs, mais se concentre uniquement sur le contraste de focus, introduit par le critère 2.4.11 « Focus Appearance », et sur sa différence de calcul avec le contraste de texte classique déjà bien connu.
Deux calculs de contraste bien distincts
Le contraste de texte, défini par le critère 1.4.3, compare la couleur du texte à la couleur de son arrière-plan immédiat, avec un seuil de 4,5 pour 1 pour un texte de taille standard. Le contraste de focus, lui, compare la couleur de l’indicateur visuel de focus (contour, ombre, changement de fond) à la couleur qui l’entoure immédiatement, avec un seuil minimal de 3 pour 1, et une exigence supplémentaire sur l’épaisseur ou la surface de cet indicateur.
Un bouton parfaitement conforme sur son contraste de texte peut donc très bien échouer sur son contraste de focus, si son style de focus par défaut se limite à un léger changement d’opacité ou à un contour trop fin pour être perçu nettement au moment de la tabulation.
Exemple d’un bouton non conforme
Un bouton avec un fond bleu moyen et un texte blanc respecte largement le contraste de texte attendu. Si son état de focus se limite à un contour d’un pixel dans une teinte de bleu très proche du fond, le ratio de contraste entre ce contour et le fond du bouton reste insuffisant, et l’épaisseur d’un pixel ne satisfait pas non plus l’exigence de surface minimale du critère.
.bouton {
background-color: #2f5da8;
color: #ffffff;
}
.bouton:focus-visible {
outline: 1px solid #3a6bc0; /* contraste insuffisant avec le fond */
}
Exemple d’un bouton conforme
La correction consiste à choisir une couleur d’indicateur nettement contrastée avec l’environnement immédiat du bouton, et à lui donner une épaisseur suffisante pour respecter la surface minimale attendue par le critère.
.bouton:focus-visible {
outline: 3px solid #ffd166;
outline-offset: 2px;
}
Ce contour jaune vif, épais de trois pixels et légèrement décalé du bord du bouton, présente un contraste largement supérieur au seuil requis à la fois avec le fond bleu du bouton et avec l’arrière-plan général de la page, ce qui satisfait le critère dans les deux configurations d’environnement possibles.
Le cas particulier des boutons à fond variable
Un bouton affiché sur des arrière-plans différents selon la page (image, couleur claire, couleur sombre) doit conserver un contraste de focus suffisant dans chacun de ces contextes. Un contour unique, choisi pour fonctionner sur un seul fond de référence, échoue fréquemment dès qu’il est réutilisé ailleurs sur le site avec un environnement visuel différent.
- Calculer le contraste de l’indicateur de focus séparément du contraste de texte
- Vérifier une épaisseur ou une surface suffisante, pas uniquement une couleur contrastée
- Tester l’indicateur sur chaque arrière-plan réellement utilisé dans le site
Un outil de vérification simple
Un vérificateur de contraste classique, en saisissant la couleur de l’indicateur et celle de son environnement immédiat, permet de calculer ce ratio sans outillage spécialisé. La difficulté principale reste d’identifier correctement quelle couleur constitue réellement « l’environnement immédiat » lorsque l’indicateur chevauche à la fois le bouton et son arrière-plan, ce qui impose de vérifier les deux zones de contact séparément.
Un indicateur de focus élégant mais trop discret ne rend service à personne : sa seule fonction est d’être vu instantanément, pas d’être esthétique en priorité.
En résumé
Le contraste de focus introduit par WCAG 2.2 obéit à un calcul et un seuil distincts du contraste de texte classique : vérifiez systématiquement l’indicateur de focus de chaque composant interactif sur tous les arrière-plans réellement utilisés, avec une épaisseur suffisante et un ratio d’au moins 3 pour 1.
