Accessibility First

Hell- und Dunkelmodus: Ein einfacher Leitfaden für Webdesign und Entwicklung

Julia Undeutsch

3 Min. Lesezeit

Hell- und Dunkelmodus sind wichtige Elemente im Web- und App-Design. Dieser Artikel erläutert ihre Merkmale, Vorteile, Barrierefreiheitsaspekte, Implementierungsmethoden, die Integration mit Systemeinstellungen und Testverfahren. Zudem werden bewährte Methoden für das Design ohne Umschaltfunktion vorgestellt, um eine optimale Benutzererfahrung zu gewährleisten.

Was ist der Hell- und Dunkelmodus?

Der Hell- und Dunkelmodus sind zwei unterschiedliche visuelle Modi, die das Farbschema einer Website oder Anwendung anpassen. Der Hellmodus verwendet in der Regel einen weißen oder hellen Hintergrund mit dunklem Text, während der Dunkelmodus einen dunklen Hintergrund mit hellem Text nutzt.

Ziel dieser Modi ist es, den Nutzern ein angenehmes und anpassbares Benutzererlebnis zu bieten, das ihren Vorlieben oder den Umgebungsbedingungen entspricht.

Warum brauchen wir diesen Modus? (Barrierefreiheit und Nutzerfreundlichkeit)

Der Hauptgrund für das Bereitstellen von Hell- und Dunkelmodus liegt in der Barrierefreiheit und Benutzerfreundlichkeit. Einige Nutzer bevorzugen den Dunkelmodus, um die Augenbelastung zu reduzieren, insbesondere in dunklen Umgebungen, während andere den Hellmodus für eine bessere Lesbarkeit bei starkem Licht bevorzugen.

Zusätzlich bietet dies folgende Vorteile:

  • Reduzierte Augenbelastung: Der Dunkelmodus kann die Augen schonen, insbesondere bei schlechten Lichtverhältnissen.
  • Verbesserte Lesbarkeit: Der Hellmodus bietet höheren Kontrast in gut beleuchteten Umgebungen.
  • Energieeffizienz: OLED- und AMOLED-Bildschirme verbrauchen im Dunkelmodus weniger Strom, da weniger Pixel beleuchtet werden.
  • Barrierefreiheit: Nutzer mit Sehbehinderungen, Lichtempfindlichkeit oder Erkrankungen wie Photophobie profitieren von anpassbaren Farbmodi.

Wie wird Hell- und Dunkelmodus auf einer Website umgesetzt? (Umschalt-Schalter)

Die häufigste Methode zur Implementierung des Hell- und Dunkelmodus ist ein Umschalt-Schalter (Toggle Switch). Dieser erlaubt es den Nutzern, manuell zwischen den beiden Modi hin und her zu wechseln. Die Umsetzung erfolgt typischerweise in folgenden Schritten:

  1. Hinzufügen eines Umschalt-Schalters: Ein einfacher Schalter in der Benutzeroberfläche.
  2. Verwendung von CSS-Variablen: Definition von Farbvariablen und dynamisches Umschalten.
  3. Speichern der Nutzerpräferenz: Speichern der Auswahl in localStorage oder Cookies.
  4. Anwenden der Modi: Verwendung von JavaScript, um den bevorzugten Modus festzulegen.

Beispiel einer CSS-Implementierung:

:root {
  --background-color: white;
  --text-color: black;
}

[data-theme='dark'] {
  --background-color: black;
  --text-color: white;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

Ein einfacher JavaScript-Toggle (nicht produktionsreif):

document.getElementById('theme-toggle').addEventListener('click', () => {
  document.documentElement.setAttribute(
    'data-theme',
    document.documentElement.getAttribute('data-theme') === 'dark'
      ? 'light'
      : 'dark'
  );
  localStorage.setItem(
    'theme',
    document.documentElement.getAttribute('data-theme')
  );
});

Auswirkungen von System- und Browsereinstellungen

Moderne Browser und Betriebssysteme bieten eingebaute Unterstützung für Hell- und Dunkelmodus. Anstatt eine manuelle Umschaltung zu bedienen, kann eine Website die Nutzerpräferenzen mit color-scheme erkennen:

:root {
  color-scheme: light dark;
}

Wenn Sie sich nicht aus CSS verlassen wollen, können Sie den Modus auch im HTML hinzufügen.

<head>
  <meta name="”color-scheme”" content="”light" dark” />
</head>

Das ist alles das es braucht, um einen Hell- und Dunkelmodus bereitzustellen.

body {
  background-color: plum;
  color: indigo;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: indigo;
    color: plum;
  }
}

