Tester le contraste : outils et méthode

Une palette qui a passé son audit d’accessibilité en mars peut échouer dès juin. Rien de dramatique ne s’est produit — le marketing a réchauffé le bleu de marque d’un cran, un mode sombre a été livré, quelqu’un a ajouté un panneau teinté pour les encarts — et chaque changement a discrètement recalculé des dizaines de paires texte-sur-fond que personne n’est retourné revérifier. L’audit était réel ; il mesurait simplement un produit qui n’existe plus.

Le test de contraste a deux modes : l’audit — vérifier des paires qui existent déjà, avec un vérificateur de contraste, les devtools du navigateur ou un scanner automatisé — et la construction — bâtir la palette de sorte que chaque paire soit vérifiée au moment où elle est dérivée. Un flux de travail qui tient dans le temps combine les deux : construire avec les seuils intégrés, scanner les versions pour repérer les régressions, et réserver l’attention humaine aux jugements qu’aucun outil ne peut porter. Cet élément de notre guide du contraste présente la méthode et l’arithmétique qui la sous-tend.

Quelles sont les deux façons de tester le contraste ?

L’audit prend la palette telle quelle et se demande si elle réussit. Ses outils prennent deux couleurs et renvoient un ratio, ou parcourent les pages rendues et signalent les échecs. L’audit, c’est la manière de connaître l’état de ce qui existe — un code hérité, un site marketing, le design system de l’an dernier.

La construction déplace la vérification à la source. Au lieu de choisir des couleurs puis de les tester après coup, chaque rôle de couleur — texte courant, texte atténué, une bordure, un anneau de focus — est dérivé face aux surfaces sur lesquelles il se posera, avec le seuil requis appliqué à la dérivation. Une paire qui échouerait n’est jamais émise : la sortie n’a donc pas besoin d’un premier audit ; elle passe par construction.

Les deux modes ne sont pas rivaux — ils testent des moments différents. L’audit regarde en arrière ce qui a été livré ; la construction regarde en avant ce qui est sur le point de l’être.

Pourquoi l’audit seul échoue-t-il à grande échelle ?

À cause de l’arithmétique. Une palette de produit modeste comporte environ 17 rôles de couleur sémantiques — plusieurs niveaux de texte, des bordures, le focus, des états, des remplissages et le texte qui s’y pose. Répartissez ces rôles sur, disons, 6 surfaces (page, carte, panneau teinté, en-tête, deux remplissages) et 2 thèmes, et vous vous retrouvez avec 17 × 6 × 2 = 204 paires rôle-vers-surface. Toutes les combinaisons n’apparaissent pas dans l’interface, mais la surface d’audit honnête se compte bien en centaines — et chaque ajustement de marque, chaque nouvelle surface, chaque thème ajouté en recalcule une part.

Personne ne réaudite deux cents paires à la main après chaque changement de palette, et en pratique personne ne prétend le faire : les audits manuels échantillonnent. L’échantillonnage trouve les échecs que vous avez pensé à chercher — le texte courant sur blanc — et rate ceux auxquels vous n’avez pas pensé : le texte atténué sur le panneau teinté, en mode sombre, après la refonte de marque de juin. La construction inverse l’économie du problème. Les vérifications s’exécutent là où les changements se produisent : un ajustement de palette revérifie donc tout ce qu’il touche, au prix de zéro attention supplémentaire.

Que doit contenir la boîte à outils d’audit ?

Même avec la construction en place, l’audit conserve trois missions : évaluer ce dont vous avez hérité, attraper les régressions et vérifier la vérité rendue. La boîte à outils, par catégorie :

• Vérificateurs paire par paire — collez deux couleurs, lisez le ratio. Parfaits pour des décisions ponctuelles et pour trancher un désaccord sur une seule paire.
• Devtools du navigateur — la plupart des navigateurs affichent le ratio de contraste du texte sélectionné et signalent les échecs face aux seuils WCAG, mesurés sur la page rendue. Parfaits pour vérifier la réalité plutôt que l’intention : ce que l’écran de l’utilisateur compose réellement, opacité et superposition comprises.
• Scanners automatisés — parcourent les pages ou tournent en CI, signalent les paires en échec en masse. Parfaits pour couvrir les régressions d’une version à l’autre.
• Contrôles manuels par sondage — un humain qui regarde de vrais écrans. Parfaits pour tout ce que les outils ne peuvent pas classer, sujet de la section suivante.

