Dark Mode - Was du über den Dunkelmodus wissen solltest
Wie du sicherlich bemerkt hast, liegt der Dark Mode seit einiger Zeit im Trend. Er findet vermehrt Verwendung in Business-Anwendungen und Smartphone Apps, auf Streaming Plattformen und Mediatheken. Vor einem dunklen Hintergrund kommen vor allem Farben gut zur Geltung. Heller Text - solange er nicht zu lang und zu hell ist - lässt sich ebenfalls gut lesen.
Doch wenn etwas im Trend liegt, heißt das noch lange nicht, dass es auch sinnvoll ist.
hej, ich bin Ralf, freiberuflicher Webdesigner und Konzepter. Ich kann dich bei vielen Themen rund um deine Website unterstützen. Nachhaltigkeit und nachhaltiges Webdesign liegen mir besonders am Herzen. Hypes, die gerade im Internet kursieren, nehme ich kritisch unter die Lupe. Mein Motto lautet: "Ich muss nicht jede Welle reiten".
Ich freue mich auf unsere Zusammenarbeit.
1. Welche Vorteile bringt der Dark Mode?
Nach meinem Verständnis sorgt der Dark Mode für eine
- augenfreundliche Darstellung von Inhalten*
- längere Akkulaufzeiten bei Geräten mit OLED-Displays, deren Pixel einzeln beleuchtet werden (vor allem Smartphones und Fernseher)
- bessere Anwendungserfahrung durch Wahlfreiheit zwischen hellem und dunklem Modus
* Über 1 Mio. Dark Reader-Nutzer*innen (Dark Reader gehört zu den bekanntesten Dark Mode Browser Plug-ins), oder eine Umfrage der Android Authority von 2020 wonach 81,9 % der Android-Nutzer*innen den Dark Mode verwenden, sprechen für sich.
Das sind ein paar gute Argumente, welche für die Erstellung eines Dark Mode Designs sprechen.
Aber du fragst zu Recht, ob sich der zusätzliche Aufwand lohnt und im Verhältnis zum Nutzen steht. Lösungen auf Anwendungsseite wie zum Beispiel Dark Reader können ebenfalls helfen, diesen Bedarf zu decken.
2. Ein Dark Mode Browser Plug-in wird's schon richten
Dark Mode Browser Add-ons analysieren das aktuelle Design einer Internetseite und passen es automatisch an. Sie können individuell nach den eigenen Bedürfnissen konfiguriert und genutzt werden. Immer mehr Anwender*innen greifen auf solche Tools zurück, da viele Websites auf Farbschema-Einstellungen des Betriebssystems oder des Browsers (noch) nicht reagieren.
Das klingt zunächst gut.
3. Die Sache hat nur einen Haken
Dark Mode Browser Plug-ins funktionieren unterschiedlich und nicht immer wie gewünscht. Die Lesbarkeit mancher Websites verschlechtert sich sogar, vor allem, wenn eine mögliche Hell-Dunkel-Umkehrung bei der Konzeption des Website-Designs nicht berücksichtigt wurde. In diesem Zusammenhang sei der experimentelle "Auto Dark Mode for Web Contents" des Chrome Browsers erwähnt, der die wildesten Hell-Dunkel-Umkehrungsvarianten erzeugt. Deine Website ist nach dieser "Behandlung" nicht wiederzuerkennen.
Da du als Anbieter*in keinen Einfluss darauf hast, ob und wenn ja, welche Dark Mode Browser-Plug-ins zum Einsatz kommen, rate ich dir, schon bei der Konzeption der Website eine mögliche Hell-Dunkel-Umkehrung zu berücksichtigen. Damit bewahrst du dir ein Mindestmaß an Kontrolle über die Darstellung deiner eigenen Website in unterschiedlichen Nutzungssituationen. So sehen sich Besucher*innen nicht gleich beim Öffnen deiner Website veranlasst, ihr individuelles Dark Mode Plug-in zu aktivieren. Sollte das Plug-in bereits aktiviert sein, macht deine Website dank konzeptioneller Berücksichtigung eine gute Figur.
4. Auf Nummer sicher gehen
Am besten testest du gleich selbst die Dark Mode-Fähigkeiten deiner Website, indem du das Kontrastverhältnis zwischen Text und Hintergrund ermittelst.
Installiere dir zu diesem Zweck das Dark Reader Browser Add-on. Damit kannst du deine Homepage in den Dark Mode umschalten. Dark Reader gibt es für Chrome, Edge, Firefox und Safari. Das ColorFish ColorPicker Browser Plug-in unterstützt dich dabei, die HEX-Farbcodes zu kopieren. ColorFish steht für Chrome, Edge und Firefox zur Verfügung. Anschließend testest du die Farbkontraste deiner Website, indem du die HEX-Farbcodes in ein Farbkontrast-Testtool wie zum Beispiel https://webaim.org/resources/contrastchecker/ einfügst.
Das Testtool zeigt dir an, welches WCAG-Level dein Text-Hintergrund-Kontrast erreicht. WCAG steht für Web Content Accessibility Guidelines. Mit der Beachtung dieser Richtlinien wird sichergestellt, dass Internetinhalte für Menschen mit Behinderung zugänglich sind. Das minimale Kontrastverhältnis soll bei 4,5:1 für Fließtext und bei 3:1 für Überschriften liegen. Die optimalen Werte sind wesentlich höher: 7:1 bei Fließtext und 4,5:1 bei Überschriften.
Die Kontrastverhältnisse auf deiner Website sollten sich bei aktiviertem Dark Reader im genannten Bereich bewegen. So kannst du von einer guten Lesbarkeit deine Website ausgehen. Dies trifft ebenfalls zu, wenn Besucher*innen deiner Website andere Dark Mode Browser Add-ons einsetzen.
Es gibt noch ein weiteres Browser Plug-in, das dich dabei unterstützen kann, die Kontrastverhältnisse deiner Website zu testen. Es heißt Wave und ist für Chrome, Edge und Firefox verfügbar. Dieses Add-on wird ebenso wie das Farbkontrast-Testtool von der WebAIM-Organisation kostenlos bereitgestellt. Die Handhabung des Wave-Plug-ins ist jedoch anspruchsvoller als die zuvor beschriebene ColorPicker-Methode. Wave analysiert deine Website nicht nur auf Kontrastverhältnisse, sondern auch auf andere Zugänglichkeitsaspekte. Darunter fallen zum Beispiel fehlende Labels, Alt-Texte, Strukturelemente und die ARIA-Unterstützung. Das kann schnell unübersichtlich werden. Wenn du dich aber auf die Untersuchung der Kontrastverhältnisse konzentrierst, sind die zur Verfügung gestellten Funktionalitäten sehr komfortabel. Das Testen geht mit Wave wesentlich schneller von der Hand als mit der ColorPicker-Methode.
Unter Windows und Mac bietet das Programm "Colour Contrast Analyser" eine komfortable Möglichkeit, das Kontrastverhältnis deiner Website zu testen. TPGi stellt den Colour Contrast Analyser (https://www.tpgi.com/color-contrast-checker/) kostenlos zur Verfügung. Er wird lokal installiert und hat einen integrierten ColorPicker, mit dem du die Farben auf deiner Website direkt aufnehmen und prüfen kannst.
5. Wie es weitergehen kann
Es freut mich, wenn dir meine Überlegungen zum Thema Dark Mode weiterhelfen, und ich hoffe, dass ich dich motivieren konnte, die Dark Mode-Fähigkeiten deiner Webseite zu testen. Möchtest du solche Dark Mode Tests nicht selbst durchführen, übernehme ich diese gerne für dich. Sprich mich einfach an.
Doch auch wenn es dir nicht um die Optimierung deiner bestehenden Website geht, sondern um die Erstellung einer neuen Homepage, werde ich gerne für dich tätig. Du möchtest wissen, wie ich in diesem Fall mit dem Thema Dark Mode umgehe?
Das Thema Dark Mode spielt von Anfang an eine zentrale Rolle, auch wenn du kein zusätzliches Dark Mode Design wünschst.
Bereits zu Beginn des Designprozesses prüfe ich Logo, Schriftarten, Farben, Symbole, Bilder und grafischen Elemente auf deren Tauglichkeit für ein helles und ein dunkles Design. Die Kontraste zwischen Hell und Dunkel stimme ich so aufeinander ab, dass sie in einer hellen und einer dunklen Variante gleichermaßen funktionieren. Dies geschieht unabhängig von der Umsetzung eines zusätzlichen Dark Mode Designs. Im Falle einer Realisierung achte ich darauf, mit einer intelligenten Kombination der Anforderungen den Entwicklungsaufwand gering zu halten.
Denn im Sinne der Nachhaltigkeit gilt:
Der Mehraufwand für die Erstellung eines Dark Mode Designs muss im Verhältnis zum Mehrwert stehen. Vor diesem Hintergrund bietet sich ein auf CSS Media Query basierender Dark Mode an, der sich über die Modus-Einstellungen des Browsers oder des Betriebssystems aktivieren lässt.
Die Aspekte, die ich dir beschrieben habe, zeigen, wie wichtig es ist, sich frühzeitig Gedanken über den Dark Mode zu machen. Deshalb ist der Dark Mode Bestandteil meiner Beratung. Wir erwägen gemeinsam, ob die Erstellung eines zusätzlichen Dark Mode Designs sinnvoll ist. Denn nachträgliche Anpassungen führen zu Mehraufwand. Wenn zum Beispiel das eigene Corporate Design im Light und Dark Mode gleichermaßen zur Geltung kommen soll, ist die Implementierung eines Dark Themes unerlässlich. Die Einbindung erfolgt mittels CSS Media Query, weil eine reine Hell-Dunkel-Umkehrung in diesem Fall nicht ausreicht. Um Ausgewogenheit in der farblichen Gestaltung sowie im Hell-Dunkel zu erzielen, verwende ich eine angepasste Farbpalette und CSS-Filter für die Bilder. Voraussetzung hierfür ist, dass das Corporate Design dies zulässt.
Wenn du darüber nachdenkst, ein Dark-Mode-Design in deine Website - gegebenenfalls auch nachträglich - einzubinden, dann ist jetzt der richtige Zeitpunkt aktiv zu werden.