In manchen Fällen wollen Sie die Farben je nach Branding oder Geschmack anpassen. Das können Sie zum Einen mit der CSS-Media-Query prefers-color-scheme tun:

Eines der neuesten Features bietet Ihnen aber auch die Möglichkeit, den Effekt ohne media queries zu erreichen.

:root {
  --light: plum;
  --dark: indigo;

  color-scheme: light dark;
}

input {
  --accent-color: light-dark(var(--dark), var(--light));
  accent-color: var(--accent-color);
}

Wenn nun das Betriebssystem oder der Browser im Hellmodus ist, bedient es sich des ersten Werts, und wenn es im Dunkelmodus ist, des zweiten. Dadurch passt sich die Website automatisch an die Betriebssystem- oder Browsereinstellungen des Nutzers an, was eine nahtlose Benutzererfahrung gewährleistet.

Wie testet man prefers-color-scheme?

Um sicherzustellen, dass Ihre Dunkel- und Hellmodus-Implementierung korrekt funktioniert, können Sie zum Beispiel Chrome DevTools nutzen:

  1. Öffnen Sie Chrome DevTools (F12 oder Ctrl+Shift+I unter Windows/Linux, Cmd+Opt+I unter macOS).
  2. Wechseln Sie zum Rendering-Tab. Falls dieser nicht sichtbar ist, öffnen Sie das Command Menu (Ctrl+Shift+P oder Cmd+Shift+P), suchen nach Rendering und wählen Show Rendering.
  3. Scrollen Sie nach unten zur Emulate CSS media feature prefers-color-scheme-Sektion.
  4. Wählen Sie Dark, um den Dunkelmodus zu erzwingen, oder Light, um zum Hellmodus zu wechseln.

So können Sie prüfen, wie Ihre Website unter verschiedenen Nutzerpräferenzen aussieht und funktioniert, ohne Ihre Systemeinstellungen zu ändern.

Gestaltung und Entwicklung einer Website ohne Umschalter

Falls eine Website ausschließlich auf prefers-color-scheme setzt und keinen manuellen Umschalter anbietet, sollten folgende Punkte beachtet werden:

  • Guter Kontrast: Der Dunkelmodus sollte nicht auf reines Schwarz (#000000) und reines Weiß (#FFFFFF)setzen. Stattdessen sind sanftere Farbtöne wie #121212 und #F5F5F5 für bessere Lesbarkeit zu bevorzugen.
  • Tests auf verschiedenen Geräten: Einige Nutzer haben Systemeinstellungen, die nicht ihren tatsächlichen Vorlieben entsprechen. Daher sollte das Design in beiden Modi getestet werden. Nutzen Sie zum Beispiel Enable automatic dark mode in Chrome DevTools, um das Verhalten des Dunkelmodus zu überprüfen.
  • Vermeidung von Farbkonflikten: Bestimmte Markenfarben könnten im Dunkelmodus schwer lesbar sein. Achten Sie darauf, dass alle Elemente gut sichtbar bleiben.
  • Anpassung von Bildern: Manche Bilder können im Dunkelmodus unpassend wirken. Nutzen Sie filter: invert(1) oder stellen Sie alternative Bilder für die jeweiligen Modi bereit.

Fazit

Der Hell- und Dunkelmodus verbessern die Benutzererfahrung, Barrierefreiheit und Energieeffizienz. Während manuelle Umschalter weiterhin verbreitet sind, ermöglichen moderne CSS- und Systemlevel-Einstellungen eine automatische Anpassung. Egal ob mit oder ohne Umschalter – eine durchdachte Gestaltung sorgt dafür, dass die Website in beiden Modi gut aussieht und leicht bedienbar bleibt.

Dieser Post wurde ursprünglich veröffentlicht auf Fronta11y für GAAD (Global Accessibility Awareness Day) 2025.

Originaler Artikel auf Fronta11y.