Eine dunkle Palette testen

Das Dark Theme hat die Abnahme bestanden. Auf einem hellen Bürodisplay am Mittag wirkte jeder Screen stimmig: knackiger Text, ordentliche Cards, der Markenakzent leuchtete schön. Drei Wochen nach dem Launch kam das Feedback von einem anderen Planeten — die reinweißen Überschriften „leuchten wie ein Scheinwerfer“ bei Nacht, die Cards verschmelzen mit der Seite, und niemand erkennt, über welcher Tabellenzeile der Mauszeiger schwebt. Nichts an der Abnahme war unehrlich; die Abnahme lief nur unter der einen Bedingung, für die Dark Mode nicht gedacht ist.

Dark Mode zu testen ist ein erneuter Verifizierungsdurchlauf, geordnet nach dem, was tatsächlich bricht: Textkontrast für jede Paarung, Flächen-Unterscheidbarkeit, Sichtbarkeit von Zuständen, Blendung, Farbsehsicherheit, echte Inhalte bei nächtlicher Helligkeit und nicht angepasste Medien. Aus dem Light Mode überträgt sich nichts — die Physik ändert sich, also läuft jede Prüfung erneut. Das ist die QA-Checkliste für die Paletten, die in unserem Dark-Mode-Leitfaden entstanden sind: sieben Prüfungen, jede mit ihrer Nummer und Methode.

1. Besteht noch jede Text-Paarung den Kontrast?

Die Untergrenzen sind dieselben — 4,5:1 für Fließtext, 3:1 für großen Text und UI-Komponenten, gemäß WCAGs Kontrast-Minimum — aber jedes Verhältnis ist neu, weil sich beide Seiten jeder Paarung geändert haben. Ein Marken-Kernton, der Fließtext auf Weiß trug, kann auf einer fast schwarzen Seite auf ≈3,3:1 fallen; ein Rahmen, der auf Hell sichtbar war, kann auf Dunkel verschwinden.

Methode: Miss jede Text-/Flächen-Paarung erneut gegen die dunklen Werte, nicht die hellen. Scale Composer leitet die semantischen Rollen pro Theme neu ab, mit erzwungenen Untergrenzen und APCA daneben ausgewiesen, sodass die Paarungen des Dark Themes als geprüfte Werte ankommen statt als übernommene.

2. Kannst du benachbarte Flächen auseinanderhalten?

Dark Themes signalisieren Elevation über Helligkeit — höher liegende Flächen sind heller —, was mehrere fast schwarze Stufen in ein schmales Band packt. Wenn zwei benachbarte Sprossen dieser Leiter zu nah beieinander liegen, verschmelzen Cards mit Seiten und Menüs mit Cards. Die Schwelle, die man sich merken sollte: unterhalb von etwa 0,02 L Abstand lesen sich zwei Flächen für die meisten Betrachter als eine — der eben noch wahrnehmbare Unterschied und der Punkt, an dem Scale Composer seine JND-Warnung auslöst. Komfortable Leitern laufen breiter, grob 0,04–0,09 L pro Sprosse.

Methode: Geh die Elevations-Leiter von der Seite bis zur obersten Fläche durch und prüfe für jedes benachbarte Paar ΔL ≥ ≈0,04.

Öffne die dunklen Rollen im Kontrast-Panel von Scale Composer — jede Text-Paarung erneut gegen ihre Untergrenze geprüft, die Stufen der Flächen-Leiter mit ihren Helligkeitswerten aufgelistet, APCA neben den Verhältnissen.

3. Sind Hover- und Pressed-Zustände noch sichtbar?

Im Light Mode werden interaktive Zustände meist dunkler; auf einer dunklen Fläche geht die sichtbare Richtung nach oben — Hover- und Pressed-Stufen werden heller. Ein Theme, das ohne Umkehren dieser Richtung übernommen wird, erzeugt Zustände, die technisch den Wert ändern, sich aber als nichts lesen. Die Rechnung ist dieselbe wie bei der Flächenprüfung: Zustandsstufen wollen ≈0,04 L oder mehr Abstand zueinander, in die hellere Richtung.

