Comment corriger les contrastes WCAG d'une charte existante ?

La question des contrastes revient toujours au même moment : la charte existe, elle a été validée, le site est en ligne, et un audit signale que la moitié des textes ne respecte pas les seuils. Corriger les contrastes WCAG d'une charte existante est un exercice différent de la conception d'une palette accessible depuis une page blanche, parce qu'il s'agit de préserver une identité tout en atteignant des valeurs mesurables. C'est faisable dans la quasi totalité des cas, à condition de comprendre ce que mesure réellement le rapport de contraste, de savoir où les seuils s'appliquent, et d'accepter que certaines couleurs de marque ne puissent pas servir de couleur de texte.

Ce que le rapport de contraste mesure

Le vocabulaire du sujet est source de malentendus, et la première étape consiste à savoir ce que l'on calcule. Le rapport de contraste n'est pas une impression visuelle, c'est un nombre issu d'une formule, et il ne recouvre pas exactement ce que l'œil perçoit. Cette précision fait partie des fondamentaux que nous appliquons dans la rubrique création de site Internet.

Une formule, deux luminances

Le rapport se calcule à partir de la luminance relative de chacune des deux couleurs, une valeur comprise entre zéro pour le noir et un pour le blanc, obtenue en pondérant les composantes rouge, verte et bleue selon la sensibilité de l'œil. Le résultat s'exprime sous forme d'un rapport, du minimum de un pour un, deux couleurs identiques, au maximum de vingt et un pour un, noir sur blanc. Cette formule ne tient compte ni de la teinte, ni de la saturation, ce qui explique certains résultats contre intuitifs.

Pourquoi certains couples surprennent

Deux couleurs très différentes à l'œil peuvent avoir un rapport très faible, typiquement un rouge vif et un vert vif de luminances proches, qui donnent un texte pratiquement illisible malgré une différence de teinte spectaculaire. À l'inverse, deux nuances de la même couleur peuvent parfaitement satisfaire les seuils. C'est la raison pour laquelle l'appréciation visuelle ne remplace pas la mesure, et pour laquelle un graphiste expérimenté se trompe régulièrement sur ce point précis.

Les seuils applicables

Le niveau AA, qui est la référence retenue par la réglementation française pour les organismes concernés, demande un rapport d'au moins 4,5 pour 1 pour le texte courant, et 3 pour 1 pour le texte de grande taille, défini comme au moins vingt quatre pixels, ou dix huit pixels et demi en gras. Le niveau AAA porte ces valeurs à 7 et 4,5. Une exigence distincte, souvent oubliée, demande 3 pour 1 pour les composants d'interface et les éléments graphiques porteurs d'information.

Ce qui n'est pas concerné

Les logos et les marques ne sont pas soumis aux seuils, non plus que le texte purement décoratif ou celui qui figure dans une image illustrant un contenu par ailleurs disponible. Le texte d'un élément désactivé est également hors du champ. Ces exceptions sont réelles mais étroites, et elles ne doivent pas servir de porte de sortie : un texte désactivé illisible reste un problème d'usage, même s'il n'est pas un manquement au sens strict.

Contraste et transparence

Une couleur appliquée avec une transparence ne se mesure pas telle quelle : c'est la couleur résultante, après composition avec ce qui se trouve derrière, qui compte. Une même valeur peut donc être conforme sur un fond et pas sur un autre. C'est le cas le plus fréquemment manqué dans les audits automatiques, qui lisent la valeur déclarée sans calculer le rendu réel, et cela concerne notamment les textes posés sur une image ou sur un dégradé.

Ce que le seuil ne capte pas

Il faut enfin savoir que la formule employée est critiquée depuis plusieurs années par ceux là mêmes qui travaillent sur ces normes, parce qu'elle donne des résultats discutables sur certaines plages, notamment le texte clair sur fond sombre et les couleurs très saturées. Des travaux sont en cours sur un modèle de calcul plus proche de la perception réelle, qui pondère différemment la polarité et la taille des caractères. Cela ne change rien à ce qu'il faut faire aujourd'hui, la référence applicable restant celle en vigueur, mais cela invite à ne pas traiter un rapport de 4,6 comme une réussite et un rapport de 4,4 comme un échec : les deux sont à la limite, et le confort de lecture se joue autant sur la police et l'espacement que sur ces deux dixièmes.

Mesurer une charte existante

Le travail commence par un inventaire, et il révèle presque toujours que la palette réellement utilisée est plus large que la palette officielle. Cette étape se mène comme un audit technique, avec la même exigence de méthode que celle décrite dans notre article sur la manière d'automatiser des captures d'écran pour valider une refonte.

Recenser les couleurs réellement employées

