Mesurer d'abord, puis peindre

Un bouton vert clair sur fond blanc, avec du texte blanc. C'est ainsi que le bouton de suggestion dans mon chatbot Odoo apparaissait après avoir choisi le schéma de couleurs « Forest Green ». On pouvait cliquer dessus, mais pas le lire.

Ce jour-là, j'avais en réalité autre chose en tête. Claude Code dispose depuis peu d'un /design-skill, une prévisualisation précoce de l'éditeur Canvas de Claude Design, et je voulais savoir si cela permettait d'obtenir une fenêtre de chat plus jolie. J'ai donc donné l'ordre des deux : examinez les schémas de couleurs et montrez-moi des variantes de conception.

Au lieu de dessiner immédiatement, Claude a mesuré. Pour les dix schémas de couleurs livrés, les couleurs réellement rendues ont été extraites via une automatisation navigateur, le fond effectif calculé via la chaîne parentale et les valeurs de contraste déterminées selon les WCAG. Tous les chiffres de cet article proviennent de cette mesure. Résultat : 64 violations. Le bouton de suggestion était à 1,00:1, blanc sur blanc, mathématiquement invisible.

La cause était une seule classe. Notre thème backend colore les boutons dans la barre de la systray en blanc, et ma fenêtre de chat est accrochée exactement dans cette barre. Une règle de protection existait depuis des mois. En CSS, en cas de règles concurrentes, c'est la spécificité qui décide, grossièrement : celui qui cite plus de classes dans le sélecteur gagne. Notre règle de protection était écrite contre un adversaire composé de trois éléments. À un moment donné, la règle du thème a eu un .o_web_client préfixé et en avait un de plus. Ainsi, non seulement un élément, mais le fichier de protection complet a perdu : liens de messages, trombone, bouton Copier, tous les boutons de l'historique de la conversation. Rien n'a explosé. La fenêtre est simplement devenue illisible.

Quatre maquettes sur une surface

Ensuite est venu la partie design. J'ai reçu un Canvas avec quatre artboards : à gauche l'état actuel réparé en comparaison, à côté trois directions avec chacune une idée nommable.

La variante A m'a convaincu, et non pas en raison de l'esthétique. Elle retire la couleur de marque de l'en-tête et ne la laisse subsister que dans le bouton d'historique de conversation. Ainsi, elle résout un problème auquel j'aurais autrement échoué : sur une barre colorée, le titre doit résister à la couleur primaire librement choisie, et avec des marques de luminosité moyenne, cela ne permet pas une couleur de texte. Pour#059669 le maximum est de 3,90:1, qu'on pose du blanc ou du noir dessus. Sur fond clair, il atteint 14,49:1.

Une décision de design est ainsi devenue une solution technique.

Le projet a omis l'avertissement obligatoire

Et puis le point qui m'a le plus préoccupé. Dans ma fenêtre de chat, une phrase figure au-dessus de la conversation : « Vous discutez avec un assistant IA, pas avec un humain. » Elle y est présente en vertu de l'article 50, paragraphe 1, du règlement européen sur l'IA.

Il n'était pas visible dans le maquette de design.

Cela a attiré mon attention car j'avais écrit quatre tests de régression pour cela plusieurs mois auparavant. Ils vérifient que l'avertissement existe, qu'il ne dépend d'aucune condition, qu'il se trouve au-dessus de l'historique de conversation et du champ de saisie, et que son texte provient d'une constante fixe plutôt que d'une configuration client. Dans le commentaire d'en-tête de ce fichier, l'objectif est explicitement indiqué : intercepter quelqu'un qui omettrait cet avertissement lors d'un redesign.

C'est exactement ce qui s'est produit. Seule différence : cette fois, la personne en question était une IA, et le test a tout de même réussi.

J'écris cela de manière aussi explicite car la version plus confortable de l'histoire serait fausse. L'IA n'a pas appliqué la réglementation européenne d'elle-même. Elle aurait perdu l'avertissement dans le projet. Ce qui l'a sauvé, c'est le travail que j'avais effectué auparavant.

566 tests et aucune violation de contraste

À la fin de la journée : 566 tests en vert, plus aucune violation de contraste sur les dix schémas, auxquels s'ajoutent quatre nouveaux tests de garde qui signaleront à l'avenir si cet avantage de spécificité se renverse à nouveau. D'ailleurs, le suivi a encore relevé sept erreurs de contraste dans les maquettes elles-mêmes. La même négligence qui venait d'être réparée.

Je travaille avec Opus 5. J'ai essayé Fable 5 et n'ai trouvé aucun avantage pour mes tâches qui justifie les coûts ; les agents se procurent de toute façon Sonnet ou Haiku pour les étapes plus simples. À mon estimation, plus de 90 % de mes flux de travail quotidiens fonctionnent de manière automatisée. Je prends en charge les textes et les graphiques et réalise les derniers tests moi-même.

Ce que je retiens de cette journée est plus inconfortable que « l'outil est bon ». Il n'aide que dans la mesure où la protection préalable suffisait.

Créé par Martin Schmid, avec le soutien de Claude Opus 5 et approuvé après vérification de contenu interne. S'appliquent nos Avertissements et exclusion de responsabilité.