Comment utiliser Color Contrast Checker
- Saisissez la couleur du texte (HEX) et ajustez les options au besoin.
- Exécutez l'outil et inspectez ses résultats, ses preuves et ses limites.
- Copier ou télécharger le résultat, puis le vérifier par rapport au site Web, aux données sources ou aux dossiers commerciaux réels.
Essayez un exemple concret
Comparez un bouton couleur de marque avec du texte blanc et sombre avant de choisir sa couleur d'étiquette.
Comment interpréter les résultats
Contrast utilise les couleurs saisies et les calculs de luminance relative standard. La taille du texte, le poids, les états et l'interface complète doivent encore être revus. Passer une paire de couleurs n'établit pas la conformité globale.
Foire aux questions
Le contraste de couleur de passage satisfait-il à toutes les exigences d'accessibilité?
Pas complètement. La navigation par clavier, les étiquettes sémantiques, les indicateurs de focalisation et le texte alt sont également nécessaires.
Qu'est-ce qui compte comme grand texte?
WCAG grand texte se réfère généralement à environ 18pt ou 14pt bold et plus, selon le rendu de police.
La couleur transparente est-elle supportée ?
Des valeurs HEX opaques sont actuellement requises. Veuillez d'abord calculer la couleur réelle mélangée.
Quelles sont les exigences de contraste de couleur WCAG?
WCAG 2 exige, au niveau AA, un rapport de contraste d'au moins 4,5:1 pour le texte normal et de 3:1 pour le texte volumineux (environ 24 px réguliers ou 18,66 px gras et plus); au niveau AAA, d'au moins 7:1 pour le texte normal et de 4.5:1 pour le texte volumineux. Les éléments non textuels tels que les icônes et les bordures d'entrée ont également besoin d'au moins 3:1 à l'AA. Le noir sur le blanc est 21:1, et le texte gris clair sur le blanc tombe souvent en dessous de 4.5:1, l'échec le plus fréquent.