Vérificateur de contraste (Contrast Checker)

Vérifier le contraste du texte avant de publier

Un bon contraste des couleurs est l'un des moyens les plus simples de rendre un site plus lisible. Ce vérificateur de contraste compare la couleur du texte et celle de l'arrière-plan grâce à la formule de luminance relative des WCAG, puis indique le rapport de contraste et les résultats réussi/échoué pour les niveaux AA et AAA. Il est utile pour les boutons, la navigation, les badges, les cartes, les messages d'alerte et partout où du texte apparaît sur une surface colorée.

Le calcul s'exécute dans votre navigateur et ne nécessite aucun envoi de fichier. Choisissez deux couleurs, inversez-les si besoin et utilisez le bloc d'aperçu pour voir l'effet d'un vrai texte. Le rapport est objectif, mais l'aperçu reste important, car l'épaisseur de la police, la taille des lettres et la mise en page environnante influencent la lisibilité. Une paire qui réussit techniquement peut rester fatigante si le texte est minuscule ou si la surface est visuellement chargée.

Comprendre les résultats AA et AAA

Le niveau WCAG AA est l'objectif courant pour la plupart des sites et produits. Le texte normal doit atteindre au moins 4,5:1 et le grand texte au moins 3:1. Le niveau AAA est plus strict : 7:1 pour le texte normal et 4,5:1 pour le grand texte. Par grand texte, on entend 18 pt en graisse normale ou 14 pt en gras, et au-delà. Le seuil plus bas existe parce que des lettres plus grandes et plus épaisses restent plus faciles à distinguer avec un contraste moindre que le petit texte courant. Si vous hésitez sur la catégorie, considérez le texte comme normal et visez l'exigence la plus élevée.

Concevoir des systèmes de couleurs accessibles

Le contraste doit être vérifié tôt, et pas seulement une fois la conception visuelle terminée. Lorsque vous choisissez des couleurs de marque, testez-les sur les surfaces où elles apparaîtront réellement : cartes blanches, barres de navigation sombres, arrière-plans atténués et états désactivés. Documentez les combinaisons accessibles sous forme de tokens afin que les équipes n'aient pas à les redécouvrir. N'oubliez pas que le contraste n'est qu'un aspect de l'accessibilité. Utilisez des contours de focus visibles, des libellés clairs, du HTML sémantique et ne vous appuyez pas uniquement sur la couleur pour signaler des états importants comme les erreurs, les succès et les avertissements.