Scale Composer se situe de l’autre côté de la frontière — c’est un outil de construction, qui dérive les rôles avec les seuils appliqués à mesure que la palette est bâtie — si bien que la description honnête du flux de travail est : construisez là, puis auditez ce que le rendu a fait du résultat.

Que détectent les scanners automatisés — et que ratent-ils ?

Les scanners calculent les ratios bien et sans se lasser ; considérez cette partie comme résolue. Ce qu’ils ne savent pas faire, c’est comprendre ce que les choses signifient. Un scanner ne distingue pas le texte décoratif du contenu : il signale donc des filigranes qu’il devrait ignorer. Il ne distingue pas un contrôle désactivé d’un contrôle actif qui a simplement l’air gris — le premier est exempté des seuils, le second est un véritable échec. Il ne peut pas juger de façon fiable quelles couleurs comptent comme adjacentes pour une bordure ou une icône, ni si un texte posé sur une photographie est accessoire ou destiné à être lu. Chacun de ces jugements détermine si un seuil s’applique tout court, et chacun est une question d’intention, pas d’arithmétique.

La division du travail est donc stable : les machines vérifient les nombres, les humains vérifient le sens. Un flux de travail qui demande aux humains de recalculer des ratios gaspille l’attention précisément là où elle est rare ; un flux qui demande aux scanners de classer l’intention produit à la fois de fausses alertes et un faux réconfort.

À quoi ressemble la vérification à la construction ?

Dans Scale Composer, une palette n’est pas une liste de codes hex choisis à la main mais un ensemble de rôles dérivés : niveaux de texte, bordures, focus, états, chacun calculé face à chaque surface avec le seuil choisi — AA ou AAA — imposé au moment de la dérivation. Les rôles de texte sont notés pour la lisibilité plutôt que pour le contraste maximal, les libellés sur les remplissages se rabattent sur une couleur d’ancrage quand le blanc ou le noir purs ne peuvent pas les porter, et une palette sombre dérivée relance chaque vérification au lieu d’hériter des verdicts du mode clair. La valeur APCA Lc est calculée à côté de chaque ratio WCAG comme seconde lecture.

Ouvrez une palette dérivée et regardez les vérifications se dérouler — changez une couleur de départ et chaque paire concernée se redérive, son ratio recalculé sur place.

Quelle est la méthode, étape par étape ?

1. Construisez avec des seuils. Dérivez les rôles de la palette face à chaque surface avec le seuil AA (ou AAA) appliqué à la dérivation — c’est là que les 204 paires sont couvertes, une fois, structurellement.
2. Consignez les jugements. Décidez ce qui est décoratif, ce qui est désactivé, ce qui est exempté — et notez-le, pour que scanners et humains s’accordent sur le périmètre avant que quiconque ne mesure quoi que ce soit.
3. Scannez chaque version. Laissez un scanner automatisé parcourir le produit rendu à la recherche de régressions — codes hex en dur, surprises d’opacité, un composant qui a contourné la palette.
4. Vérifiez par sondage les cas de jugement. Des yeux humains sur les questions d’adjacence, le texte sur images, la couleur porteuse de sens, et tout ce que le scan a signalé comme ambigu.
5. Redérivez, ne rustinez pas. Quand la marque évolue, changez la couleur de départ et laissez les rôles se redériver avec leurs vérifications — corriger un code hex fautif à la main, c’est ainsi que les palettes dérivent hors conformité.

Déplacez les vérifications au début

La différence entre les deux modes se ressent le mieux en faisant les deux. Faites passer une palette par l’audit puis la construction — lisez d’abord les paires comme le ferait un vérificateur, une par une, puis changez la couleur de départ et regardez chaque rôle concerné se redériver face à son seuil d’un seul coup.