Nie reines Schwarz: Dunkle Hintergründe wählen

Ein Dark-Mode-Hintergrund sollte fast nie reines Schwarz sein. Der brauchbare Bereich für einen Seitenhintergrund liegt in OKLCH bei etwa L ≈ 0,13–0,18 — tief genug, um unverkennbar dunkel zu sein, hell genug, um Platz für die darüber gestapelten Flächen zu lassen — und er funktioniert oft am besten als ein Fast-Schwarz mit einem Hauch des Markenfarbtons statt als reiner Neutralton. Reines Schwarz scheitert aus drei Gründen: Es lässt dem Elevation-System keinen Boden zum Stehen, es erzeugt Halation unter heller Schrift, und es wirkt eher wie eine Leere als wie eine Atmosphäre.

Der Hintergrund ist der folgenreichste einzelne Wert im Dark Mode. Jede Fläche, jeder Rahmen und jeder Buchstabe im Theme wird gegen ihn gelesen, die Elevationsleiter ist an ihm verankert, und seine Temperatur entscheidet, ob sich das dunkle Theme wie dieselbe Marke oder wie ein anderes Produkt anfühlt. Deshalb behandelt unser Dark-Mode-Leitfaden den Seiten-Anker als die erste Entscheidung des Themes, nicht als Detail — und deshalb widmet sich dieser Artikel über seine gesamte Länge einer einzigen Farbe.

Warum nicht #000?

Elevation braucht Platz unter den Flächen. Eine nützliche Analogie kommt aus dem Theater: Die Bühne muss unter den Schauspielern liegen, sonst erkennt niemand, wer wo steht. In einem dunklen Theme ist der Seitenhintergrund die Bühne — die Referenz, gegen die jede angehobene Fläche beurteilt wird — und beurteilt wird über die Helligkeit, denn dunkle Themes signalisieren Höhe, indem sie mit zunehmender Elevation heller werden. Verankere die Seite bei absolut null, und die Bühne ist gegen den Boden des Bereichs gepresst: Jede Karte, jedes Sheet und jeder Dialog muss seine eigene Stufe in das gequetschte untere Ende der Skala zwängen, und nichts — kein eingelassenes Feld, kein gedrückter Zustand, kein zurückgesetztes Panel — kann jemals unter der Seite liegen, weil es kein Darunter gibt. Ein Anker bei L ≈ 0,15 hält auf beiden Seiten Tiefe in Reserve.

Halation. Reinweiße Schrift auf reinem Schwarz ist die Paarung mit maximalem Kontrast, und für viele Lesende ist sie zugleich die unangenehmste: Die hellen Striche scheinen gegen das schwarze Feld zu blühen oder zu geistern — ein Effekt, der häufig als besonders störend für Menschen mit Astigmatismus beschrieben wird. Die Optik hinter dem Namen ist unter Halation beschrieben — Licht, das sich über seine Grenze hinaus ausbreitet — und das praktische Gegenmittel in der Interface-Arbeit ist, beide Enden abzumildern: ein Fast-Schwarz als Grund unter einer gebrochen-weißen Textfarbe, was reichlich Kontrast bewahrt und zugleich das Flimmern aus den Strichen nimmt.

Tiefe. Ein tiefes Fast-Schwarz mit einem Hauch Farbton wirkt tendenziell wie Atmosphäre — ein Raum, den das Interface bewohnt. Flaches #000 wirkt dagegen eher wie Abwesenheit: ein Loch im Bildschirm, auf dem graue Rechtecke schweben. Das ist der am wenigsten mechanische der drei Gründe und der am leichtesten mit dem Auge zu prüfende; leg dasselbe Layout auf beide Gründe, und der Unterschied in der wahrgenommenen Tiefe ist sofort da.

Wie dunkel sollte der Hintergrund sein?

Der brauchbare Bereich ist schmal: Seiten-Anker landen üblicherweise bei etwa L ≈ 0,13–0,18.

