Der Dark Mode ist ein alternatives Farbschema, bei dem heller Text und helle Bedienelemente auf dunklem Hintergrund dargestellt werden (statt dunkler Schrift auf hellem Grund). Dies ist nicht nur ein Gestaltungstrend, sondern ein wichtiger Aspekt der Barrierefreiheit. Ein zentraler Vorteil des Dark Mode ist die reduzierte Augenbelastung. Der dunkle Hintergrund mit heller Schrift reduziert die Helligkeit deutlich, was besonders in dunkleren Umgebungen oder bei Nachtnutzung angenehmer für die Augen ist. Dies kommt allen Nutzern zugute, ist aber besonders wichtig für Menschen mit Lichtempfindlichkeit oder häufigen Migräneattacken.
Für Menschen mit verschiedenen Seheinschränkungen bietet der Dark Mode spezifische Vorteile. Einige Nutzer mit Sehschwächen können den Kontrast zwischen Text und dunklem Hintergrund besser wahrnehmen als die klassische schwarze Schrift auf weißem Grund. Auch Menschen mit Migräne wird empfohlen, helles Licht zu vermeiden.
Die Implementierung erfolgt über verschiedene Wege:
CSS-Media Query
@media (prefers-color-scheme: dark)oder CSS-Funktionlight-dark()(empfohlen)Manueller Theme-Switcher
Für die Entwicklung bedeutet dies:
Systematische Farbpalette erstellen
Alle Zustände (hover, focus) beachten
Bilder und Medien anpassen
Schriftkontraste prüfen
Browserkompatibilität testen
Ein interessanter Nebeneffekt zeigt sich bei der Verwendung von OLED- oder AMOLED-Displays: Der Dark Mode spart hier tatsächlich Energie, da dunkle Pixel weniger Strom verbrauchen. Dies verlängert die Akkulaufzeit mobiler Geräte.
Kein WCAG-Erfolgskriterium verlangt einen Dark Mode. Wichtig ist, dass jeder Modus die Mindestkontrastverhältnisse erfüllen.
