Contraste des couleurs pour textes, boutons et icônes

Pourquoi le contraste compte

Un texte pâle coûte des lecteurs. Les personnes malvoyantes, les lecteurs âgés et toute personne qui regarde un téléphone en plein soleil ont besoin d’une nette différence entre le texte et le fond. Les Règles pour l’accessibilité des contenus Web (WCAG) du W3C fixent donc des valeurs minimales pour le texte, pour les commandes comme les boutons et les champs de saisie, et pour les icônes et les graphiques. Elles se mesurent et se vérifient avant la mise en ligne.

Comment fonctionne le rapport de contraste

Le rapport de contraste compare la luminosité de deux couleurs. Les WCAG ne regardent pas la teinte mais la luminance relative : une valeur entre 0 pour le noir le plus sombre et 1 pour le blanc le plus clair. Les trois canaux rouge, vert et bleu sont convertis et pondérés : le vert compte le plus, le rouge moins et le bleu le moins. Le rapport vaut (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire. Le résultat se situe entre 1:1 pour deux couleurs identiques et 21:1 pour du noir sur du blanc.

Deux règles du W3C comptent en pratique. D’abord, les valeurs ne sont pas arrondies : un rapport de 4,499:1 n’atteint pas la limite de 4,5:1. Ensuite, le contraste se mesure par rapport au fond défini pour le texte. Si une page définit seulement une couleur de texte et aucune couleur de fond, le W3C considère cela comme un échec, car le fond par défaut du visiteur est inconnu. Définis toujours les deux couleurs ensemble.

Les trois critères de succès

• 1.4.3 Contraste (minimum), niveau AA : le texte et les images de texte ont besoin d’au moins 4,5:1, le grand texte d’au moins 3:1.
• 1.4.6 Contraste (amélioré), niveau AAA : le texte a besoin d’au moins 7:1, le grand texte d’au moins 4,5:1. C’est le niveau le plus strict, et il aide surtout pour les longs textes.
• 1.4.11 Contraste du contenu non textuel, niveau AA : au moins 3:1 par rapport aux couleurs voisines, pour tout ce qu’il faut voir pour reconnaître une commande et son état (par exemple la bordure d’un champ ou un indicateur de focus) et pour les parties de graphiques nécessaires à la compréhension, comme les icônes ou les lignes d’un graphique.

Ce qui compte comme grand texte

Un grand texte fait au moins 18 points, ou au moins 14 points en gras. Le W3C convertit cela en environ 24 pixels et environ 18,5 pixels en gras. Le grand texte peut avoir moins de contraste, car les lettres sont plus grandes et leurs traits plus épais. Attention aux polices fines : selon le W3C, le lissage peut faire paraître les polices fines ou inhabituelles plus pâles que leur couleur définie. Il recommande des polices plus épaisses ou une paire de couleurs nettement au-dessus du minimum.

Ce qui n’a pas besoin de réussir

• Les composants inactifs, comme un bouton désactivé.
• La pure décoration et le texte que personne ne peut voir.
• Le texte qui fait partie d’un logo ou d’un nom de marque.
• Le texte accessoire dans une image au contenu par ailleurs important, comme un panneau de rue sur une photo.

Erreurs courantes

• Gris clair sur blanc. Le gris des dates, légendes ou textes secondaires est souvent trop pâle : #999999 sur blanc n’atteint que 2,84:1. Le gris pur le plus clair qui réussit le niveau AA pour du texte normal sur blanc est #767676, avec 4,54:1.
• Texte sur image. Le contraste change avec chaque partie de la photo. Le W3C classe les images de fond sans contraste suffisant comme un échec (F83). Pose le texte sur une surface unie, assombris l’image derrière lui ou place le texte à côté de l’image. Vérifie l’endroit le plus clair derrière le texte.
• Texte indicatif (placeholder). L’indication grise dans un champ vide est du texte, et le critère 1.4.3 s’y applique. Un gris clair comme #9ca3af sur blanc n’atteint que 2,53:1. Un placeholder ne remplace pas non plus une étiquette visible.
• États de survol et de focus. Le texte qui apparaît ou change au survol de la souris ou au focus clavier doit respecter les mêmes valeurs. Un effet de survol ne doit pas réduire le contraste d’une commande ni affaiblir l’indicateur de focus. Un indicateur de focus que tu conçois toi-même a besoin de 3:1 par rapport au fond voisin.
• Texte blanc sur des couleurs de marque vives. Les boutons orange, jaunes, vert clair ou turquoise avec du texte blanc échouent souvent : du blanc sur #ff6600 atteint 2,93:1.
• Bordures et icônes pâles. Si la bordure est le seul repère qui montre où se trouve un champ de saisie, elle a besoin de 3:1 : #cccccc sur blanc a 1,60:1. Les icônes porteuses de sens sans texte, comme une flèche de liste déroulante ou une icône de fermeture, ont aussi besoin de 3:1.
• Ne vérifier qu’un seul thème. Si ton site a un mode sombre, vérifie ses paires de couleurs à part. Une couleur qui fonctionne sur blanc peut échouer sur un fond sombre.

Corriger une palette de marque sans perdre la marque

1. 1Note chaque couleur avec son rôle : texte, fond, accent ou bouton, bordure. Beaucoup de problèmes commencent quand une seule couleur fait tout.
2. 2Garde la couleur de marque là où les règles sont plus faciles à respecter ou ne s’appliquent pas : dans le logo, sur les grandes surfaces, pour la décoration et pour les grands titres.
3. 3Pour le texte et les petits éléments, utilise une nuance plus foncée ou plus claire de la même teinte. Si seule la luminosité change, la couleur reste reconnaissable : du texte blanc sur #c74f00, un orange plus foncé, atteint 4,61:1.
4. 4Ou change plutôt la couleur du texte. Un texte foncé sur une couleur de marque vive fonctionne souvent mieux que du blanc : #1a1a1a sur #ff6600 atteint 5,92:1.
5. 5Définis un seul gris pour le texte secondaire qui réussit, par exemple #767676 sur blanc, et utilise-le partout au lieu de plusieurs gris pâles.
6. 6Vérifie chaque état : normal, survol, focus, erreur et mode sombre. Enregistre les couleurs finales comme variables dans ta feuille de style, pour que plus personne ne choisisse une couleur pâle à la main.

Vérifier tes couleurs avec Do4U

L’outil Vérification du contraste des couleurs calcule ces valeurs pour tes propres couleurs. Tu saisis tes couleurs, une par ligne, et tu donnes un rôle à chacune : texte, fond, accent (par exemple un bouton) ou bordure. Le code vérifie chaque paire pertinente par rapport aux niveaux AA et AAA pour le texte normal et le grand texte, et par rapport à 3:1 pour les bordures, les icônes et les surfaces de bouton, sans arrondir vers le haut. Pour chaque paire qui échoue, tu obtiens la couleur la plus proche qui réussit, une fois plus foncée et une fois plus claire, dans la même teinte. Do4U construit aussi une palette ajustée, la vérifie à nouveau dans son ensemble et l’exporte en propriétés personnalisées CSS, en SCSS ou en JSON. Tout tourne dans le code, sans IA, et la vérification est gratuite.

La vérification ne connaît que les paires de couleurs que tu saisis. Elle ne voit ni les tailles de police, ni les images derrière le texte, ni la transparence, ni les états de survol et de focus : teste donc aussi les pages finies. Do4U construit le brouillon, tu vérifies et tu décides.