Contraste des couleurs et WCAG : rendre un texte facile à lire

Un texte gris clair sur blanc paraît élégant dans la maquette, mais il est difficile à lire sur un téléphone au soleil, pour des yeux fatigués ou en cas de basse vision. Les règles d’accessibilité WCAG transforment « lisible » en un nombre que l’on peut vérifier.

Le rapport de contraste

Le contraste est un rapport qui va de 1:1 (même couleur) à 21:1 (noir sur blanc). Il repose sur la luminance relative, c’est-à-dire la clarté perçue de chaque couleur, le vert comptant le plus et le bleu le moins. C’est pourquoi un texte jaune sur blanc est presque invisible alors que le bleu sur blanc se lit bien.

Les seuils

                 Texte normal   Grand texte
AA  (minimum)    4,5:1          3:1
AAA (renforcé)   7:1            4,5:1

Grand texte = au moins 24px, ou 18,66px en gras

AA est le niveau auquel renvoient la plupart des lois et politiques d’accessibilité : considérez-le comme le minimum. AAA vaut la peine pour les longs textes de lecture. Les icônes, les bordures de champs et les indicateurs de focus porteurs d’information doivent atteindre au moins 3:1 selon WCAG 2.1.

Les associations qui échouent souvent

Le texte gris des placeholders, le texte blanc sur des couleurs de marque vives comme l’orange, le jaune ou le vert clair, et le texte posé sur des photos. Les écarts peuvent être minimes : #777777 sur blanc donne environ 4,48:1, juste sous AA, alors que #767676 donne environ 4,54:1 et passe.

Corrections rapides

Assombrissez le texte ou le fond d’un ou deux crans plutôt que de changer la teinte ; de petits changements de luminosité font beaucoup bouger le rapport. Mettez les libellés des boutons vifs en grand et en gras, ou utilisez un texte sombre plutôt que blanc. Sur une photo, ajoutez un voile sombre derrière le texte.

Le contraste n’est pas la seule règle de couleur

Les WCAG précisent aussi que la couleur ne doit pas être le seul moyen de transmettre une information. Un champ de formulaire signalé comme invalide uniquement par une bordure rouge, ou un graphique qui distingue ses courbes seulement par la couleur, met en échec les personnes daltoniennes, environ un homme sur douze. Ajoutez une icône, un libellé, un motif ou un style de ligne différent.

Le mode sombre

Les mêmes ratios s’appliquent aux fonds sombres. Du blanc pur sur du noir pur atteint 21:1, mais peut sembler agressif et donner l’impression que les lettres brillent pour certains lecteurs ; un gris clair sur un gris très foncé passe encore largement le niveau AA et se lit plus confortablement sur la durée. Vérifiez les deux thèmes, car une paire qui passe en mode clair échoue souvent une fois les couleurs inversées.

Du texte sur des images et des dégradés

Sur une photo ou un dégradé, le fond change derrière chaque lettre. Mesurez le contraste par rapport à la partie la plus claire du fond située derrière le texte, pas à la moyenne. Un calque sombre semi-transparent ou un bandeau plein derrière le texte rend le résultat prévisible.

Et ensuite ?

Le brouillon des WCAG 3 explore une nouvelle méthode de contraste appelée APCA, qui tient compte plus finement de la taille et de la graisse de la police. Ce n’est encore qu’un brouillon : les lois et les audits actuels se réfèrent aux WCAG 2.1 et 2.2, donc les seuils de 4,5:1 et 3:1 restent ceux à respecter.

Vérifier une association

Le vérificateur de contraste des couleurs de 4Dev affiche le rapport pour n’importe quelle couleur de texte et de fond, avec un aperçu en direct et un résultat réussi ou échoué pour AA et AAA, en texte normal et en grand texte. Le calcul utilise la formule WCAG 2 et s’effectue dans votre navigateur.

Ouvrir le vérificateur de contraste