Vérificateur de contraste des couleurs

Un texte trop peu contrasté est le défaut d’accessibilité le plus répandu sur le web, et aussi le plus simple à corriger — à condition que quelqu’un vérifie avant que la palette soit figée. L’outil ci-dessus prend une couleur de premier plan et une couleur d’arrière-plan, et indique le rapport de contraste WCAG ainsi que les quatre seuils de conformité qui comptent.

Comment ça marche

Saisissez deux couleurs hexadécimales ou utilisez les sélecteurs natifs. L’outil calcule la luminance relative de chaque couleur selon la formule des WCAG 2 : chaque canal est ramené entre 0 et 1, puis linéarisé (les valeurs supérieures à 0,03928 sont élevées à la puissance 2,4 après un décalage), puis pondéré à 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu. Ce sont ces coefficients qui expliquent pourquoi le vert domine et le bleu pèse à peine : ils reflètent la sensibilité de la vision humaine à chaque partie du spectre.

Le rapport vaut ensuite (L_lighter + 0.05) / (L_darker + 0.05), arrondi à deux décimales. Il va de 1:1 pour deux couleurs identiques à 21:1 pour du noir pur sur du blanc pur, et il est symétrique : inverser premier plan et arrière-plan donne le même résultat.

Quatre verdicts sont établis à partir de ce rapport :

• AA, texte normal — exige 4,5:1. C’est le seuil retenu par la plupart des audits.
• AA, grand texte — exige 3:1. « Grand » signifie 18 pt (24 px) en graisse normale, ou 14 pt (18,66 px) en gras.
• AAA, texte normal — exige 7:1.
• AAA, grand texte — exige 4,5:1.

Interpréter le résultat

AA est l’objectif réaliste. Le niveau AA des WCAG 2.1 est la référence de la plupart des marchés publics, de l’European Accessibility Act et des dispositifs comparables. Viser AAA vaut la peine pour le corps de texte, mais c’est réellement difficile avec une palette de marque, et les WCAG elles-mêmes ne recommandent pas d’imposer AAA à l’ensemble d’un site.

Les composants d’interface ont leur propre seuil. Le critère de succès 1.4.11 exige 3:1 pour la délimitation visuelle des contrôles — bordures de champs, indicateurs de focus, états des interrupteurs, et les parties d’une icône qui portent du sens. Un formulaire dont les champs sont cernés d’un gris clair à la mode échoue souvent sur ce point, alors même que le texte à l’intérieur passe.

Un placeholder, c’est du texte. Tout comme les libellés désactivés que l’utilisateur est censé lire, et le texte incrusté dans les images. Griser un élément ne le dispense de rien.

Pour les dégradés et les images, prenez le pire cas. Une légende posée sur une photo n’a pas le même rapport d’un pixel à l’autre. Mesurez le point le plus clair de l’arrière-plan face à votre texte, pas la moyenne, ou ajoutez un voile derrière le texte pour maîtriser le fond.

Échouer de peu, c’est échouer. 4,4:1 ne passe pas. Baisser la luminosité de quelques pour cent en HSL suffit en général — le convertisseur de couleurs rend cet ajustement simple, car en conservant la teinte et la saturation tout en diminuant la luminosité, la couleur reste parfaitement reconnaissable.

Sa place dans l’ensemble

Le contraste n’est qu’un critère parmi d’autres, mais c’est celui qui touche le plus de monde : la basse vision est fréquente, tout comme le plein soleil, les écrans bon marché et le simple fait que nous vieillissons presque tous. Le balisage sémantique, la gestion du focus et les alternatives textuelles complètent le tableau, et l’essentiel de HTML5 couvre les éléments structurels dont dépendent les technologies d’assistance. Si vos couleurs sont produites à l’exécution — sélecteur de thème, palette de graphique, étiquettes choisies par l’utilisateur —, la vérification a sa place dans le code autant qu’en revue, et les fondamentaux de JavaScript sont le point de départ pour calculer la luminance à la volée.

Deux limites de cet outil, clairement énoncées. Il implémente le rapport des WCAG 2, et non le modèle APCA, plus récent, à l’étude pour WCAG 3, qui note différemment les mêmes paires. Et il n’accepte que des couleurs hexadécimales opaques : pour un texte semi-transparent, composez d’abord la couleur sur son arrière-plan réel, puis vérifiez le résultat.