Erst messen, dann malen

Ein hellgrüner Knopf auf weißem Grund, beschriftet mit weißer Schrift. Genau so sah der Vorschlagsknopf in meinem Odoo-Chatbot aus, nachdem ich das Farbschema „Forest Green“ ausgewählt hatte. Anklicken ging. Lesen nicht.

Ich hatte an dem Tag eigentlich etwas anderes vor. Claude Code hat seit kurzem einen /design-Skill, eine frühe Vorschau des Canvas-Editors aus Claude Design, und ich wollte wissen, ob damit ein hübscheres Chatfenster herauskommt. Also gab ich beides in einen Auftrag: schau dir die Farbschemata an, und zeig mir Gestaltungsvarianten.

Statt sofort zu zeichnen, hat Claude gemessen. Für alle zehn ausgelieferten Farbschemata wurden die tatsächlich gerenderten Farben per Browser-Automatisierung ausgelesen, der wirksame Hintergrund über die Elternkette berechnet und daraus die Kontrastwerte nach WCAG bestimmt. Alle Zahlen in diesem Artikel stammen aus dieser Messung. Ergebnis: 64 Verstöße. Der Vorschlagsknopf lag bei 1,00:1, Weiß auf Weiß, mathematisch unsichtbar.

Die Ursache war eine einzige Klasse. Unser Backend-Theme färbt Schaltflächen in der Systray-Leiste weiß, und mein Chatfenster hängt in genau dieser Leiste. Dagegen gab es seit Monaten eine Schutzregel. In CSS entscheidet bei konkurrierenden Regeln die Spezifität, grob gesagt: Wer mehr Klassen im Selektor nennt, gewinnt. Unsere Schutzregel war gegen einen Gegner mit drei Bestandteilen geschrieben. Irgendwann bekam die Theme-Regel ein .o_web_client vorangestellt und hatte einen mehr. Damit verlor nicht ein Element, sondern die komplette Schutzdatei: Nachrichten-Links, Büroklammer, Kopieren-Knopf, alle Schaltflächen des Gesprächsverlaufs. Nichts hat geknallt. Das Fenster wurde einfach still unlesbar.

Vier Entwürfe auf einer Fläche

Danach kam der Design-Teil. Ich bekam eine Canvas mit vier Artboards: links der reparierte Ist-Zustand als Vergleich, daneben drei Richtungen mit je einer benennbaren Idee.

Variante A hat mich überzeugt, und zwar nicht wegen der Optik. Sie nimmt die Markenfarbe aus der Kopfzeile heraus und lässt sie nur noch in der Schaltfläche für den Gesprächsverlauf stehen. Damit löst sie ein Problem, an dem ich sonst hängen geblieben wäre: Auf einer farbigen Leiste muss der Titel gegen die frei wählbare Primärfarbe bestehen, und bei mittelhellen Marken schafft das keine Schriftfarbe. Bei #059669 liegt das Maximum bei 3,90:1, egal ob man Weiß oder Schwarz darauf setzt. Auf hellem Grund sind es 14,49:1.

Aus einer Designentscheidung wurde so die technische Lösung.

Der Entwurf ließ den Pflichthinweis weg

Und dann die Stelle, die mich am meisten beschäftigt hat. In meinem Chatfenster steht über dem Gespräch ein Satz: „Sie chatten mit einem KI-Assistenten, nicht mit einem Menschen.“ Der steht dort wegen Artikel 50 Absatz 1 der EU-KI-Verordnung.

Im Design-Mockup war er nicht zu sehen.

Aufgefallen ist es, weil ich Monate vorher vier Regressionstests dafür geschrieben hatte. Sie prüfen, dass der Hinweis existiert, dass er nicht in einer Bedingung hängt, dass er über Gesprächsverlauf und Eingabefeld steht und dass sein Text aus einer festen Konstante kommt statt aus einer Kundenkonfiguration. Im Kopfkommentar dieser Datei steht als Zweck ausdrücklich: jemanden abfangen, der den Hinweis bei einem Redesign fallen lässt.

Genau das ist eingetreten. Nur war der Jemand diesmal eine KI, und der Test hat trotzdem gehalten.

Ich schreibe das so deutlich, weil die bequemere Version der Geschichte falsch wäre. Die KI hat die EU-Vorgabe nicht von selbst umgesetzt. Sie hätte den Hinweis im Entwurf verloren. Was ihn gerettet hat, war Arbeit, die ich vorher gemacht hatte.

566 Tests und null Kontrastverstöße

Am Ende des Tages: 566 Tests grün, keine Kontrastverstöße mehr über alle zehn Schemata, dazu vier neue Wächter-Tests, die künftig melden, wenn dieser Spezifitätsvorsprung erneut kippt. Der Nachlauf fand übrigens noch sieben Kontrastfehler in den Mockups selbst. Dieselbe Nachlässigkeit, die gerade repariert worden war.

Ich arbeite mit Opus 5. Fable 5 habe ich ausprobiert und für meine Aufgaben keinen Vorteil gefunden, der die Kosten trägt; die Agenten holen sich für einfachere Schritte ohnehin Sonnet oder Haiku. Über den Daumen schätze ich, dass in meinen täglichen Abläufen mehr als 90 Prozent automatisiert laufen. Ich übernehme Texte und Grafiken und mache die letzten Tests selbst.

Was ich aus dem Tag mitnehme, ist unbequemer als „das Werkzeug ist gut“. Es hilft nur so weit, wie die Absicherung reicht, die vorher dastand.

Erstellt von Martin Schmid, mit Unterstützung von Claude Opus 5 und nach eigener inhaltlicher Prüfung freigegeben. Es gelten unsere Hinweise und Haftungsausschluss.