Calculer le contraste WCAG des couleurs

Il renvoie la luminance de chaque couleur, le rapport de contraste obtenu et des indicateurs précis de réussite AA et AAA pour le texte normal et le grand texte. Vous pouvez l’utiliser pour contrôler des jetons de conception, valider des couleurs d’interface avant publication ou ajouter un contrôle d’accessibilité reproductible à un processus automatisé. Les entrées sont des couleurs hexadécimales explicites, les calculs sont déterministes et tout format incorrect produit une erreur utile. L’outil web convient aux contrôles ponctuels ; chaque appel par API coûte $0.002.

Comprenez les valeurs fournies par le calculateur

Le résultat commence par normaliser les deux entrées sous forme de couleurs hexadécimales minuscules à six chiffres ; une notation courte comme #fff devient donc systématiquement #ffffff. Il indique ensuite la luminance relative du premier plan et de l’arrière-plan. Cette luminance varie de zéro pour le noir à un pour le blanc. Elle est dérivée des canaux sRGB linéarisés, puis pondérée afin de représenter les sensibilités différentes de l’œil à la lumière rouge, verte et bleue. Le rapport de contraste compare la luminance la plus claire à la plus sombre et va de 1:1 pour deux couleurs identiques à 21:1 pour le noir et le blanc. Le rapport affiché est arrondi à deux décimales, mais chaque décision utilise la valeur complète non arrondie. Ainsi, une valeur affichée à 4.50 ne réussit pas si sa valeur réelle reste inférieure à 4.5. La réponse regroupe quatre booléens pour le texte normal et le grand texte, faciles à présenter à une équipe de conception ou à vérifier dans des tests automatisés.

Saisissez des couleurs valides et interprétez AA et AAA

Indiquez le premier plan et l’arrière-plan sous forme de couleurs hexadécimales à trois ou six chiffres, avec ou sans croisillon initial. Les valeurs #123, 123, #112233 et AABBCC sont acceptées puis normalisées. Les noms de couleurs CSS, les expressions rgb() ou hsl(), les valeurs hexadécimales alpha à quatre ou huit chiffres, les chaînes vides et les valeurs non textuelles sont refusés, car l’opacité et la composition demandent davantage de contexte. Pour un texte normal, WCAG AA impose au moins 4.5:1 et AAA impose 7:1. Pour un grand texte, AA demande 3:1 et AAA demande 4.5:1. Le grand texte correspond généralement à au moins 18 points en graisse normale ou 14 points en gras. Cette capacité n’examine pas la typographie ; elle fournit les deux matrices afin que votre application retienne la bonne. Un rapport réussi n’est qu’un élément d’un contrôle d’accessibilité et ne prouve pas que toute une interface est accessible.

Intégrez les résultats aux processus de conception et de livraison

Utilisez les véritables jetons de premier plan et d’arrière-plan du composant plutôt que des couleurs prélevées dans une capture compressée. Lors d’un contrôle manuel, comparez le corps du texte, le texte secondaire, les liens, les libellés de boutons, les aides de formulaire, les indicateurs de focus et les états désactivés à chaque surface concernée. Dans un système de conception, conservez une petite matrice de paires approuvées et appelez l’API à chaque changement de palette. Un contrôle d’intégration continue peut refuser une paire proposée lorsque AA est faux pour le texte normal, tout en autorisant une combinaison décorative ou un grand titre selon une règle documentée. Enregistrez les couleurs normalisées et le rapport avec le test afin que les réviseurs reproduisent le constat. Chaque appel automatisé coûte $0.002 ; une entrée incorrecte produit une erreur. L’algorithme n’utilise ni réseau, ni hasard, ni heure courante : une même paire donne toujours le même résultat. Pour les transparences, dégradés, photos ou états interactifs, déterminez d’abord les couleurs rendues ou utilisez un audit de navigateur complet.