Eine moderne Website muss nicht für jeden genau gleich aussehen. Manche Besucher bevorzugen eine helle, klassische Oberfläche; andere finden eine dunklere Darstellung angenehmer, vor allem abends oder bei schlechten Lichtverhältnissen. Indem man sowohl einen hellen als auch einen dunklen Modus anbietet, gibt man den Nutzern mehr Kontrolle darüber, wie sie eine Website erleben.
Die effektivsten Umsetzungen beginnen in der Regel damit, die Geräteeinstellungen des Besuchers zu berücksichtigen. Betriebssysteme und Browser können einer Website mitteilen, ob der Nutzer ein helles oder dunkles Erscheinungsbild gewählt hat, und die Website kann auf diese Einstellung reagieren, sodass sie ein passendes Design anwendet. Diese Funktion knüpft an fast drei Jahrzehnte Farbgestaltung für Websites an und nutzt die im «CSS Zen Garden» vorgestellten technischen Prinzipien, um den Inhalt entsprechend den Vorlieben des Website-Betreibers oder des Besuchers neu zu gestalten.
Eine Website kann auch einen eigenen Theme-Switcher anbieten. Das ist praktisch, weil jemand die Einstellung seines Betriebssystems für eine bestimmte Website überschreiben möchte. Die Wahl des Besuchers wird gespeichert, sodass er nicht bei jedem Besuch unnötigerweise den Modus wechseln muss.
Warum nutzen Leute den Dunkelmodus?
Der Dunkelmodus ist nicht einfach nur ein trendiges alternatives Farbschema. Viele Leute nutzen ihn, weil er angenehmer ist, die visuelle Intensität eines hellen Bildschirms verringert oder sich besser in eine dunkle Umgebung einfügt. Er kann auch für Menschen hilfreich sein, die unter Blendung, Lichtempfindlichkeit, Migräne oder bestimmten Schwierigkeiten bei der visuellen Wahrnehmung leiden.
Auch der helle Modus ist nach wie vor nützlich. Er sorgt oft für ein vertrautes Leseerlebnis und kann in heller Umgebung besonders effektiv sein. Manche Leute (wie ich!) finden dunkle Benutzeroberflächen schwerer zu lesen, vor allem wenn der Text dünn, klein oder nicht kontrastreich genug ist.
Das Wichtigste ist die Wahlmöglichkeit. Es gibt kein einziges Farbschema, das für jede Person, jedes Gerät oder jede Situation am besten geeignet ist. Ein gut durchdachtes Designsystem berücksichtigt diese Unterschiede, ohne dass sich einer der beiden Modi wie ein nachträglicher Einfall anfühlt.
Barrierefreiheit als Teil der Gestaltung
Barrierefreiheit lässt sich nicht allein durch einen dunklen Hintergrund erreichen. Beide Designs müssen unabhängig voneinander getestet werden, denn eine Farbkombination, die im hellen Modus funktioniert, kann unbrauchbar werden, wenn die Farben für den dunklen Modus invertiert oder angepasst werden.
Barrierefreiheit betrifft nicht nur Text. Symbole, Formularelemente, Rahmen, Fokusanzeigen, Diagramme und andere aussagekräftige Elemente der Benutzeroberfläche müssen weiterhin erkennbar bleiben. Die Richtlinien zur Barrierefreiheit von Webinhalten enthalten separate Vorgaben zum Kontrast von Nicht-Text-Elementen, während Tastaturbenutzer in beiden Designs einen deutlich sichtbaren Fokusstatus benötigen.
Nicht nur heller Text auf dunklem Hintergrund
Wie komplex der Dunkel- und Hellmodus ist, wird deutlich, wenn man über den Hintergrund der Startseite und den Fliesstext hinausblickt. Eine Website enthält viele visuelle Zusammenhänge, und für jeden einzelnen muss die Farbwahl bewusst getroffen werden.
Ein Theme braucht zum Beispiel möglicherweise unterschiedliche Farben für:
- der Seitenhintergrund und die Inhaltsbereiche;
- Haupttext, Neben- und abgeblendeter Text;
- Links und interaktive Steuerelemente;
- Rahmen, Trennlinien und Umrisse von Formularfeldern;
- Schaltflächen und ihre Zustände beim Bewegen des Mauszeigers darüber, im aktiven und im deaktivierten Zustand;
- Anzeigen für den Tastaturfokus;
- Karten, Bedienfelder, Menüs und Overlays;
- Erfolgs-, Warn-, Fehler- und Informationsmeldungen;
- Markierungen, ausgewählter Text und Suchergebnisse;
- Symbole, Illustrationen und dekorative Details.
Ein helles Design könnte einen weissen Seitenhintergrund, einen leicht grauen Kartenhintergrund und einen dezenten grauen Rand verwenden. Wenn man im Dunkelmodus einfach den Seitenhintergrund auf fast schwarz ändert, könnten die Karten der Seite zu sehr ähneln, die Ränder verschwinden oder ein unangenehm starker Kontrast entstehen.
Das gleiche Problem betrifft auch die Markenfarben. Ein leuchtend gelber Button kann auf einem dunklen Hintergrund wunderbar wirken, auf einem hellen Hintergrund jedoch zu blass erscheinen. Ein Unternehmensblau mag sich für grosse Überschriften eignen, als kleiner Lauftext jedoch nicht funktionieren. Ein gedecktes Grau, das im Hellmodus elegant wirkt, kann im Dunkelmodus fast unsichtbar werden.
Deshalb verwenden professionelle Theme-Systeme semantische Farbrollen, anstatt einzelne Farbwerte im gesamten Code zu verstreuen. Anstatt nur in Begriffen wie „Blau“ oder „Grau“ zu denken, definiert das Design Rollen wie --colour-background, --colour-surface, --colour-text-primary, --colour-text-muted, --colour-border und --colour-focus. Jede Rolle erhält im hellen und im dunklen Modus einen passenden Wert.
Dieser Ansatz macht das System wartungsfreundlicher. Komponenten können auf die benötigte Rolle verweisen, während das Theme die tatsächliche Farbe festlegt. Ausserdem lassen sich Tests so systematischer durchführen: Jede wichtige Kombination kann in beiden Themes überprüft werden, einschliesslich der Zustände «Hover», «Fokus», «deaktiviert» und «Fehler».
Planung der CI/CD
Der Dunkel- und Hellmodus sollten als Teil der Corporate Identity und des Corporate Designs (CI/CD) eines Unternehmens geplant werden und nicht erst später im Projekt als technische Funktion hinzugefügt werden.
In Markenrichtlinien werden die Kernfarben festgelegt, aber ein vollständiges digitales Farbsystem erfordert mehr Details. Es sollte dokumentieren, wie Farben für Hintergründe, Text, Rahmen, Links, Schaltflächen, Benachrichtigungen und Zustände in beiden Designs verwendet werden. Ausserdem sollte es festlegen, welche Farben aus Gründen der Barrierefreiheit angepasst werden dürfen, ohne dabei den wiedererkennbaren Charakter der Marke zu beeinträchtigen.
Das sorgt für Einheitlichkeit auf der gesamten Website, in Apps, E-Mails und anderen digitalen Produkten. Es hilft Designern, Entscheidungen schneller zu treffen, gibt Entwicklern eine zuverlässige Auswahl an Tokens für die Umsetzung und sorgt dafür, dass zukünftige Neugestaltungen weniger Störungen verursachen.
Den Dunkel- und Hellmodus versteht man daher am besten als Erweiterung eines durchdachten Designsystems. Wenn die Grundsätze, die Anforderungen an die Barrierefreiheit und die Farbzusammenhänge von Anfang an geplant werden, entsteht eine Website, die flexibler, angenehmer und einladender wirkt – und dabei dennoch erkennbar Teil derselben Marke bleibt.
Titelbild von Arafat Gazi auf Unsplash.