Extraire des feuilles de style toutes les valeurs de couleur déclarées donne en général une liste bien plus longue que la charte, avec des dizaines de nuances proches héritées de composants tiers, d'anciennes versions et de corrections ponctuelles. Ce recensement est utile en soi : réduire cette liste à quinze ou vingt valeurs nommées, avant même de parler de contraste, simplifie considérablement tout le reste du travail.

Tester les couples réels, pas toutes les combinaisons

Il ne sert à rien de calculer le rapport entre toutes les paires possibles. Seuls comptent les couples effectivement utilisés, texte sur fond, bordure sur fond, icône sur fond, dans les contextes où ils apparaissent. La liste se construit en parcourant les composants du site plutôt que la palette, et elle compte en général entre trente et soixante couples pour un site de taille moyenne, ce qui reste parfaitement traitable en une matinée.

Tenir compte de la taille et de la graisse

Un même couple peut être conforme pour un titre et non conforme pour une mention légale en petit corps. Le relevé doit donc associer à chaque couple les tailles auxquelles il est employé, ce qui fait souvent apparaître le vrai problème : ce ne sont pas les couleurs principales qui échouent, mais les textes secondaires, mentions, légendes, étiquettes de formulaire, où l'on a volontairement réduit le contraste pour hiérarchiser l'information.

Ne pas oublier les états

Les états de survol, de focus, d'erreur et de sélection ont leurs propres couleurs, souvent définies à la va vite et jamais auditées. L'indicateur de focus est le plus critique, parce qu'il conditionne l'usage au clavier et qu'il doit lui même être visible sur son fond. Un site dont tous les textes sont conformes mais dont le focus est invisible reste inutilisable pour une partie de ses visiteurs, et cette situation est extrêmement courante depuis que les réinitialisations de style suppriment le contour natif du navigateur sans le remplacer.

Documenter le résultat

Le relevé doit produire un tableau lisible, une ligne par couple, avec le rapport mesuré, le seuil applicable et le verdict. Ce document sert de base à l'arbitrage avec le responsable de la marque, et il change la nature de la discussion : on ne débat plus d'une impression mais d'un écart chiffré, ce qui rend les décisions bien plus rapides à prendre. Ce tableau devient ensuite la référence de la charte corrigée, et il gagne à être publié avec elle plutôt que conservé comme un livrable d'audit ponctuel.

Prioriser par la fréquence d'affichage

Tous les écarts n'ont pas la même portée. Un couple non conforme employé dans le pied de page apparaît sur toutes les pages du site, un autre employé sur un composant utilisé une fois n'a presque aucun effet. Croiser le relevé avec le nombre d'occurrences réelles, obtenu en comptant les usages dans les gabarits, permet de traiter d'abord ce qui pèse. Cette hiérarchisation est aussi ce qui rend le chantier acceptable : sur une liste de quarante écarts, cinq corrections bien choisies améliorent l'expérience de la quasi totalité des visiteurs, et le reste peut être planifié sans urgence.

Corriger sans dénaturer l'identité

Vient le moment délicat : ajuster des couleurs auxquelles une entreprise tient. L'expérience montre que la correction est presque toujours possible sans toucher à la couleur de marque elle même, à condition de déplacer le problème au bon endroit.

Changer le rôle plutôt que la couleur

Une couleur de marque très saturée fait rarement un bon texte et souvent un excellent aplat. La correction la plus élégante consiste donc à cesser de l'utiliser comme couleur de texte sur fond clair, et à l'employer comme fond avec un texte blanc ou très foncé, ce qui atteint facilement les seuils. La marque reste identique, sa présence visuelle augmente même, et le problème disparaît sans négociation sur la teinte.

Construire une déclinaison foncée

Quand la couleur doit rester du texte, notamment pour les liens, la solution consiste à créer une variante assombrie de la couleur de marque, réservée à cet usage. Il ne s'agit pas de changer la couleur mais d'en ajouter une, en conservant la teinte et en abaissant la luminosité jusqu'à atteindre le seuil. La différence est imperceptible sur un aplat et décisive sur un texte, et cette variante prend naturellement place dans la charte comme couleur d'accompagnement. Sur les liens dans le texte, cette déclinaison doit s'accompagner d'un soulignement, la couleur seule ne suffisant jamais à distinguer un lien de son entourage.

Renoncer au gris clair pour les mentions