Methode: Löse Hover und Pressed an den Buttons, Zeilen und Listeneinträgen des Dark Themes aus; bestätige, dass jede Stufe sichtbar ist und heller wird, nicht dunkler.

4. Leuchtet der weiße Text?

Reines #fff auf einer fast schwarzen Seite liegt bei ≈17:1 — weit mehr Kontrast, als irgendeine Untergrenze verlangt — und genau dieser Überschuss ist das Problem: Text mit hoher Leuchtdichte auf dunklem Feld wird häufig als aufblühend oder mit Halo beschrieben, ein Effekt namens Halation, besonders bei Nacht und bei Lesern mit Astigmatismus. Ein Off-White um L ≈0,9 misst immer noch ≈13:1 — fast das Dreifache der Untergrenze — und liest sich ruhiger. Der Tausch kostet Spielraum, der nie gebraucht wurde.

Methode: Prüfe, dass Fließtext ein Off-White ist (L ≈0,9-Klasse), und reserviere hellere Werte für kleine, bewusste Momente — und beurteile es bei niedriger Helligkeit, nicht am Mittag.

5. Welche Paare brechen bei Farbsehschwäche?

Dark Themes verschieben, welche Kombinationen riskant sind: Paare, die sich auf Weiß über die Helligkeit trennten, können im komprimierten dunklen Bereich bei ähnlicher Helligkeit liegen, sodass der Farbton als einziges Signal bleibt — genau das Signal, das eine Farbsehschwäche entfernt. Erfolgs-Grün gegen Fehler-Rot bei ähnlichem L ist der klassische Verlust.

Methode: Schick die dunkle Palette durch alle drei Simulationen im Vision-Selektor von Scale Composer und prüfe gezielt die Funktionsfarben-Paare erneut.

6. Hält es mit echten Inhalten stand, bei Nacht?

Eine Paletten-Abnahme bei Tageshelligkeit auf Platzhaltertext verfehlt, was Nutzer sehen: Dark Mode wird nachts genutzt, bei niedriger Bildschirmhelligkeit, wo Schatten sich stauchen und kleine Kontrastsünden zu unsichtbarem Text werden. Echte Inhalte belasten außerdem, was Farbfelder nie zeigen — lange Absätze, dichte Datentabellen, Formularfelder mit Platzhaltertext, deaktivierte Zustände.

Methode: Ein Abenddurchlauf in einem dunklen Raum mit dem Bildschirm auf niedriger Helligkeit, echte Seiten lesend — langer Text, Tabellen, Formulare. Das ist die Bedingung, für die das Theme existiert; es sollte die Bedingung sein, unter der es beurteilt wird.

7. Passen Bilder und Embeds zum Theme?

Die Palette passt sich an; Fotografien tun das nicht. Ein helles Produktfoto oder Diagramm mit weißem Hintergrund sitzt in einer dunklen UI wie ein erleuchtetes Fenster, und Werbe-Embeds oder iframes bringen ihre eigenen Schemata mit. Das gängige Muster ist ein sanftes Abdunkeln per Wrapper — eine Zeile CSS wie filter: brightness(0.85) auf Medien-Containern im Dark Mode — plus dunkle Varianten für die Bilder, die du kontrollierst.

Methode: Geh jede medienhaltige Ansicht im Dark Mode durch und bestätige, dass helle Assets abgedunkelt, ausgetauscht oder bewusst akzeptiert sind.

Die Liste, ausführbar

Beginn mit der Prüfung, die stillschweigend versagt

Kontrastfehler melden sich von selbst; Flächen, die verschmelzen, verflachen das Design einfach still. Führe die Prüfung auf Flächen-Unterscheidbarkeit an einer dunklen Leiter durch — die fast schwarzen Stufen mit ihren gemessenen ΔL-Abständen, die JND-Warnung markiert jedes Paar, das zu nah beieinander liegt, um es zu unterscheiden, sodass die Cards, die am Mittag ihre Kanten hielten, sie auch um Mitternacht halten.