Ok, dunkelgrau ist auch in Ordnung – hauptsache Dark Mode. Das finde ich angenehmer, denn es blendet mich nicht so sehr. Mit dieser Präferenz bin ich auch nicht allein, wie diese nicht repräsentative Umfrage zeigt. Doch obwohl neben mir viele andere Menschen auch den Dark Mode bevorzugen, gibt es ebenso viele Webseiten, die mir trotzdem leuchtend hell ins Gesicht strahlen – ein Hoch auf Dark Mode Extension!
Warum Du den Dark Mode unterstützen solltest
Dark Mode ist mehr als nur eine persönliche Präferenz. Deine Webseite auch in einer dunklen Version anzubieten, verbessert die Barrierefreiheit, UX und spart auch noch Energie (mehr Nachhaltigkeitstipps hat Dir Hannah hier zusammengefasst), denn sie ist:
-
Energiesparender, weil dunkle Bildschirme weniger Strom verbrauchen. Eine Studie der Purdue University zeigte zum Beispiel, dass Android-Smartphones mit OLED-Display bei 100% Helligkeit und Dark Mode bis zu 47% weniger Energie verbrauchen (hier das PDF der Studie).
-
Userfreundlicher, weil Bildschirminhalte im Dark Mode in heller Umgebung (zum Beispiel draußen bei Sonnenschein) besser zu erkennen sind.
-
Barrierefreier, weil helles Licht nicht nur anstrengend für die Augen sein kann, sondern bei Menschen, die an Migräne leiden, sogar einen Migräneschub auslösen kann.
Beim nächsten Webdesign aber allein auf eine dunkle Version zu setzen, ist der falsche Weg. Denn Dark Mode kann die gleichen Accessibility-Probleme verursachen wie Light Mode. Besser ist es also beides gleichzeitig anzubieten. Anhand der Geräteeinstellungen der Nutzenden wird dann entweder die helle oder dunkle Seite angezeigt. Idealerweise gibt es zusätzlich noch einen Switch-Button, über den Nutzende zwischen Dark und Light Mode entsprechend ihrer Umgebungssituation wechseln können. Wichtig ist auch, dass beide Versionen die Kontrastanforderungen der WCAG erfüllen, um barrierefrei zu sein.
Wie Du den Dark Mode unterstützen kannst
Im CSS kannst Du über die Media Query prefers-color-scheme mit den Werten light und dark verschiedene Farbschemata einrichten. Entsprechend der Geräteeinstellungen der Nutzenden wird Deine Webseite dann entweder hell oder dunkel dargestellt. Das geht sogar nicht nur für den Hintergrund und den Text Deiner Webseite, sondern auch für Bilder. Detaillierte Anleitungen zum Einsatz von prefers-color-scheme findest Du zum Beispiel hier auf mozilla.org (englisch) oder web.dev (deutsch).
Wie sieht es bei Dir aus? Bist Du Fan vom Dark oder Light Mode?