Vérification de contraste de couleur de texte
Comparer les couleurs opaques du texte sRGB avec des seuils de contraste WCAG non arrondis.
Vos données
Vos résultats
À votre dispositionVos résultats s’afficheront ici.
Comment ça marche
Calculez la luminance relative de WCAG sRGB et comparez le rapport de contraste non arrondi avec les seuils de texte normaux et grands. Un simple aperçu et un rapport texte conservent les couleurs fournies sans changer la palette du site.
Quelques points à connaître
Opaque 3/6 chiffres sRGB seulement. Pas d'alpha, de gradients, de couleurs à large spectre, d'imagerie, d'anti-aliasing rendu ou de tests de contraste non textuel. WCAG a des exceptions; une paire de couleurs de passage n'établit pas l'accessibilité d'une page.
Quand utiliser cet outil
Le contraste du texte dépend de la différence de luminance relative entre un premier plan et un arrière-plan, et non de la différence entre deux couleurs. Fournir deux couleurs opaques sRGB hexagonales pour voir leur rapport et séparer les résultats de seuil de texte normal et grand. Les décisions utilisent la valeur non arrondie, car l'arrondi peut déplacer une valeur proche de la limite sur un seuil affiché. L'aperçu illustre la paire fournie sans changer cette palette de site. Une paire de passages n'établit pas l'accessibilité d'une page : taille réelle du texte, poids, exceptions et le fond rendu doit encore être revu.
- Vérifiez un texte proposé et une paire de fond solide.
- Étudier un ratio proche d'un seuil AA.
- Enregistrer un court rapport couleur-paire pour un examen de conception.
Comment utiliser le témoin de contraste de couleur de texte
Entrez deux couleurs opaques de hexagone
Utilisez #RGB ou #RRGGBB pour le texte et l'arrière-plan. La transparence et les valeurs à grande échelle ne sont pas soutenues.
Réviser séparément le texte normal et le texte gros
Lisez le rapport, les résultats AA et AAA. Appliquer le statut de grand texte seulement lorsque la taille et le poids réels répondent à la définition.
Inspectez l'aperçu et le rapport
Utilisez l'aperçu comme illustration et téléchargez le rapport texte. Vérifiez séparément l'arrière-plan de la page, le traitement des polices et toutes les exceptions applicables.
Texte noir sur blanc
Entrées
Texte #000000, fond #ffffff.
Résultat
Le rapport est de 21:1 et répond aux seuils AA/AAA normaux et importants affichés.
Ce que ça veut dire
Ceci vérifie la paire fournie; il ne vérifie pas la mise en page, l'interaction, les indicateurs de focalisation ou tout un site Web.
Erreurs courantes à éviter
Comparaison d'un rapport arrondi
Un nombre arrondi affiché peut masquer une défaillance juste en dessous d'un seuil. Les décisions utilisent le ratio sous-jacent.
Appeler n'importe quelle rubrique grand texte
Le texte doit répondre à la définition de la taille/poids. Une étiquette de cap sémantique ne se qualifie pas à elle seule.
Ignorer le contexte réel
Un dégradé, une image ou une couche translucide peut rendre une paire différente des couleurs solides saisies.
Foire aux questions
Définitions, cas de bordure et prochaines étapes pratiques pour cet outil. Rechercher tous les outils FAQ
Quels formats de couleurs sont pris en charge ?
Opaque à trois ou six chiffres sRGB hexagonal avec un # leader. Les valeurs courtes sont élargies. Alpha, les couleurs nommées, les gradients et les valeurs de large-gamut ne sont pas acceptés.
Qu'est-ce que le texte normal AA?
Pour la paire fournie, le rapport minimal testé est 4.5:1. Examiner séparément les exceptions au critère et le contexte réel du texte rendu.
Qu'est-ce qui se qualifie de texte volumineux?
Au moins 18 points, soit 24 pixels CSS ou au moins 14 points gras, sur 18.67 pixels CSS. Une étiquette dans cet outil ne change pas votre texte rendu.
Pourquoi 4.5 peut-il encore échouer près d'une frontière?
La classification utilise le ratio non arrondi. Une valeur juste au-dessous de 4.5 n'atteint pas ce seuil même si un court écran tourne vers le haut.
Quels sont les seuils AAA?
Les vérifications affichées utilisent 7:1 pour le texte normal et 4.5:1 pour le grand texte. Ce sont des résultats de paire de couleurs, pas une évaluation globale de la conformité.
L'inversion du premier plan et du fond change-t-elle le rapport?
C'est pas vrai. Le rapport compare symétriquement la luminosité plus légère et plus foncée. L'effet visuel et le contexte de lecture peuvent encore différer.
Peut-il tester des boutons, des icônes ou des indicateurs de mise au point?
Cet outil explique le contraste texte. Les critères non textuels et les états d'interaction exigent leur propre examen plutôt qu'une conclusion générale de ces résultats.
Un résultat de passage signifie-t-il que le site Web est accessible?
C'est pas vrai. Le contenu, l'accès au clavier, la structure, les étiquettes, le focus, le mouvement et bien d'autres exigences ne sont pas inspectés par un calcul bicolore.
Sources et méthode
Utilisez les références ci-dessous pour vérifier les définitions et le guide de la plateforme. La portée et les limites du modèle sont expliquées ci-dessus. Lisez nos normes éditoriales.