Warum Farben im Dark Mode blasser wirken (und der 20-%-Fix)

Hier ein Experiment für dreißig Sekunden. Nimm ein Markenblau — #2563eb, also oklch(0.546 0.215 262.9) — und stelle zwei Farbflächen davon nebeneinander: eine auf einer weißen Karte, eine auf einer fast schwarzen Karte. Gleicher hex, gleiche Pixel, gleicher Monitor. Die Fläche auf der dunklen Karte wirkt gedämpfter — etwas weniger farbig, etwas müder —, obwohl ein Color-Picker schwören würde, dass beide identisch sind. An der Farbe selbst hat sich nichts geändert. Nur ihre Umgebung.

Farben wirken im Dark Mode ausgewaschen, weil das visuelle System Farbigkeit relativ zur Umgebung beurteilt und nicht in absoluten Werten: Vor einem dunklen Grund wirkt derselbe Chroma-Wert spürbar weniger lebendig. Die Lösung ist, das Chroma anzuheben, nicht die Helligkeit — abgeleitete Dark-Paletten heben das Chroma um rund 20 % an, damit Farben auf Fast-Schwarz genauso lebendig wirken wie ihre Pendants im Light Mode auf Weiß. Das ist der perzeptive Mechanismus hinter vielem, was unser Dark-Mode-Guide behandelt; dieser Artikel zeigt, warum das passiert, warum Teams routinemäßig die falsche Achse korrigieren und wie die Zahlen aussehen.

Warum wirkt dieselbe Farbe auf dunklem Hintergrund weniger farbig?

Weil das Auge ein relatives Instrument ist, kein Kolorimeter. Zwei Effekte aus der Wahrnehmungsforschung reichen aus, um das Experiment oben zu erklären, und beide lohnt es sich in verständlicher Form zu kennen.

Der erste ist der Simultankontrast — die allgemeine Erkenntnis, dass ein Reiz relativ zu dem wahrgenommen wird, was ihn umgibt, dieselbe Familie von Effekten wie der Kontrasteffekt in der Wahrnehmung insgesamt. Ein Farbfleck, der von hellem Weiß umrandet ist, wird fortwährend mit etwas verglichen, das keine Farbe und maximales Licht hat; derselbe Fleck, von Fast-Schwarz umrandet, wird mit etwas verglichen, das keine Farbe und fast kein Licht hat. Der Vergleich verändert, was wahrgenommen wird, und eines der Opfer ist die Farbigkeit: Vor dem dunklen Umfeld wirkt die Farbe des Flecks weniger gesättigt, als sie gemessen ist.

Der zweite ist die Adaptation. In einer dunklen Oberfläche stellt sich das Auge auf ein insgesamt niedrigeres Lichtniveau ein, und Teil der Farbwahrnehmung ist, dass die empfundene Farbigkeit tendenziell sinkt, wenn das Lichtniveau sinkt — eine Szene in der Dämmerung wirkt grauer als dieselbe Szene am Mittag, obwohl sich die Oberflächen darin nicht verändert haben. Ein Dark-Theme ist eine kleine, selbst herbeigeführte Dämmerung.

Keiner der beiden Effekte ist ein Display-Artefakt, und keiner lässt sich abschalten. Ein Dark-Theme, dessen Farben genauso wirken sollen wie im Light-Theme, muss sie ausgleichen.

Warum korrigieren Teams die falsche Achse?

Das Problem kündigt sich meist als vage Klage an: Die Markenfarbe wirkt im Dark Mode müde. Der instinktive Fix ist, sie aufzuhellen — und Aufhellen lässt die Farbe tatsächlich stärker hervortreten, weil es den Luminanzkontrast zwischen der Farbe und dem dunklen Hintergrund erhöht. Genau das macht den Instinkt so hartnäckig: Die Anpassung bringt eine sichtbare Verbesserung — auf der falschen Achse.

Aber verblasst ist nicht die Helligkeit — es war die Farbigkeit, und das sind verschiedene Dimensionen. Eine chromatische Farbe aufzuhellen, ohne ihr Chroma anzufassen, schiebt sie Richtung Pastell: Das Dark-Mode-Blau wird zu einem blasseren, milchigeren Blau, das nicht mehr zum Charakter der Marke passt, und wenn jeder Akzent dieselbe Behandlung bekommt, driftet das ganze Dark-Theme Richtung Bonbonfarben. Die Farbe war nie zu dunkel. Sie war für ihre neue Umgebung nicht farbig genug, und die Achse, die sie wiederherstellt, ist das Chroma.

