Le contraste se vérifie avec des ratios précis, mais ce n’est qu’une partie de l’accessibilité
Pour les textes, WCAG 2.2 niveau AA demande généralement au moins 4,5:1 pour le texte standard et 3:1 pour le grand texte. Pour certains composants d’interface et objets graphiques nécessaires à la compréhension, le contraste non textuel utilise aussi un seuil de 3:1.
Un site peut respecter ces ratios et rester difficile au clavier, mal structuré pour un lecteur d’écran ou peu compréhensible. Le contrôle du contraste ne remplace pas un audit complet et ne doit jamais être présenté comme une certification globale.
Commencez par les textes et leurs arrière-plans réels
Mesurez la couleur du texte par rapport à l’arrière-plan réellement affiché. Pour un texte standard, visez au moins 4,5:1. Pour du grand texte, WCAG permet 3:1. La définition du grand texte dépend de la taille et de la graisse ; ne décidez pas seulement à l’œil.
Contrôlez paragraphes, menus, boutons, labels, messages d’erreur et textes superposés aux images. Les problèmes apparaissent souvent sur des gris clairs, des couleurs de marque sur fond blanc ou des photos variables.
Vérifiez aussi les composants d’interface et les informations graphiques
Le contraste non textuel concerne les éléments visuels nécessaires pour identifier un composant ou comprendre une information. Une bordure de champ, un état sélectionné ou une icône porteuse de sens peut nécessiter un contraste suffisant avec les couleurs adjacentes. WCAG 2.2 fixe un seuil de 3:1 pour les éléments couverts par le critère 1.4.11.
Un élément décoratif n’a pas le même rôle qu’une icône qui remplace un libellé. Regardez ce qui transmet réellement une information ou permet d’identifier une commande.
N’oubliez pas les états hover, focus, erreur et désactivé
Une interface peut être correcte au repos et devenir illisible pendant l’interaction. Testez survol, focus clavier, validation et erreur. Si un bouton change de couleur, mesurez le nouveau contraste. Si un champ d’erreur utilise seulement un rouge clair, vérifiez le contraste et ajoutez un signal qui ne dépend pas uniquement de la couleur.
Une palette théorique ne suffit pas si une transparence, un dégradé ou une image modifie le résultat réel.
Comprenez les principales exceptions avant de conclure
WCAG prévoit des exceptions, notamment pour certains logos et éléments incidentels. Il faut donc éviter de traiter chaque différence de couleur comme une non-conformité automatique. L’analyse regarde le rôle de l’élément, la taille du texte et le critère applicable.
Un outil automatique peut signaler de nombreux éléments, mais une revue humaine reste nécessaire pour confirmer le contexte et expliquer pourquoi un contraste est insuffisant.
Comment corriger sans dégrader votre identité visuelle ?
Modifiez légèrement la couleur du texte ou de l’arrière-plan jusqu’au ratio requis. Souvent, assombrir une couleur de marque suffit. Pour un composant, renforcez une bordure, ajoutez un fond ou complétez la couleur par une forme ou un libellé plus explicite.
Si la couleur vient d’un design system, corrigez la variable CSS ou le composant source plutôt qu’une seule page. Contrôlez ensuite plusieurs pages pour éviter une nouvelle régression.
Exemple : un bouton clair sur fond blanc
Un bouton bleu très clair sur fond blanc peut sembler élégant mais rendre le texte ou la forme difficile à distinguer. Mesurez séparément le texte et, si la forme est nécessaire pour identifier le contrôle, le contraste de l’interface. Une correction peut assombrir le bleu, renforcer la bordure ou choisir un texte plus contrasté.
Le but n’est pas d’uniformiser le site en noir et blanc, mais de conserver une hiérarchie visuelle qui reste perceptible.
Comment valider le contraste après correction ?
Recalculez les ratios, testez les différents états et vérifiez les pages réellement utilisées. Complétez ensuite par d’autres contrôles, notamment navigation clavier et structure sémantique. Respecter le contraste ne suffit pas à déclarer un site accessible.
Limpi peut aider à suivre ces contrôles sans transformer un test en certification. Lancer un audit Limpi permet de commencer le diagnostic, et notre approche explique les limites de chaque contrôle.
Références utilisées pour cette page
Continuer à comprendre votre visibilité
À lire ensuite