Un contraste insuffisant entre le texte et l'arrière-plan est l'un des problèmes qui revient le plus souvent dans les audits d'accessibilité, et en même temps l'une des erreurs les plus faciles à éviter. Le problème survient lorsque du texte gris clair se trouve sur un arrière-plan blanc, lorsque les boutons ne sont visibles que par un léger changement de couleur, ou lorsque le texte d'espace réservé dans un champ de formulaire sert de seule indication de ce qui doit être rempli. Pour les personnes malvoyantes, mais aussi pour quiconque utilise un écran à la lumière du soleil éclatante, le texte devient littéralement illisible.
WCAG 2.1, la norme à laquelle EN 301 549 se réfère, prescrit au niveau AA un rapport de contraste minimal entre le texte et l'arrière-plan sur lequel il se trouve : généralement 4,5 contre 1 pour le texte ordinaire et 3 contre 1 pour le texte de grande taille et pour les composants d'interface utilisateur tels que les boutons et les contours de formulaires. Cela peut sembler technique, mais l'idée sous-jacente est simple : le contraste n'est pas un choix esthétique, c'est une condition pour communiquer l'information.
Où les choses s'en vont mal dans la pratique
Les problèmes de contraste surgissent rarement intentionnellement. Ils s'introduisent discrètement par le biais de choix d'identité visuelle qui semblent parfaits sur un grand écran net dans un studio de conception, mais sur un écran moyen utilisé par un utilisateur moyen, finissent par se situer juste en dessous de la norme. Un texte de bouton gris clair sur un arrière-plan de couleur pastel en est un exemple classique. Il en va de même pour les liens qui ne sont identifiables que par une différence de couleur, sans soulignement ou autre signal visuel, ce qui fait que les personnes atteintes de daltonisme ne les voient simplement pas comme cliquables.
Un autre motif récurrent est l'état de survol : un bouton qui au repos respecte les normes, mais qui change lors du mouvement de la souris vers une combinaison de couleurs qui n'a pas été testée. Les messages d'erreur dans les formulaires sont également une erreur courante : du texte rouge sur un arrière-plan rouge clair semble cohérent avec l'identité visuelle, mais n'atteint souvent pas le rapport requis. Pour ceux qui sont curieux de voir à quoi ressemblent ce type de problèmes dans leur propre environnement, ils peuvent en quelques questions voir où votre site en est sans avoir besoin de créer un compte au préalable.
Pourquoi une analyse automatique résout cela partiellement, mais non entièrement
Les rapports de contraste sont faciles à mesurer automatiquement : un scanner lit les valeurs de couleur du texte et de l'arrière-plan et calcule le rapport. C'est donc l'un des rares critères WCAG qu'un outil peut tester de manière fiable. Ce qu'une analyse ne voit pas, c'est le contraste qui n'apparaît qu'après une interaction, comme un menu déroulant, une infobulle qui apparaît au moment du focus, ou un statut qui n'devient visible qu'après une action de l'utilisateur. C'est précisément pourquoi chaque rapport indique quelle partie a été testée automatiquement et quelle partie nécessite une évaluation manuelle ; le contraste est un point fort de l'analyse automatique, mais ce n'est pas tout ce qu'il y a.
Comment l'éviter de façon structurelle
Le moyen le plus courant d'éviter ce problème durablement est de spécifier le contraste au niveau du système de conception plutôt que par page. Lorsque les couleurs de base d'une identité visuelle sont déjà testées par rapport à la norme lors de leur définition, un rédacteur ou un développeur n'a pas besoin de vérifier cela à chaque fois. Cela empêche également qu'une nouvelle page, une bannière d'action temporaire ou un widget acquis auprès d'un tiers compromette imperceptiblement le rapport de contraste.
Il est également judicieux d'inclure le contraste explicitement à chaque modification visuelle du site, non seulement à la première livraison. Un renouvellement d'identité visuelle, un nouveau thème saisonnier ou un style de bouton modifié peut introduire un problème qui n'existait pas dans la version précédente. L'accessibilité n'est pas, en ce sens, une case à cocher une seule fois, mais un point d'attention qui accompagne la maintenance. Vous en saurez plus sur la façon dont ce contrôle continu fonctionne en pratique en lisant une explication de l'origine de l'évaluation.
Enfin, il est utile de ne pas seulement regarder la norme minimale, mais l'intention qui la sous-tend : tout le monde, même dans des conditions d'éclairage moins idéales ou sur un écran plus ancien, peut-il vraiment distinguer le texte et les boutons. Les cas de doute fréquemment posés, par exemple si un logo ou une image décorative doit également respecter l'exigence de contraste, sont développés sur la page réponses aux questions qui reviennent régulièrement.
Voulez-vous savoir si le contraste, et les autres points d'achoppement récurrents, se posent également dans votre propre environnement ? La quick-scan gratuite en donne une première indication, et la base de connaissances avec des sujets sélectionnés selon chaque situation montre comment cette question est liée aux autres obligations relatives à la directive européenne sur l'accessibilité.