Exemples de mauvais contraste de couleurs, mesurés et corrigés
Exemples de mauvais contraste de couleurs
Exemples de mauvais contraste de couleurs et comment corriger chacun | We.Inc
Huit exemples courants de mauvais contraste de couleurs sur des pages de boutique réalistes, chacun avec son ratio WCAG calculé, la raison de l'échec et un correctif à tester en direct.
Un mauvais contraste de couleurs, c'est un texte ou un contrôle dont la couleur est trop proche de ce qui se trouve derrière lui, si bien que de nombreux visiteurs peinent à le lire. Les coupables habituels sont le texte gris pâle, le blanc sur orange ou vert vif, les textes indicatifs des champs et les titres posés sur des photos. Les WCAG 2.2 exigent 4.5:1 pour le texte normal ; chaque exemple ci-dessous affiche son ratio.
Le ratio de chaque exemple avant et après correction
Exemple
Avant
Après
Texte courant gris clair
Texte indicatif utilisé comme libellé
Texte blanc sur un bouton orange vif
Texte blanc sur un badge vert clair
Texte gris sur une carte grise
Texte bleu de marque sur un panneau sombre
Titre blanc sur une photo pâle
Voici des erreurs que l'on retrouve sans cesse sur les sites de petites entreprises, reconstruites ici avec nos propres couleurs pour que vous puissiez voir les chiffres. Chacune indique la règle qu'elle enfreint, et l'éditeur vous permet d'essayer un correctif et de voir le ratio évoluer.
Repérez le texte le plus petit et le plus pâle de la page : dates, légendes, pieds de page, indications de formulaire.
Vérifiez-le par rapport au fond exact sur lequel il se trouve, y compris les cartes et bandeaux teintés.
Pour du texte sur une photo, testez-le par rapport à la partie la plus claire de l'image derrière les lettres.
Corrigez d'abord en modifiant la luminosité. Une nuance plus sombre ou plus claire de la même teinte préserve l'aspect de la marque.
Ne jugez pas le contraste uniquement sur un écran d'ordinateur lumineux. Regardez la page sur un téléphone en extérieur.
Les boutons désactivés sont exemptés dans les WCAG, mais assurez-vous qu'un bouton actif ne ressemble jamais à un bouton désactivé.
Le texte au survol et au focus compte aussi. Le W3C inclut le texte affiché au survol ou au focus clavier.
Si un bandeau de promotion utilise une couleur de marque claire, mettez-y du texte foncé plutôt que blanc.
Les ratios entre 3:1 et 4.5:1 conviennent aux grands titres et aux icônes, pas aux paragraphes.
Questions fréquentes
Pourquoi le texte blanc sur orange échoue-t-il si souvent ?
L'orange et le jaune sont des couleurs vives, leur luminance est donc proche de celle du blanc. Notre orange d'exemple #F5A623 ne donne qu'environ 2:1 avec du texte blanc.
Le texte indicatif d'un champ doit-il respecter le contraste ?
Oui. L'explication du W3C sur le critère de succès 1.4.3 cite le texte indicatif parmi les textes concernés. Un libellé visible au-dessus du champ reste la meilleure pratique.
Comment vérifier un texte posé sur une photo ?
Mesurez par rapport à la partie de l'image située juste derrière le texte, en partant de la zone la plus claire. Le W3C considère comme un échec les images de fond sans contraste suffisant.
Un lien coloré sans soulignement est-il un échec de contraste ?
C'est un problème d'utilisation de la couleur au titre du critère de succès 1.4.1, selon lequel la couleur ne doit pas être le seul moyen visuel de transmettre une information. Un soulignement règle le problème.
Les boutons désactivés grisés posent-ils problème ?
Le texte des composants d'interface inactifs n'est soumis à aucune exigence de contraste selon le critère 1.4.3. Vérifiez simplement que le bouton est réellement inactif, et pas seulement stylé comme tel.
Pourquoi ces erreurs sont si fréquentes
Les maquettes sont souvent validées sur un grand écran lumineux où le texte pâle paraît encore net. La même page sur un vieux téléphone avec la luminosité baissée raconte une tout autre histoire.
Les couleurs de marque font le reste. Un orange gai ou un vert citron rend très bien sur une forme, puis quelqu'un y pose du texte blanc parce que c'est l'apparence habituelle d'un bouton aux couleurs de la marque.
La règle qui ne parle pas de ratios
Le critère de succès 1.4.1 est indépendant des ratios : il exige que la couleur ne soit jamais le seul moyen de présenter une information. Les liens signalés uniquement par la couleur, les champs obligatoires marqués seulement en rouge et les graphiques distingués uniquement par la teinte l'enfreignent tous.
Associez la couleur à autre chose : un soulignement, une icône, un libellé, un motif.
Ce qui ne va pas dans chaque exemple
Problème et correctif pour chaque exemple
Exemple
Pourquoi il échoue
Correctif
Texte courant gris clair
Un gris pâle paraît apaisant dans une maquette, mais sur un téléphone en plein jour il s'efface.
Foncez le gris jusqu'à #595959, qui atteint 7:1 sur blanc.
Texte indicatif utilisé comme libellé
L'indication dans un champ vide est généralement pâle, et les WCAG considèrent ce texte indicatif comme du texte qui doit lui aussi être contrasté.
Gardez un libellé visible au-dessus du champ et foncez l'indication jusqu'à #6B7280.
Texte blanc sur un bouton orange vif
Les tons moyens vifs comme l'orange et le jaune sont clairs, donc le texte blanc posé dessus a peu de contraste.
Utilisez un orange brûlé comme #C2410C, ou gardez l'orange vif et mettez-y du texte foncé.
Texte blanc sur un badge vert clair
Les badges de succès et de promotion utilisent souvent un vert vif sur lequel le texte blanc ne ressort pas.
Utilisez un vert plus profond comme #15803D derrière le texte blanc.
Texte gris sur une carte grise
Un gris qui passe sur du blanc peut échouer sur une carte teintée, car la carte est plus sombre que la page.
Utilisez un gris plus foncé, comme #4B5563, sur les surfaces teintées.
Texte bleu de marque sur un panneau sombre
Un bleu moyen qui fonctionne sur blanc devient terne sur anthracite : les deux couleurs se situent au milieu de l'échelle de luminosité.
Éclaircissez le bleu jusqu'à #93C5FD sur les panneaux sombres.
Titre blanc sur une photo pâle
Le texte sur une photo se vérifie par rapport aux parties de l'image situées derrière lui. Un ciel clair ou un mur blanc ne laisse au texte blanc aucun moyen de ressortir.
Placez le titre sur un bandeau uni ou fortement assombri, ou sortez-le de l'image.
Un lien signalé uniquement par la couleur
Si un lien ne se distingue de la phrase qui l'entoure que par sa couleur, les personnes qui ne différencient pas ces couleurs ne peuvent pas le trouver.
Soulignez les liens dans le texte courant. La couleur peut rester.
Correctifs en CSS
Un titre lisible sur une photo
Un bandeau sombre derrière les mots offre au texte blanc un fond stable, quelle que soit la photo.
Des liens qui ne dépendent pas de la couleur
Soulignez les liens dans les paragraphes et donnez au focus clavier un contour bien visible.
Éditeur avant/après
Choisissez un exemple, puis modifiez les couleurs corrigées pour voir jusqu'où vous pouvez pousser la nuance de votre marque avant l'échec.
Exemple
Couleur du texte
Couleur de fond
Contraste {r}
Lien par rapport au texte courant {r}
Atteint 4.5:1 pour le texte courant.
Atteint seulement 3:1, donc au mieux pour du grand texte ou des icônes.
Inférieur à 3:1. Difficile à lire pour beaucoup de gens.
Le correctif conserve les couleurs et ajoute un soulignement, la couleur n'est donc plus le seul signal.
Couleur hexadécimale invalide
Livraison gratuite cette semaine pour les commandes de plus de $50.
Ajouter au panier
Votre adresse e-mail
Le menu de printemps est arrivé
Lisez notre
politique de retour
avant de commander.
Les couleurs sont vérifiées dans votre navigateur avec la formule des WCAG 2.2.
Texte courant gris clair
Texte indicatif utilisé comme libellé
Texte blanc sur un bouton orange vif
Texte blanc sur un badge vert clair
Texte gris sur une carte grise
Texte bleu de marque sur un panneau sombre
Un lien signalé uniquement par la couleur
Un gris pâle paraît apaisant dans une maquette, mais sur un téléphone en plein jour il s'efface.
L'indication dans un champ vide est généralement pâle, et les WCAG considèrent ce texte indicatif comme du texte qui doit lui aussi être contrasté.
Les tons moyens vifs comme l'orange et le jaune sont clairs, donc le texte blanc posé dessus a peu de contraste.
Les badges de succès et de promotion utilisent souvent un vert vif sur lequel le texte blanc ne ressort pas.
Un gris qui passe sur du blanc peut échouer sur une carte teintée, car la carte est plus sombre que la page.
Un bleu moyen qui fonctionne sur blanc devient terne sur anthracite : les deux couleurs se situent au milieu de l'échelle de luminosité.
Si un lien ne se distingue de la phrase qui l'entoure que par sa couleur, les personnes qui ne différencient pas ces couleurs ne peuvent pas le trouver.
Foncez le gris jusqu'à #595959, qui atteint 7:1 sur blanc.
Gardez un libellé visible au-dessus du champ et foncez l'indication jusqu'à #6B7280.
Utilisez un orange brûlé comme #C2410C, ou gardez l'orange vif et mettez-y du texte foncé.
Utilisez un vert plus profond comme #15803D derrière le texte blanc.
Utilisez un gris plus foncé, comme #4B5563, sur les surfaces teintées.
Éclaircissez le bleu jusqu'à #93C5FD sur les panneaux sombres.
Soulignez les liens dans le texte courant. La couleur peut rester.