Wie groß sollte der Boost sein — und was begrenzt ihn?

In abgeleiteten Dark-Paletten liegt der Richtwert bei einem Chroma-Boost von rund 20 %. Das Markenblau, das im Light Mode bei C 0,215 läuft, verlangt auf Dark ≈ C 0,26, um gleich lebendig zu wirken. Auf das Wort kommt es an: verlangt. Der Boost ist eine Anfrage, und der sRGB-Farbraum (Gamut) hat bei jeder Helligkeit eine Obergrenze — manche Farben liegen so nah daran, dass sie die vollen 20 % nicht aufnehmen können.

Drei Farbflächen machen das Muster greifbar. Jede Zeile zeigt die Farbe, wie sie im Light Mode ausgeliefert wird, und ihre geboostete Dark-Mode-Version:

Das Grün und das Amber nehmen die vollen 20 %. Das Blau kann es nicht: Bei L 0,546 und Farbton 262,9° geht sRGB um C ≈ 0,25 herum der Platz aus, sodass das geboostete Blau an der Obergrenze landet statt bei der Anfrage. Das ist die ehrliche Grenze der Technik — eine Ausgangsfarbe nahe am Rand des Farbraums (Gamut) hat für den Dark Mode kaum noch Spielraum, was man an dem Tag wissen sollte, an dem die Ausgangsfarbe gewählt wird, nicht an dem Tag, an dem das Dark-Theme gebaut wird.

Öffne den Zwei-Gründe-Vergleich in Scale Composer — dieselben drei Farbflächen bei identischem Chroma auf einer weißen und einer fast schwarzen Fläche, sodass das Verblassen sichtbar wird, bevor irgendein Fix angewendet wird.

Welche Farben bekommen den Boost?

Nicht alle, und nicht gleichmäßig.

Marken- und Akzent-Farbrampen: ja. Das sind die Farben, deren Leuchtkraft die Aufgabe ist — Buttons, Links, Highlights, Badges. Sie nehmen den vollen Boost, sofern der Farbraum es zulässt — ein Schritt in der größeren Arbeit, eine Markenfarbe für den Dark Mode anzupassen.

Neutraltöne: kaum, und proportional. Eine getönte Neutralton-Skala läuft bei flüsterleisem Chroma — Werte wie C 0,02 — und der Boost skaliert mit dem Wert, wird also zu ≈ 0,024. Das ist in einer Farbfläche unsichtbar und liegt immer noch unter dem, was die meisten Augen „eine Farbe“ nennen würden — und genau das ist der Punkt: Der Boost bewahrt die Temperatur des Neutraltons auf dem dunklen Grund, ohne die Bühne zum Darsteller zu machen.

Funktionsfarben: ja, dann erneut prüfen. Erfolgs-Grüntöne, Warn-Ambertöne und Fehler-Rottöne verblassen wie alles andere und brauchen den Boost wie alles andere — aber sie tragen auch Kontrast-Verpflichtungen, und ein verändertes Chroma verschiebt den gemessenen Kontrast einer Farbe leicht. Eine abgeleitete Palette prüft die Kontrast-Untergrenzen auf den dunklen Flächen nach dem Boosten erneut, statt anzunehmen, dass die bestandenen Werte des Light-Themes übertragbar sind; in Scale Composer werden die Dark-Rollen neu abgeleitet, mit den WCAG-Untergrenzen und APCA, geprüft gegen die dunklen Flächen.

Sieh den Fix an- und ausgehen

Der Boost lässt sich am leichtesten als Vorher-Nachher beurteilen, nicht als Zahl. Schalte den Chroma-Boost auf der Dark-Palette um — dieselben Rampen auf Fast-Schwarz gerendert, erst mit ausgeschaltetem Boost, dann mit eingeschaltetem, sodass du ausgewaschen und gleich lebendig auf deinem eigenen Bildschirm die Plätze tauschen siehst.