Vérificateur de contraste
Vérifiez les rapports de contraste WCAG des paires de couleurs, avec les verdicts AA et AAA et les suggestions de correctifs.
Vérificateur de contraste
Collez les paires de premier plan et d'arrière-plan, une par ligne — #7a1f2b sur #ffffff, #333, #eee ou rgb(0, 0, 0) #fff — et le rapport de contraste WCAG 2 de chaque paire revient instantanément, avec un verdict de réussite ou d'échec pour chaque niveau de conformité. Le rapport va de 1 : 1 (aucun contraste) à 21 : 1 (noir sur blanc) et est calculé à partir de la luminance relative exactement comme les directives la définissent, de sorte que les chiffres concordent avec les inspecteurs des navigateurs et les outils d'audit.
Les WCAG nomment deux niveaux. AA, la référence la plus importante en matière de lois et de contrats, nécessite 4,5 : 1 pour un texte normal et 3 : 1 pour un texte de grande taille. AAA, la cible la plus stricte, demande 7 : 1 et 4,5 : 1. Le texte compte aussi grand à partir de 18 pts (environ 24 px) en poids normal, ou à partir de 14 pts (environ 18,7 px) en gras — c'est pourquoi un titre peut passer à un taux d'échec d'un paragraphe. Le rapport détaille les quatre contrôles par paire ; basculez la sortie sur Compact pour une ligne par paire, ce qui est la lecture la plus rapide lorsque vous parcourez une palette entière.
Lorsqu'une paire manque AA pour le texte normal, activez « Suggérer une correction » et l'outil assombrit ou éclaircit le premier plan par petites étapes de luminosité, en conservant sa teinte, jusqu'à ce qu'il atteigne 4,5 : 1 - puis imprime l'hexagone de passage le plus proche, prêt à être recollé dans votre feuille de style.
Tout s'exécute dans votre navigateur ; les palettes de marque inédites ne quittent jamais votre appareil. Les couleurs peuvent être composées de 3 ou 6 chiffres hexadécimaux avec ou sans hachage, rgb() ou rgba(), ou un nom CSS commun – les 16 de base plus les plus populaires étendus. La liste CSS complète de 148 noms n'est délibérément pas incluse, alors écrivez les noms exotiques au format hexadécimal. Une ligne qui n'est pas une paire de couleurs est notée calmement et le reste continue à être traité.