Egal ob App oder Website, heutzutage braucht jeder Service einen Dark Mode. Spätestens seit Apple bei MacOS und Microsoft unter Windows einen eigenen Dark Mode in ihr Betriebssystem integriert haben, möchten Nutzer*innen immer öfter, dass genutzte Dienste sich ebenfalls an den gewählten Einstellungen des Systems orientieren. Wer den Dark Mode unter MacOS nutzt, möchte idealerweise also auch alle Websites im Dark Mode angezeigt bekommen. Ganz einfach.
Tatsächlich ist genau das auch problemlos möglich. Die Schwierigkeit dabei ist nur, dass viele den Dark Mode nicht konsequent oder nicht gut genug umsetzen. Hier kommt es häufig auf die Details an. Bei Dunkelheit sind es oft die vermeintlichen Kleinigkeiten, die im Auge wehtun und dann für eine unangenehme Erfahrung während der Betrachtung sorgen. Um genau diese Details geht es heute.
1. Die richtige Farbpalette wählen
Dark Mode, das bedeutet für viele schwarz oder weiß. Ganz so einfach ist die Sache aber gar nicht. Für das Auge ist ein sehr dunkles Blau oder ein tiefes Grün oft wesentlich angenehmer. Das eine wirkt kühler und daher professioneller, während das andere wärmer und natürlicher erscheint. Außerdem muss die Farbgestaltung des Brands entsprechend angepasst werden, ebenso wie das Logo. Dieselbe Farbe hat im Dark Mode oft keine guten Kontraste und das kann zum Problem für Nutzer*innen werden, die farbenblind sind oder bestimmte Sehschwächen aufweisen.
2. Auf saubere Kanten achten
Egal ob auf der Website, in Apps oder Newslettern, werden diese im Dark Mode präsentiert, fallen oft unsaubere Ecken und Kanten bei Grafiken auf. Hier offenbart sich auch gleich, wo nachgearbeitet werden muss. Weiße Hintergründe von Grafiken können, anders als die Transparenz, Speicherplatz bei der Optimierung sparen, fallen im Dark Mode dann aber sofort unangenehm auf und funktionieren somit nicht länger. Hier gilt es nachzujustieren.
3. Lesbarkeit im Dunkeln verbessern
Wie bei der Farbpalette schon erwähnt, gibt es mehr als die Möglichkeit, weiß auf schwarz oder schwarz auf weiß darzustellen. Beides hat einen derart starken Kontrast, dass es für viele Augen nicht sonderlich angenehm wirkt, vor allem wenn es um das Lesen längerer Texte geht. Genau wie schwarze Schrift auf weißem Hintergrund, also im Idealfall eher grau auf weiß erscheint, sollte auch keine weiße Schrift auf schwarzem Hintergrund platziert werden. Das erhöht die Lesbarkeit enorm und ermüdet die Augen nicht so schnell.
4. Die Sache mit den Bildern
Mit den Bildern ist das im Dark Mode so eine Sache. Wer hier oft die Farbe Weiß als Hintergrund verwendet, der wird feststellen, dass das im Dark Mode nicht sonderlich gut aussieht und eher blendet. Bilder können, wenn notwendig, per CSS-Filter abgedunkelt werden. Das beruhigt die Augen etwas und die Bilder erscheinen weniger grell und leuchtend. Dies ist allerdings eher eine Notlösung. Noch besser wäre es, bei der Bebilderung bereits darauf zu achten, dass Darstellungen sowohl im Dark Mode als auch im hellen Erscheinungsbild entsprechend angenehm erscheinen.
5. Optional und automatisch abwägen
Zu guter Letzt müsst ihr euch dann noch die Frage stellen, ob ihr den Dark Mode komplett automatisch anzeigen möchtet oder rein optional anbietet. Das ist eine schwierige Frage. Auf der einen Seite ist es sinnvoll, den gewählten Systemstandard auf das eigene Angebot anzuwenden. Nutzt jemand auf seinem Notebook oder Smartphone den Dark Mode, erscheint also auch eure Plattform im dunklen Look. Mitunter kann das aber ebenso störend sein, weil Nutzer*innen nicht die freie Wahl haben. Dann wäre ein Schalter hilfreich, um eigenständig zwischen den Modi wechseln zu können. Das eine geht zudem simplifiziert über CSS (@media (prefers-color-scheme: dark)), während das andere erst über den localStorage umgesetzt werden muss und ungleich komplexer erscheint. Je verflochtener die Darstellung, desto wichtiger die Wahl, finden wir.
Ist der Dark Mode zur Pflicht geworden?
Ist der Dark Mode inzwischen eine Verpflichtung geworden? Ja und nein, denn es kommt dabei auf das jeweilige Angebot an. Nicht jede Plattform muss zwingend ihr Farbschema anpassen und je komplexer der eigene Service aufgebaut ist, desto schwieriger kann dies mitunter auch werden. Was bei kleinen Websites schnell getan ist, erfordert bei großen Portalen dann einen enormen Mehraufwand und eine beständige Verwaltung der alternativen Darstellung. Alles muss ebenso gut im dunklen Erscheinungsbild funktionieren, was nicht zwangsläufig so einfach zu realisieren ist.
Seit die Betriebssysteme (MacOS, Windows, iOS, Android) aber allesamt einen entsprechenden Dark Mode anbieten und es erlauben, dass dieser einfach via CSS angesprochen werden kann, ist er tatsächlich ein wenig zur Pflicht geworden. Zumindest bei neuen Angeboten sollte daher von Anfang an darauf geachtet werden, dass die gesamte Darstellung ebenfalls im Dark Mode funktioniert. Ältere Plattformen können in Zukunft je nach Bedarf umgestellt werden, sollten sich dann aber die notwendige Zeit nehmen, um ein vernünftiges Ergebnis zu präsentieren.
Ob Pflicht oder nicht lässt sich abschließend schwer sagen. Es kommt auf die Branche und den Service an. Aktuell würden wir das noch verneinen, da es bislang kein Standard geworden ist, dass jede Website, App oder Plattform ihren eigenen Dark Mode besitzt. In Zukunft könnte sich das jedoch ändern, denn mehr und mehr Angebote stellen um und bieten ihren Nutzer*innen die Wahl zwischen dunklem und hellem Erscheinungsbild.
by A-DIGITAL one
Unsere Herzen schlagen Digital, unsere Projekte leben Digital, unsere Kunden lieben und schätzen Digital! Die einzigartige digitale Performance, die wir seit 1999 an den Tag legen.
Mit unserem Team von über 45 Experten begleiten wir Sie auf Ihrem Weg der digitalen Transformation. Mit klaren Strategien, persönlicher Betreuung und exzellenter Ausführung entwickeln wir, innovativ und individuell, maßgeschneiderte digitale Lösungen, die performen und verkaufen können.