Vor wenigen Jahren war weißer Hintergrund mit schwarzem Text der unverrückbare Standard im Webdesign. Doch heute bieten fast alle großen Betriebssysteme und Apps einen Dark Mode (Dunkelmodus) an. Was als Feature für Programmierer begann, die nachts arbeiteten, ist zu einer dominanten Design-Präferenz geworden. Für Webdesigner bedeutet dies eine neue Herausforderung: Sie müssen nicht mehr nur ein Design entwerfen, sondern zwei. Der Dark Mode ist dabei weit mehr als eine einfache Invertierung der Farben; er erfordert ein tiefes Verständnis von Licht, Kontrast und Tiefe auf dunklen Oberflächen.
Die Herausforderung des “echten” Schwarz Ein häufiger Anfängerfehler beim Designen eines Dark Mode ist die Verwendung von reinem Schwarz (#000000) als Hintergrund. Reines Schwarz kann jedoch auf modernen OLED-Bildschirmen zu Problemen führen. Wenn weißer Text auf reinem Schwarz gescrollt wird, kann ein “Schmiereffekt” (Smearing) entstehen. Zudem ist der Kontrast für das Auge extrem hart und kann zu Ermüdung führen. Professionelle Designer verwenden stattdessen Dunkelgrau-Töne. Dunkelgrau bietet eine weichere Oberfläche, reduziert die Belastung der Augen und ermöglicht es, Schatten zu verwenden, um Tiefe zu erzeugen – etwas, das auf reinem Schwarz nicht möglich ist, da man keinen Schatten sehen kann, der dunkler als Schwarz ist.
Entsättigung der Farben Farben wirken auf dunklem Hintergrund anders als auf hellem. Ein leuchtendes, gesättigtes Blau, das auf Weiß gut aussieht und lesbar ist, kann auf einem dunkelgrauen Hintergrund “vibrieren” und schwer lesbar werden. Im Dark Mode müssen Akzentfarben oft entsättigt und aufgehellt werden (Pastelltöne), um den gleichen visuellen Komfort und ausreichenden Kontrast zu gewährleisten. Das bedeutet, dass Designer separate Farbpaletten für den hellen und den dunklen Modus definieren müssen.
Hierarchie durch Helligkeit Im hellen Design erzeugt man Tiefe oft durch Schatten. Im Dark Mode funktioniert das nur begrenzt. Stattdessen arbeiten Designer mit dem Prinzip der Helligkeit. Elemente, die “näher” am Nutzer sein sollen (wie ein Popup-Fenster oder eine Karte), werden in einem helleren Grau dargestellt als der Hintergrund, der weiter weg ist. Je höher die Ebene, desto heller die Fläche. Dies imitiert, wie Licht in einem dunklen Raum auf Objekte fallen würde. Der Dark Mode ist ein Beweis dafür, dass Webdesign sich an die Nutzungsgewohnheiten und den Komfort der Nutzer anpassen muss.
Dieses Designparadigma wurde maßgeblich durch die Design-Richtlinien von großen Technologieunternehmen wie dem Material Design von Google und den Human Interface Guidelines von Apple vorangetrieben.