Der Boden dieses Bereichs wird durch die oben genannten Probleme gesetzt — gehst du deutlich unter ≈ 0,13, erbst du nach und nach die Schwächen von reinem Schwarz, mit gestauchter Elevationsleiter und beginnendem Flimmern der Schrift. Die Decke wird durch die Identität gesetzt: Driftest du deutlich über ≈ 0,18–0,20, beginnt die Seite eher wie ein trübes graues Theme zu wirken als wie ein dunkles, und die darauf sitzende helle Schrift verliert allmählich ihren angenehmen Kontrast-Spielraum. Innerhalb des Bereichs geht es bei der Wahl weniger um Korrektheit als darum, wie viel Luft der Flächen-Stapel des Themes braucht — ein Interface mit vielen Elevationsstufen profitiert davon, am unteren Ende zu verankern, damit die Leiter weiter steigen kann, bevor ihre obersten Sprossen aufhören, dunkel zu wirken.

Neutraler oder markengetönter Hintergrund?

Dieselbe Frage, die helle Themes mit getönten Neutraltönen beantworten, stellt sich hier — mit derselben Logik: Ein Grau mit einem Hauch des Markenfarbtons bindet die Bühne an die Palette, die auf ihr steht, während ein ungetöntes Grau davon losgelöst bleibt. Auf einem dunklen Grund ist der Effekt womöglich sogar stärker — der Hintergrund macht einen größeren Anteil der Pixel aus, und ein farbtongetöntes Fast-Schwarz wirkt wie die eigene Dunkelheit der Marke statt wie eine beliebige.

In Scale Composer ist das die Standard-Verdrahtung: Der dunkle Seiten-Anker folgt dem tiefsten Schritt der Marke — dem Fast-Schwarz der brand-900-Klasse — sodass der Boden des Themes den Markenfarbton automatisch trägt und mit ihm gekoppelt bleibt, bis du den Anker bewusst entkoppelst und unabhängig setzt. Öffne die Anker-Kopplung in Scale Composer — der dunkle Seitenhintergrund folgt dem tiefen Schritt der Marke, mit dem Farbton-Faden, der durch den gesamten Flächen-Stapel darüber sichtbar bleibt.

Eine bewusste Vertagung: Auf OLED-Displays kostet echtes Schwarz keinen Strom, und manche Produkte wählen #000 genau deshalb mit offenen Augen — ein echter Zielkonflikt, der einen eigenen Artikel verdient statt einer Klammer hier.

Wie sehen die drei Kandidaten in Zahlen aus?

Drei Anker und die Elevationsleiter, die jeder zulässt — vier Flächenstufen, getrennt durch Schritte von ≈ 0,04 L, das Doppelte des gerade noch wahrnehmbaren Unterschieds von ≈ 0,02:

Die mittlere und die untere Zeile unterscheiden sich durch eine einzige Entscheidung — Chroma 0 gegenüber Chroma 0,02 beim selben Farbton wie das Markenblau #2563eb — und dieser Hauch ist in einem Farbmuster unsichtbar, aber über einen ganzen Bildschirm spürbar, ganz ähnlich wie sich getönte Neutraltöne im Light Mode verhalten. Die oberste Zeile ist die warnende: Es ist nicht so, dass über reinem Schwarz keine Leiter existiert, sondern dass sie vollständig in dem Register leben muss, das die anderen beiden Anker für die Tiefe unter der Bühne reservieren.

Den Anker bewusst festlegen

Die Kopplung, die die Seite an den tiefen Schritt der Marke bindet, ist eine Voreinstellung, keine Doktrin — manche Marken wollen einen neutralen Boden. Entkopple den Anker und vergleiche — dasselbe dunkle Theme mit einem markengetönten Boden und einem rein neutralen, live umgeschaltet, damit du beurteilen kannst, auf welche Dunkelheit deine Palette gehört, bevor ein einziger Token ausgeliefert wird.