Pourquoi 83.9% des sites web échouent au contraste des couleurs

Chaque année, WebAIM audite le million de pages d’accueil les plus visitées. L’étude 2026 a détecté des défauts de contraste sur 83.9% d’entre elles, avec en moyenne 34 occurrences de contraste insuffisant par page. L’année précédente, le chiffre était de 79.1%.

Le chiffre augmente. C’est ce qui est intéressant, car la vérification du contraste n’est pas un problème d’outillage. Le vérificateur de WebAIM est gratuit, l’est depuis des années, et tous les designers savent qu’il existe.

La vérification n’est pas le goulot d’étranglement

Demandez aux designers ce qui les empêche de corriger un défaut de contraste, et leurs réponses sont d’une constance frappante :

« La plupart veulent suivre les règles WCAG, mais tournent en rond sans savoir comment corriger les problèmes de contraste des couleurs. »

« Beaucoup vous diront de “choisir des couleurs accessibles” sans vraiment vous aider à comprendre comment faire, surtout quand vous devez vous en tenir à certaines couleurs de marque. »

« Pour la plupart des gens, WCAG est intimidant et déroutant. On vous dit ce qui doit passer, mais il manque des indications sur la manière d’y parvenir. »

Aucune de ces remarques ne porte sur la détection. Toutes portent sur l’étape suivante : savoir quoi changer.

Les outils existants répondent à « est-ce que ça passe ? », puis s’arrêtent. C’est une réponse complète à la mauvaise question. Le designer se doutait déjà que ça ne passait pas. Ce qu’il lui faut, c’est la couleur la plus proche qui fonctionne et qui évoque toujours la marque, et on le laisse la trouver en modifiant une valeur hex à tâtons jusqu’à ce que le chiffre passe au vert.

Quatre raisons pour lesquelles la situation empire au lieu de s’améliorer

Les couleurs de marque sont des contraintes, pas des choix. La couleur figure dans le logo, dans la présentation et dans une charte graphique validée. « Choisissez une autre couleur » n’est pas un conseil qu’un designer peut appliquer seul. Alors le défaut reste.

Le mode sombre a doublé la surface à couvrir. Chaque palette doit désormais fonctionner dans les deux sens, et la formule de WCAG 2 est la moins fiable dans la partie sombre. Un thème qui passe sur blanc et que l’on inverse sans revérifier est un défaut courant, et invisible.

Les design systems propagent une seule erreur partout. Un seul token au contraste insuffisant dans une bibliothèque de composants se reproduit dans tous les produits qui l’utilisent. Les systèmes démultiplient les effets, dans un sens comme dans l’autre.

Le contraste est vérifié en dernier. Comme l’a résumé un professionnel, beaucoup de designers « n’ajustent le contraste que vers la fin de la phase de conception, et seulement si c’est facile à faire sans abîmer leur design ». À ce stade, la couleur porte tout l’édifice, et la changer oblige à revenir sur des décisions que personne ne veut rouvrir.

Ce que le chiffre mesure, et ce qu’il ne mesure pas

Autant être précis. L’étude de WebAIM détecte les défauts automatiquement : elle repère donc les cas de texte sur fond uni et en manque d’autres, comme le texte sur une image, le texte sur un dégradé et tout ce qui demande un jugement humain.

83.9% est donc un plancher, pas un plafond. Le chiffre réel est plus élevé.

Cela ne signifie pas non plus que ces sites sont inutilisables. Beaucoup de défauts sont marginaux : un 4.2:1 qui devrait être un 4.5:1. Ils comptent, mais ce n’est pas la même chose qu’un texte invisible.

La correction qui passe vraiment à l’échelle

Les sites se corrigent un par un. Ce qui fait bouger le chiffre global, c’est de rendre le bon choix facile :

Mettez la contrainte dans le token, pas dans la relecture. Si votre design system livre --text-brand déjà calé sur une nuance conforme de l’échelle, personne n’a besoin de s’en souvenir. L’échelle s’en est souvenue pour vous.

Testez le contraste en CI. Un rapport insuffisant devrait faire échouer un build, comme un test unitaire en échec. Nous le faisons sur notre propre site : le build échoue si l’une de nos propres paires de couleurs cesse de passer notre propre outil. Dès la première exécution, il a détecté sept vrais défauts, dans une interface qui passait WCAG 2 partout.

Vérifiez à la taille et à la graisse que vous mettez en ligne. WCAG 2 ne voit pas la typographie : un rapport conforme sur une légende en filet de 12px ne prouve donc rien. APCA modélise cet aspect, et le résultat dérange : un texte de 14px en graisse normale ne peut passer à aucun niveau de contraste.

Donnez la réponse, pas le verdict. Si un outil peut calculer que le bleu de votre marque doit être 11% plus foncé pour passer tout en gardant sa teinte, il doit le dire au lieu d’afficher 3.02:1 et d’en rester là.

L’écart que cela comble

C’est pour ce dernier point que nous avons conçu notre vérificateur de contraste ainsi. Le diagnostic n’a jamais été la partie difficile.

Il cherche, sur l’axe de luminosité propre à votre couleur, la valeur la plus proche qui passe, conserve la teinte pour que le résultat évoque toujours votre marque, classe les candidats selon le peu que la couleur se déplace, et propose de modifier plutôt le fond lorsque c’est le compromis le plus petit.

Vous pouvez l’essayer avec une couleur à laquelle on vous a dit de renoncer.