Contraste des couleurs et accessibilité, avec le vérificateur

Pourquoi le faire

Une ligne de texte gris sur une page blanche peut paraître élégante sur votre propre écran et pourtant être illisible sur un téléphone en plein soleil, ou pour un lecteur malvoyant ou atteint d’une déficience de la vision des couleurs. Le contraste est la part mesurable de ce problème. Les Web Content Accessibility Guidelines (WCAG) le traduisent en un nombre, le rapport de contraste, avec des seuils de réussite que vous pouvez vérifier avant la livraison d’une maquette.

Ce guide montre comment lire ce nombre avec le vérificateur d’Outils de couleur, quels seuils s’appliquent, et pourquoi un rapport suffisant ne dit pas tout, surtout quand les couleurs portent un sens à elles seules.

Comment faire, avec l’outil

Outils de couleur propose trois onglets : Palette, Dégradé et Conversion et contraste. La vérification du contraste se trouve dans le troisième, et elle s’effectue sur votre appareil.

1. Ouvrez Conversion et contraste. Choisissez l’onglet sous le titre.
2. Saisissez vos deux couleurs. Renseignez Couleur du texte et Couleur d’arrière-plan. Vous pouvez écrire dans les champs HEX, RGB ou HSL : les deux autres suivent, de sorte qu’une valeur copiée depuis un fichier de maquette dans l’un de ces formats fonctionne.
3. Indiquez si le texte est grand. Cochez Grand texte (18 pt et plus, ou 14 pt en gras) si c’est le cas.
4. Lisez les verdicts. L’outil affiche le Rapport de contraste et deux lignes, AA — contraste minimal et AAA — contraste renforcé, chacune marquée Réussi ou Échec.
5. Ajustez et partagez. Modifiez une couleur et regardez le verdict se mettre à jour. Copier le lien vers ce résultat conserve les réglages dans une URL que vous pouvez envoyer à un collègue.

Si vous êtes encore en train de choisir vos couleurs, construisez une palette de base dans l’onglet Palette, avec une harmonie comme Complémentaire ou Analogue, puis apportez les paires que vous comptez utiliser dans l’onglet de contraste. Les harmonies choisissent des teintes qui paraissent équilibrées, pas des paires lisibles ensemble : vérifiez donc toujours les paires de texte.

Points de vigilance

Les seuils. Pour un texte courant, le niveau AA des WCAG demande un rapport d’au moins 4,5:1. Le niveau AAA demande 7:1. Un texte est considéré comme grand à partir de 18 pt, ou de 14 pt s’il est en gras. Le grand texte n’exige que 3:1 pour AA et 4,5:1 pour AAA. Le rapport va de 1:1, deux couleurs identiques, jusqu’à 21:1, noir sur blanc. Ce même seuil de 3:1 est celui que les WCAG fixent pour les éléments significatifs d’une interface, comme le contour d’un champ de saisie, même si le vérificateur compare seulement les deux couleurs que vous saisissez.

Un échec de justesse reste un échec. Un rapport de 4,4 ne passe pas le seuil de 4,5. N’arrondissez pas vers le haut. Si une couleur de marque échoue de peu, assombrissez un peu le texte ou éclaircissez un peu l’arrière-plan, puis vérifiez à nouveau.

Comment le nombre est calculé. Le rapport compare la luminance relative des deux couleurs, une mesure de la luminosité de chacune, après avoir converti chaque couleur de sa valeur sRGB enregistrée en lumière linéaire. Cette conversion comporte un petit point de coupure. Le vérificateur utilise 0,03928, la valeur imprimée dans le texte des WCAG 2.x. La norme sRGB plus récente donne 0,04045. Les deux diffèrent si peu que les rapports ne se séparent qu’aux décimales lointaines, mais utiliser la valeur des WCAG garde les résultats de cet outil alignés sur les chiffres publiés des WCAG.

La conversion entre formats peut décaler un canal d’une unité. HEX, RGB et HSL utilisent des valeurs sur 8 bits : un aller-retour peut donc déplacer un canal de 1. C’est un arrondi, pas un bogue, et cela ne change pas un verdict sauf si vous êtes exactement sur la limite.

Le contraste ne dit pas tout pour les couleurs catégorielles. Les graphiques, cartes et pastilles d’état utilisent souvent plusieurs teintes pour distinguer des catégories, par exemple une couleur par barre ou par courbe. Un rapport entre deux teintes de clarté similaire est proche de 1:1, même si elles semblent très différentes sur un écran couleur. La raison est que la formule ne mesure que la clarté, pas la teinte. Un rapport de contraste est donc le mauvais test pour savoir si l’on peut distinguer les catégories. Les personnes ayant une déficience de la vision des couleurs peuvent voir deux de ces teintes comme une seule, et en niveaux de gris ou à l’impression elles peuvent se confondre totalement. Ajoutez un second indice : étiquettes directes, motifs de ligne différents ou formes de marqueurs, et une nette différence de clarté entre catégories voisines. Le vérificateur peut aider pour la part de clarté, en montrant un rapport faible entre deux couleurs de catégories voisines, mais il ne peut pas vous dire que la légende est accessible.

La vérification ne porte que sur les deux couleurs que vous saisissez. Elle ne connaît ni une photo derrière le texte, ni une superposition, ni le reste de la maquette.

FAQ

Quel rapport de contraste faut-il pour un texte courant ?

Au moins 4,5:1 pour respecter le niveau AA des WCAG, et 7:1 pour AAA. Si le texte est grand, 18 pt et plus ou 14 pt et plus en gras, 3:1 suffit pour AA et 4,5:1 pour AAA. Cochez Grand texte dans l’outil pour qu’il applique la bonne paire de seuils.

Pourquoi le vérificateur indique-t-il un échec alors que mes couleurs me semblent correctes ?

Votre écran, votre vue et l’éclairage de la pièce ne sont pas ceux du lecteur. Le rapport est une norme reproductible, qui ne dépend d’aucun écran en particulier. Si une paire échoue, considérez le nombre comme le fait et ajustez les couleurs, plutôt que de vous fier à l’aspect sur votre écran.

Le texte indicatif ou un bouton désactivé sont-ils concernés ?

Les contrôles désactivés sont exemptés par les WCAG, mais le texte indicatif (placeholder) est du vrai texte et doit avoir un contraste suffisant pour être lu. En cas de doute, vérifiez la paire, et préférez une étiquette visible à des instructions uniquement en texte indicatif.