Verwenden Sie im Dunkelmodus kein reines Schwarz.

Der Dunkelmodus ist längst keine Nischeneinstellung mehr. Trotzdem greifen die meisten dunklen Designs zum falschen Schwarz. Reines Schwarz, #000000, wirkt im Farbfeld markant und wird auf dem Bildschirm anstrengend. Wenn Ihr dunkles Design Menschen die Augen zusammenkneifen lässt, liegt es meist daran.

Google lernte das bei der Entwicklung von Material Design und empfiehlt dunkles Grau, #121212, als Grundfläche. Die Gründe liegen in der Funktionsweise des Auges und der Wahrnehmung von Tiefe im Dunkeln. Hier sind die Regeln für die Praxis.

Warum ist reines Schwarz die falsche Vorgabe?

Es steigert den Kontrast über den hilfreichen Punkt hinaus. Weißer Text auf reinem Schwarz ist der maximale Bildschirmkontrast. Das Auge zahlt dafür. Licht scheint an den Buchstabenkanten auszustrahlen. Diese Lichthöfe belasten Menschen mit Astigmatismus besonders. Material Design weist ebenfalls darauf hin: Heller Text auf dunklem Grau hat weniger Kontrast als auf Schwarz. Das Grau reduziert die Augenbelastung.

Das betrifft jeden, der das Design einschaltet, während langer Lesesitzungen. Ihr Produkt ermüdet die Menschen nach und nach. Komfort ist der Sinn des Dunkelmodus. Maximaler Kontrast macht ihn unauffällig zunichte.

Welche Farbe sollte der Hintergrund haben?

Dunkles Grau. Material Design empfiehlt #121212 als Grundfläche. Das ist ein guter Ausgangspunkt. Es wirkt weiterhin dunkel und hochwertig, ohne das Lesen zu erschweren. Reines Schwarz wird zum seltenen Akzent statt zur gesamten Umgebung.

Es gibt einen echten Zielkonflikt. Auf OLED-Bildschirmen schalten sich schwarze Pixel ab und sparen Strom. Deshalb setzen manche Apps auf #000000. Doch Ihre Flächen tragen Inhalte: helle Fotos, farbige Karten, kräftige Markengrafiken. Vor reinem Schwarz steigen ihre Kontraste stark an. Bei Inhalten, die Menschen länger als einen Moment ansehen, rechtfertigt die kleine Batterieersparnis die Belastung nicht.

Wie entsteht Tiefe ohne Schatten?

Eine Fläche erscheint höher, wenn sie heller wird. Im hellen Design erzeugt Schatten die Höhe. Im Dunkeln hat Schatten keine Fläche, auf der er sichtbar wird. Material hellt deshalb Flächen mit zunehmender Höhe auf. Je höher die Ebene, desto näher rückt sie an Weiß.

Technisch liegt eine durchscheinende weiße Schicht über der Basis #121212. Je höher die Fläche, desto deckender diese Schicht. Sie brauchen vor allem die Regel: Höher bedeutet heller. So bekommt eine dunkle Oberfläche die Ebenen zurück, die in einer schwarzen Fläche verschwinden würden.

Material veröffentlicht die Werte:

Quelle: Material Design, dunkles Design.

Was gilt für Ihre Markenfarben?

Mildern Sie sie. Gesättigte Farben, die auf Weiß strahlen, flimmern vor dunklem Grund und ermüden das Auge. Entsättigen und erhellen Sie sie. Das Ziel ist eine lesbare, angenehme Oberfläche.

Prüfen Sie anschließend den Kontrast, denn alte Annahmen gelten im Dunkelmodus nicht mehr. Eine Textfarbe, die auf Weiß den WCAG-AA-Grenzwert von 4.5 to 1 erreicht, kann auf dunklem Grund scheitern. Prüfen Sie das dunkle Design separat. Es ist eine andere Fläche mit anderer Berechnung.

Der Dunkelmodus braucht eine eigene Gestaltung

Er ist kein Filter, den Sie am Ende einschalten. Er ist eine zweite Gestaltung desselben Produkts mit eigener Grundfläche, eigenem Tiefenmodell und eigenen Farben. Wählen Sie dunkles Grau nahe #121212, heben Sie Flächen mit Licht an, mildern Sie die Farben und prüfen Sie jeden Kontrastwert erneut. Das ist nicht schwer. Es entscheidet, ob Menschen im Design bleiben oder es verlassen.

Solche kleinen Regeln machen einen Großteil der Leichtigkeit einer Oberfläche aus. Ein weiteres Beispiel mit großer Wirkung finden Sie unten: Wie Fitts’ Gesetz Ihre Buttons leicht oder schwer erreichbar macht.