Dark Mode und Barrierefreiheit: Kontraste richtig umsetzen

Der Dark Mode ist längst kein Trend mehr, sondern eine etablierte Nutzerpräferenz – über 80 Prozent der Smartphone-Nutzer verwenden ihn zumindest zeitweise. Für Menschen mit Lichtempfindlichkeit, Migräne oder bestimmten Sehbehinderungen kann ein gut umgesetzter Dark Mode die Lesbarkeit erheblich verbessern. Gleichzeitig birgt er Barrierefreiheits-Risiken: Kontraste, die im hellen Modus funktionieren, versagen im dunklen, und manche Sehbehinderungen werden durch hellen Text auf dunklem Grund sogar verschlechtert. Ein barrierefreier Dark Mode erfordert sorgfältige Farbplanung, nicht nur eine Invertierung der bestehenden Palette.

Warum Dark Mode für Barrierefreiheit relevant ist

Dark Mode ist kein reines Komfort-Feature – für bestimmte Nutzergruppen ist er eine Notwendigkeit. Menschen mit Photophobie (Lichtempfindlichkeit), die bei Migräne, Katarakt oder bestimmten neurologischen Erkrankungen auftreten kann, erleben bei hellen Bildschirmen Schmerzen und können Inhalte nur eingeschränkt lesen. Manche Formen von Sehbehinderung, etwa Retinitis pigmentosa, profitieren von reduzierter Lichtmenge. Auch für Menschen mit Astigmatismus kann weißer Text auf schwarzem Grund problematisch sein – sie erleben einen „Halation"-Effekt, bei dem heller Text zu leuchten scheint und Buchstaben verschwimmen. Das bedeutet: Ein Dark Mode allein ist keine Barrierefreiheits-Lösung. Idealerweise bieten Sie drei Optionen – Hell, Dunkel und Systemeinstellung – und stellen sicher, dass alle drei Varianten die WCAG-Kontrastanforderungen erfüllen. Lassen Sie den Nutzer die Wahl und speichern Sie die Präferenz persistent.

WCAG-Kontrastanforderungen im Dark Mode

Die WCAG-Kontrastkriterien gelten unabhängig vom Farbschema. WCAG 1.4.3 (Level AA) fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. WCAG 1.4.6 (Level AAA) verschärft auf 7:1 bzw. 4,5:1. Im Dark Mode wird reines Weiß (#FFFFFF) auf reinem Schwarz (#000000) als zu kontrastreich empfunden – das Kontrastverhältnis von 21:1 erzeugt einen Flimmer-Effekt und ermüdet die Augen. Best Practice: Verwenden Sie gedämpftes Weiß (z.B. #E0E0E0 bis #F0F0F0) auf dunklem Grau (z.B. #121212 bis #1E1E1E) statt reinem Schwarz. Achten Sie darauf, dass auch UI-Elemente wie Trennlinien, Borders und Placeholder-Texte den Mindestkontrast einhalten – im Dark Mode werden diese oft übersehen. Farbige Links und Buttons müssen sowohl gegen den dunklen Hintergrund als auch gegeneinander ausreichend Kontrast aufweisen. Testen Sie jede Farbe Ihres Dark-Mode-Themes separat gegen den Hintergrund.

Technische Umsetzung mit prefers-color-scheme

Die CSS-Media-Query `prefers-color-scheme` erkennt die Systempräferenz des Nutzers. Sie akzeptiert die Werte `light` und `dark`. Die empfohlene Implementierung nutzt CSS Custom Properties: Definieren Sie Farbvariablen im `:root`-Selektor für den hellen Modus und überschreiben Sie sie in `@media (prefers-color-scheme: dark)`. Beispiel: `:root { --bg: #FFFFFF; --text: #1A1A1A; } @media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #E0E0E0; } }`. Ergänzen Sie einen manuellen Toggle-Switch, der die Präferenz via `data-theme`-Attribut auf dem ``-Element steuert und im localStorage speichert. Der manuelle Toggle muss Vorrang vor der System-Einstellung haben. Für Bilder verwenden Sie das ``-Element mit `media`-Attribut, um Dark-Mode-optimierte Versionen auszuliefern, oder setzen Sie `filter: brightness(0.85)` auf Bilder im Dark Mode, um zu helle Bilder abzudämpfen. Achten Sie auf `color-scheme: light dark` im Meta-Tag, damit auch Browser-UI-Elemente wie Scrollbars angepasst werden.

Häufige Fehler bei Dark-Mode-Implementierungen

Der häufigste Fehler: Nur die Hintergrund- und Textfarbe zu tauschen, ohne alle anderen Farben anzupassen. Schatten, die im hellen Modus Tiefe erzeugen, sind auf dunklem Hintergrund unsichtbar – verwenden Sie stattdessen hellere Oberflächen oder subtile Borders für Erhebungen. Farben, die als Statusanzeige dienen (Rot für Fehler, Grün für Erfolg), müssen im Dark Mode angepasst werden – ein sattes Rot auf fast schwarzem Hintergrund kann unlesbar sein. SVG-Icons mit hartkodierten Farben bleiben im Dark Mode unverändert und werden unsichtbar. Bilder mit transparentem Hintergrund können problematisch werden, wenn dunkler Text auf dem nun dunklen Hintergrund verschwindet. Form-Elemente wie Inputs und Selects können Browser-Default-Styles haben, die im Dark Mode nicht funktionieren. Der `` wird vergessen, sodass Scrollbars und andere Browser-Chrome-Elemente hell bleiben. Und schließlich: Der Dark-Mode-Toggle selbst ist oft nicht barrierefrei – er muss tastaturzugänglich sein, einen klaren Fokus-Indikator haben und seinen Zustand via aria-Attribute kommunizieren.

Dark Mode testen und validieren

Testen Sie Ihren Dark Mode systematisch: Aktivieren Sie den dunklen Modus im Betriebssystem und prüfen Sie jede Seite Ihrer Website. Nutzen Sie Kontrast-Checker wie den WebAIM Contrast Checker oder die Chrome DevTools (Elements → Styles → Kontrastanzeige) für jede Text-Hintergrund-Kombination. Prüfen Sie nicht nur Fließtext, sondern auch Placeholder-Text, deaktivierte Buttons, Links, Badges und Icons. Testen Sie alle Zustände: Normal, Hover, Focus, Active, Disabled. Testen Sie im Windows-Hochkontrastmodus – dieser überschreibt Ihre Dark-Mode-Farben mit systemdefinierten Farben und kann Layouts brechen, wenn Sie Farben für strukturelle Zwecke missbrauchen (z.B. Borders nur durch Farbkontrast statt explizite Border-Properties). Prüfen Sie die Lesbarkeit bei unterschiedlichen Bildschirmhelligkeiten. Automatisierte Tools wie axe-core können Kontrastprobleme im Dark Mode erkennen, wenn Sie sie im dunklen Modus ausführen. Führen Sie den Kontrast-Test zweimal durch – einmal im hellen, einmal im dunklen Modus.