Grille de contraste

Un système de design n'est pas une liste de couleurs, c'est une liste d'appariements — et la question qui se pose vraiment est : laquelle peut aller sur laquelle. Vérifier cela une paire à la fois, c'est n² visites chez un vérificateur de contraste. Pour une palette de huit, cela fait soixante-quatre vérifications, ce qui explique que personne ne le fasse et que des systèmes de design partent avec des combinaisons que personne n'a jamais testées. Voici un vérificateur de contraste de palette qui les fait toutes d'un coup — une matrice de couleurs WCAG pour l'ensemble. Collez votre palette et chaque couleur est vérifiée comme texte face à chaque couleur comme fond, avec le rapport de contraste et la note WCAG dans chaque cellule. Le vert atteint le niveau que vous avez choisi, l'ambre ne franchit que la barre plus basse du grand texte, le rouge échoue. Collez-la sous la forme que vous avez déjà. Hex, rgb(), hsl() ou noms de couleurs CSS, séparés par des retours à la ligne, des virgules ou des espaces, avec la syntaxe des propriétés personnalisées encore accrochée si c'est ce que vous avez copié — il lit tout cela et vous signale ce qu'il n'a pas pu lire. La grille est aussi ce qui vaut la peine d'être conservé. Elle est faite pour être capturée telle quelle dans une spécification de design ou une pull request, parce que la vérification n'a lieu qu'une fois et que l'image servira un an. Tout fonctionne dans votre navigateur.