Vérificateur d'Accessibilité des Couleurs
Entrez une couleur de premier plan et d'arrière-plan (codes hexadécimaux) pour vérifier leur ratio de contraste et leur conformité WCAG.
Ceci est du texte large en gras.
Ceci est du texte de taille normale.
21.00:1
Ratio de Contraste
Texte Normal (AA)
Texte Large (AA)
18pt+ or 14pt+ bold
Composants UI (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
Comment utiliser Vérificateur d'Accessibilité des Couleurs
- 1
Saisissez deux couleurs
Indiquez une couleur de premier plan (texte) et une couleur d'arrière-plan sous forme de codes hexadécimaux, par exemple #1a1a1a et #ffffff.
- 2
Vérifiez le contraste
Cliquez sur Vérifier l'accessibilité pour calculer le rapport de contraste entre les deux couleurs.
- 3
Examinez les résultats WCAG
Consultez les badges réussite ou échec pour les niveaux AA et AAA en texte normal, grand texte et composants d'interface, et visualisez l'aperçu en direct.
- 4
Ajustez si nécessaire
Intervertissez les couleurs ou modifiez une valeur hexadécimale jusqu'à ce que la combinaison atteigne le niveau WCAG requis par votre projet.
Le contraste des couleurs WCAG, démystifié
Ce que signifie le rapport de contraste
Le contraste des couleurs s'exprime sous la forme d'un rapport entre la plus claire et la plus sombre de deux couleurs, allant de 1:1 à 21:1. Un rapport de 1:1 signifie que les deux couleurs sont identiques, de sorte que le texte serait complètement invisible sur son arrière-plan, tandis que 21:1 est le maximum, le contraste entre le noir pur et le blanc pur. Tout autre appariement se situe quelque part entre les deux. Le rapport ne concerne pas les couleurs que vous avez utilisées ni à quel point leurs teintes diffèrent ; il porte purement sur leur différence de luminosité, et c'est pourquoi deux couleurs qui vous paraissent distinctes peuvent tout de même échouer.
Ce nombre unique est l'épine dorsale d'une couleur accessible, car il prédit si le texte sera lisible pour le plus large éventail de personnes et de conditions. Le vérificateur le calcule pour tout couple de premier plan et d'arrière-plan que vous saisissez et compare le résultat aux seuils publiés.
Les seuils AA que vous devez atteindre
Le niveau AA des WCAG est la barre que visent la plupart des sites web et que référencent de nombreuses lois sur l'accessibilité et règles de marchés publics : traitez-le donc comme votre socle. AA exige un rapport de contraste d'au moins 4,5:1 pour le texte courant et d'au moins 3:1 pour le grand texte. Ces deux nombres couvrent l'essentiel des décisions de conception quotidiennes, et les badges de cet outil vous indiquent immédiatement si un appariement donné franchit chacun d'eux.
Si une combinaison passe AA pour le texte courant comme pour le grand texte, vous disposez d'une base solide et défendable. Si elle échoue au texte courant mais passe au grand texte, vous pouvez tout de même l'utiliser, mais uniquement en grandes tailles, ce qui est une contrainte qu'il vaut mieux décider délibérément plutôt que découvrir plus tard.
AAA et ce que signifie « grand texte »
Le niveau AAA est le palier renforcé, destiné à une lisibilité maximale, et il porte l'exigence à 7:1 pour le texte courant et à 4,5:1 pour le grand texte. AAA n'est pas attendu pour des sites entiers et est souvent impraticable pour des palettes de marque, mais c'est une cible louable pour la lecture longue, les contenus critiques et les publics malvoyants. Le vérificateur indique AAA aux côtés de AA pour que vous puissiez voir de quelle marge dispose un appariement.
Le grand texte a une définition précise qui surprend les gens : il désigne environ 18 pt et plus, ou 14 pt et plus en gras, ce qui correspond à environ 24 px en normal ou 18,66 px en gras. La raison pour laquelle le seuil est plus bas est simplement que des lettres plus grandes et plus épaisses restent lisibles à un contraste moindre. Tout ce qui est plus petit que cette limite doit satisfaire le rapport plus strict du texte courant : ne supposez donc pas qu'un titre d'apparence imposante se qualifie sans vérifier la taille et la graisse réelles.
Pourquoi le contraste compte pour les vrais utilisateurs
Un contraste adéquat n'est pas un exercice de cases à cocher ; il détermine si de vraies personnes peuvent utiliser votre interface. Les utilisateurs malvoyants, dont le nombre augmente avec l'âge, en dépendent directement, tout comme quiconque lit un écran en plein soleil, sur un affichage faible ou bon marché, ou en étant fatigué. Le contraste interagit aussi avec le déficit de vision des couleurs : parce que le rapport repose sur la luminosité plutôt que sur la teinte, un appariement qui s'appuie sur une différence rouge-vert peut s'effondrer pour une personne incapable de distinguer ces teintes, alors qu'une forte différence de luminosité reste lisible.
Ce dernier point porte un corollaire qu'il vaut la peine d'énoncer clairement : ne vous reposez jamais sur la seule couleur pour transmettre un sens. Associez la couleur à du texte, des icônes, des soulignements ou des formes afin que l'information survive à la fois à un faible contraste et au daltonisme.
Comment le rapport est calculé
Le calcul derrière le badge commence par la luminance relative, une mesure de la luminosité perçue de chaque couleur par l'œil humain. Ce n'est pas une moyenne plate des canaux rouge, vert et bleu, car l'œil est bien plus sensible au vert qu'au bleu : le vert est donc pondéré le plus fortement et le bleu le moins. Chaque canal passe aussi d'abord par une légère correction gamma pour que le résultat suive la perception plutôt que le signal brut.
Une fois que les deux couleurs ont une valeur de luminance, le rapport de contraste est la luminance la plus claire plus une petite constante, divisée par la luminance la plus sombre plus cette même constante. La constante maintient la formule stable près du noir. Vous n'avez pas besoin de faire ce calcul à la main, mais savoir que c'est la luminance, et non la teinte, qui détermine le résultat explique pourquoi choisir simplement des couleurs d'apparence différente ne suffit pas.
Contraste hors texte et des composants d'interface
Les règles de contraste ne se limitent pas au texte. Les WCAG fixent aussi un minimum de 3:1 pour les contours visuels des composants interactifs et des graphiques porteurs de sens, ce que le vérificateur signale sous Composants d'interface. Cela couvre la bordure d'un champ de saisie, le contour d'un bouton, la coche à l'intérieur d'une case à cocher, les indicateurs de focus, et les parties d'une icône ou d'un graphique qu'un utilisateur doit percevoir pour comprendre. Une bordure de champ gris pâle sur une carte blanche est un échec classique de cette règle, même quand le libellé qu'elle contient passe sans peine.
Concevoir les commandes pour franchir le 3:1 par rapport à leur environnement signifie que les gens peuvent réellement les trouver et les actionner, et pas seulement lire les mots situés à côté. Testez les bords et les états du composant, et pas uniquement son texte.
Échecs courants et comment les corriger
Quelques schémas échouent encore et encore. Le texte gris pâle d'espace réservé ou secondaire sur du blanc est le plus courant ; des valeurs comme un gris moyen proche de #999999 sur du blanc tombent sous 4,5:1 et doivent être assombries. Les couleurs de marque sont une autre récidiviste, en particulier les bleus, verts et oranges de teinte moyenne employés pour le corps du texte ou pour du texte blanc sur un bouton coloré, où l'appariement reste souvent juste en deçà de AA. Les fines bordures claires sur des arrière-plans clairs manquent elles aussi régulièrement le seuil de 3:1 des composants d'interface.
Les corrections sont généralement minimes. Assombrissez le premier plan ou éclaircissez l'arrière-plan jusqu'à ce que le rapport franchisse la ligne, ce qui, en termes de HSL, revient souvent à ajuster modestement la luminosité tout en gardant la teinte intacte pour que la marque reste reconnaissable. Pour du texte sur une image ou un dégradé chargé, ajoutez un voile uni ou semi-transparent derrière lui afin que la zone la plus défavorable passe quand même. Saisissez ici vos vraies couleurs, regardez le rapport et les badges AA et AAA se mettre à jour, et ajustez les valeurs jusqu'à ce que chaque niveau requis par votre projet passe au vert.
Questions fréquentes
Qu'est-ce qu'un rapport de contraste et qu'est-ce qui est considéré comme bon ?
Quelle est la différence entre AA et AAA ?
Pourquoi le grand texte réussit-il alors que le texte normal échoue ?
Quel format de couleur dois-je saisir ?
Le vérificateur est-il gratuit et envoie-t-il mes couleurs quelque part ?
Outils similaires
Continuez avec ces outils pratiques