nachhaltiges webdesign jetzt
info

Dark Mode bevorzugen

Die Darstellung von dunklen Farben verbraucht auf manchen Displays weniger Energie als die Darstellung heller. So können wir über die Farbgestaltung den Energieverbrauch von Websites auf Seite der Endgeräte verringern.

negativen Fußabdruck minimieren
positiven Fußabdruck maximieren
sowohl als auch

Technischer Hintergrund

Was hell leuchtet braucht Energie. Das gilt für alte Röhrenmonitore ebenso wie für moderne OLED-Displays.

OLED steht für „organic light-emitting diode“, eine Technologie, bei der jedes Pixel einzeln beleuchtet wird. Helle Pixel werden stark beleuchtet, dunkle Pixel weniger.

Bei den (noch) gängigen LCDs („liquid crystal display“) wird dagegen die ganze Displayfläche im Hintergrund beleuchtet und bei dunklen Pixeln sozusagen ein Vorhang vorgeschoben. Die Helligkeit der Farben ändert den Stromverbrauch hier nicht.

Die Höhe der Einsparung von OLED-Displays ist ebenfalls abhängig von der generellen Helligkeitseinstellung auf dem Gerät. Als Faustregel gilt hier: je heller das Display eingestellt ist, desto mehr Energie kann durch einen Dark Mode eingespart werden.

Verbreitung der Displays

In einigen Smartphones, die nach 2017 auf den Markt kamen, sind OLED-Displays im Einsatz. Ebenfalls sind TV-Sets, PC-Monitore und Laptop-Displays erhältlich, Tendenz steigend.

Denn OLED hat trotz höherem Preis neben dem geringeren Stromverbrauch weitere Vorteile: sattere Farben, tiefere Schwarztöne, schnellere Reaktionszeiten. Darüber hinaus sind OLED-Displays dünner und können gebogen bzw. gefaltet werden.

Die Masse der momentan im Einsatz befindlichen Bildschirme arbeitet allerdings nach wie vor mit LCD-Technologie.

Dark Mode im Webdesign

Dark Mode bedeutet, dass ein Modus zur Verfügung gestellt wird, in dem ein Großteil der Anzeige in dunklen Farben gehalten wird. Für die meisten Websites und Apps bedeutet das: heller Text vor dunklem Hintergrund.

Der Grund für den Einsatz dunkler Hintergründe ist oft nicht primär der geringere Stromverbrauch, sondern vielmehr ein angenehmeres Lesen in lichtarmen Umgebungen.

Vermehrt finden sich in letzter Zeit Toggle-Buttons, mit denen Seitenbesucher*innen die Darstellung zwischen Dark und Light Mode wechseln können.

Moderne Browser und Betriebssysteme lassen sich darüber hinaus so einstellen, dass sie den Dark Mode automatisch bevorzugt darstellen.

Zwei Dinge müssen wir beim Design von Dark Mode Umgebungen besonders beachten:

  • Erstens wirken Kontraste stärker. Rein weißer Text auf rein schwarzem Grund wirkt für das Auge unangenehm. Das gleiche gilt für helle Bilder und hochsaturierte Farben.
  • Zweitens sollten Stromspar-Ambitionen unsere Design-Intention nicht per se überschreiben. Wenn helle Hintergründe die Botschaft besser rüber bringen, muss die Website nicht zwangsläufig auf dunkel getrimmt werden.

Ressourcen

Habt ihr weitere außergewöhnliche Ressourcen (umfassend, tiefgreifend, klug, lustig) zu diesem Thema?
Vermisst ihr etwas? Oder hat euch der Inhalt sehr geholfen?

Dieses Projekt lebt von eurer Beteiligung. Schreibt mir gern eine Zeile an mail@gerritschuster.de