Le gris très clair sur blanc, employé pour tout ce qui est secondaire, est de loin la source la plus fréquente de non conformité. La hiérarchie visuelle qu'il produit peut être obtenue autrement : par la taille, la graisse, l'espacement ou la position, qui hiérarchisent tout aussi bien sans rendre le texte illisible. Le remplacement du gris le plus clair par un gris moyen conforme change peu l'aspect général et corrige souvent la moitié des écarts relevés. Il faut simplement accepter que le rendu paraisse un peu plus dense les premiers jours, impression qui disparaît en une semaine et qui ne se compare pas à un texte que certains visiteurs ne lisent pas du tout.

Traiter les textes sur image

Un texte posé sur une photographie ne peut pas être rendu conforme par le choix de sa couleur, puisque le fond varie d'une image à l'autre. Les solutions robustes sont peu nombreuses : un voile semi opaque uniforme entre l'image et le texte, un bandeau plein derrière le texte, ou le déplacement du texte hors de l'image. Les contours et ombres portées appliqués au texte donnent un résultat médiocre et ne sont pas pris en compte par la mesure. Quand un voile est retenu, sa valeur doit être fixée à partir de l'image la plus claire du site et non de la plus sombre, faute de quoi la conformité dépend de l'illustration choisie par le rédacteur.

Ne pas reposer sur la seule couleur

Une exigence distincte des seuils demande que l'information ne soit jamais portée par la couleur seule. Un champ en erreur signalé uniquement par une bordure rouge, un statut indiqué par une pastille de couleur, un lien qui ne se distingue du texte que par sa teinte sont autant de manquements indépendants du rapport de contraste. L'ajout d'un texte, d'une icône ou d'un soulignement règle ces cas et bénéficie à tout le monde, à commencer par les personnes qui consultent le site en plein soleil ou sur un écran mal calibré, situation bien plus fréquente qu'un trouble de la vision des couleurs.

Empêcher la régression

Une charte corrigée se dégrade en quelques mois si rien ne la protège, chaque nouvelle page apportant sa nuance et chaque composant tiers sa propre palette. La démarche rejoint alors celle décrite dans notre article sur la manière d'améliorer l'inclusivité d'un site Internet avec les règles WCAG 2.

Nommer les couleurs par leur rôle

Des variables nommées d'après leur usage, texte principal, texte secondaire, fond de section, bordure de champ, plutôt que d'après leur teinte, empêchent les emplois hasardeux. Un intégrateur qui cherche une couleur pour un texte prend la variable prévue pour cela, dont le contraste a été validé, au lieu de choisir dans une palette où toutes les valeurs semblent équivalentes. C'est le changement qui a le plus d'effet sur la durée, et il ne coûte rien d'autre qu'une passe de renommage suivie d'une note expliquant à quoi sert chaque variable.

Automatiser le contrôle

Un script qui parcourt la liste des couples déclarés et calcule leur rapport tient en une cinquantaine de lignes et s'exécute en une seconde. Placé dans la chaîne d'intégration, il refuse toute nouvelle combinaison non conforme au moment où elle est introduite, ce qui est infiniment moins coûteux que de la découvrir un an plus tard lors d'un audit. Les outils d'audit d'accessibilité automatisés complètent ce contrôle en travaillant sur les pages rendues, où ils détectent les superpositions que le seul examen des feuilles de style manque. Les deux contrôles sont complémentaires et aucun ne remplace l'autre : le premier bloque l'introduction d'une couleur non conforme, le second attrape les combinaisons produites par l'assemblage des composants.

Vérifier aussi le thème sombre

Un site proposant une variante sombre double le nombre de couples à valider, et cette seconde palette est presque toujours moins soignée que la première. Les inversions naïves, où l'on échange simplement les couleurs claires et foncées, produisent des résultats fréquemment non conformes, notamment sur les couleurs d'accent qui deviennent trop lumineuses sur fond sombre. Chaque palette doit être mesurée séparément. Il faut aussi tester la variante réellement servie par défaut, celle qui suit le réglage du système d'exploitation, et non seulement celle obtenue en actionnant un bouton de bascule.

Faire vérifier par des humains

Le contrôle automatique attrape les rapports insuffisants et ne dit rien de la lisibilité réelle, qui dépend aussi de la police, de l'espacement, de la longueur des lignes et de la densité. Un test avec quelques personnes, dont si possible une personne ayant une déficience visuelle, apporte des observations qu'aucun outil ne produit. C'est aussi la meilleure manière de convaincre en interne : une remarque d'utilisateur pèse plus lourd qu'un rapport chiffré, même quand elle dit exactement la même chose. Ces retours portent aussi sur des points que la norme ne couvre pas, comme une police trop fine ou des lignes trop longues, qui pèsent lourdement sur le confort réel. Recueillir ces retours auprès de trois ou quatre lecteurs suffit à faire remonter l'essentiel, à condition de les interroger sur un contenu réel plutôt que sur une maquette isolée de son contexte.