Vérificateur de contraste des couleurs

Ce qui compte comme un texte de grande taille

Les WCAG définissent un texte de grande taille comme un texte d’au moins 18 points, soit environ 24 pixels CSS, ou de 14 points en gras, soit environ 18,7 pixels. Seul un texte de ces tailles peut utiliser le seuil réduit de 3:1 ; le texte courant, les légendes et les libellés de formulaires doivent atteindre 4,5:1 pour le niveau AA. Les ratios vont de 1:1 pour des couleurs identiques à 21:1 pour du noir sur du blanc. Les contours des boutons, les bordures des champs, les indicateurs de focus et les icônes porteuses de sens relèvent d’une règle distincte, le contraste non textuel, qui exige un ratio de 3:1 avec les couleurs adjacentes.

Couleurs transparentes et exemptions

Le vérificateur a besoin de couleurs opaques. Pour du texte ou des superpositions semi-transparents, calculez la couleur réellement affichée en la mélangeant avec son arrière-plan dans le mélangeur de couleurs, en utilisant l’opacité comme pondération, puis vérifiez cette couleur.

Les commandes désactivées, les éléments purement décoratifs et les logos sont exemptés des règles de contraste. Le texte indicatif d’un champ de formulaire ne l’est pas, raison pour laquelle les textes indicatifs gris pâle font partie des erreurs les plus courantes.

Comment l'utiliser

1. Saisissez des valeurs #RGB ou #RRGGBB valides et tout pourcentage demandé.
2. Exécutez l'opération couleur fixe, locale au navigateur.
3. Examinez les échantillons et copiez le résultat ou les valeurs de la palette.

Confidentialité et limitations

Les valeurs de couleur restent sur cet appareil. Le résultat de contraste est un contrôle mathématique, pas une garantie générale de conformité WCAG ; le contexte, le rendu des polices, le contraste non textuel et les états d'interface doivent encore être évalués.