Gutes Dark-Mode-Design ist weit mehr als das Umkehren der Farben eines hellen Themes. Den Hintergrund schwarz und den Text weiß zu machen scheint auf den ersten Blick zu funktionieren, doch in der Praxis erzeugt reines Weiß auf reinem Schwarz ein ermüdendes Leuchten (Halation), Schatten verschwinden und die Markenfarben wirken grell. Ein dunkles Theme ist ein eigenständiges Designsystem, das mit eigener Logik, eigener Graupalette und eigenen Kontrastregeln neu gedacht werden muss. In diesem Beitrag erläutere ich die richtigen Grautöne, lesbare Kontrastwerte und Farbentscheidungen, die die Augen schonen, mit praktischen Beispielen.
Warum reines Schwarz (#000000) ein schlechter Ausgangspunkt ist
Der erste Reflex der meisten Leute ist, den Hintergrund auf #000000 zu setzen, doch das verursacht mehrere Probleme. Reinweißer Text auf reinem Schwarz erzeugt extremen Kontrast; besonders auf OLED-Bildschirmen verschwimmen die Kanten heller Buchstaben und das Auge ermüdet beim langen Lesen. Auf einer reinschwarzen Fläche wird zudem ein Schlagschatten unsichtbar, sodass du eines der stärksten Werkzeuge verlierst, um Ebenen (Karten, Modale, Menüs) voneinander zu trennen.
Verwende stattdessen ein sehr dunkles Grau. Googles Material-Design-Richtlinien empfehlen seit Jahren etwa #121212 als Basisflächenfarbe, weil du auf diesem Ton halbtransparente weiße Ebenen stapeln kannst, um ein Gefühl von Elevation zu erzeugen. Eine praktische Startpalette könnte so aussehen:
--bg: #121212; /* unterste Fläche */
--surface-1: #1e1e1e; /* Karten */
--surface-2: #242424; /* erhöhte Karten, Menüs */
--surface-3: #2c2c2c; /* Modale, Popovers */
--text: #e6e6e6; /* Haupttext (kein reines Weiß) */
--text-dim: #a0a0a0; /* Sekundärtext */Beachte, wie die Flächenfarbe heller wird, je höher die Ebene steigt. In einem dunklen Theme wirken höhere Flächen heller, weil das Licht von oben kommt; das ahmt die Lichtlogik der realen Welt nach und lässt die Oberfläche natürlich wirken.
Gedämpftes Weiß statt reinem Weiß für Text
Mach den Fließtext nicht #ffffff. Auf einer dunklen Fläche erzeugt reines Weiß einen Flimmereffekt um die Buchstaben. Verwende stattdessen Weiß mit 85–90 % Deckkraft oder einen Ton um #e6e6e6. Die Material-Richtlinien staffeln die Textdeckkraft so:
- Hohe Betonung (Fließtext): 87 % von Weiß
- Mittlere Betonung (Sekundärtext, Labels): 60 % von Weiß
- Deaktiviert (inaktive Elemente): 38 % von Weiß
In CSS ist es vorhersehbarer, dies als direkte Farbe statt als Deckkraft zu schreiben, denn wenn du Weiß mit rgba transparent machst, verändert die darunterliegende Flächenfarbe das Ergebnis. Du kannst beides nutzen, aber bleib innerhalb eines Projekts konsequent.
Kontrastwert: die WCAG-Grenzen einhalten
Der häufigste Fehler im Dark-Mode-Design ist, den Kontrast der Ästhetik zuliebe zu senken. Verblasster grauer Text auf dunkler Fläche mag „elegant“ wirken, ist aber unlesbar. Der Barrierefreiheitsstandard WCAG 2.1 setzt klare Schwellen:
- Normaler Text: mindestens ein Kontrastwert von 4,5:1
- Großer Text (über 18pt / 24px oder 14pt fett): mindestens 3:1
- UI-Komponenten (Buttonränder, Icons, Umrisse von Formularfeldern): mindestens 3:1
Ein Beispiel: Auf einem #121212-Hintergrund hat Text in #e6e6e6 einen Kontrastwert von etwa 13:1, mehr als ausreichend. Verwendest du jedoch #757575 für Sekundärtext, sinkt das Verhältnis auf rund 4,6:1, gerade noch bestanden. Wählst du #5a5a5a, fällt es unter 3:1 und ist für normalen Text unbrauchbar. Prüfe jedes Farbpaar mit dem Kontrastprüfer in den Entwicklertools des Browsers oder einem Tool wie dem WebAIM Contrast Checker.
Kräftige Farben entsättigen
Kräftige, gesättigte Farben, die in einem hellen Theme großartig aussehen (leuchtendes Blau, Rot, Grün), „schweben“ und flimmern vor einer dunklen Fläche. Das liegt am großen Leuchtdichteunterschied zwischen hoher Sättigung und dunklem Hintergrund, der das Auge belastet. Die Lösung: Senke die Sättigung und erhöhe die Helligkeit für den Dark Mode leicht. Mit anderen Worten, verwende eher pastellige, „staubigere“ Töne.
/* Akzentfarbe im hellen Theme */
--accent-light: #0066ff; /* leuchtendes Blau */
/* Gedämpfte Version für den Dark Mode */
--accent-dark: #5b9aff; /* heller, weniger gesättigt */Dieselbe Regel gilt für Markenfarben. Ist deine primäre Markenfarbe sehr dunkel (etwa ein Marineblau), verschmilzt sie mit der Fläche und wird im Dark Mode unlesbar; dann musst du für die Barrierefreiheit eine hellere Variante ableiten. Farb-Tokens themenbasiert zu halten (ein heller und ein dunkler Wert pro Farbe) macht das beherrschbar.
Elevation, Schatten und Ränder
In einem hellen Theme trennst du Ebenen mit Schatten. In einem dunklen Theme funktionieren Schatten schlecht, weil der Hintergrund bereits dunkel ist. Kombiniere stattdessen zwei Techniken: eine hellere Flächenfarbe (die Ebenenskala oben) und einen dezenten Rand. Ein weißer Rand mit sehr geringer Deckkraft trennt eine Karte elegant von der Fläche:
.card {
background: var(--surface-1);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}Lass Schatten nicht völlig weg; mach sie nur weicher und diffuser, sodass sie Tiefe statt Härte andeuten. In einem dunklen Theme geht es nicht um einen dramatischen Schatten, sondern um eine sanfte Trennung.
Bilder und der Theme-Übergang
Fotos und Illustrationen können auf dunkler Fläche zu hell bleiben; eine ganz leichte Abdunklung (filter: brightness(0.9)) oder ein dünner Rand an Inhaltsbildern verbessert den Sehkomfort. Transparente PNG-Logos, vor allem dunkle, verschwinden im Dark Mode, also bereite eine helle Variante deines Logos vor.
Behandle schließlich den Übergang zwischen Themes. Merke dir die Wahl des Nutzers (etwa in localStorage) und lies die Systemeinstellung mit prefers-color-scheme als Anfangswert. Damit der Übergang nicht „aufblitzt“, wende die Theme-Klasse an, bevor die Seite zum ersten Mal rendert, idealerweise mit einem kleinen Skript im <head>.
Häufige Fragen
Ermüdet der Dark Mode die Augen wirklich weniger?
Das hängt vom Kontext ab. In einer dunklen Umgebung ist ein dunkles Theme augenfreundlicher, weil die Gesamthelligkeit des Bildschirms sinkt. In einer hellen Umgebung kann ein dunkles Theme jedoch die Pupille weiten und die Kanten von Text unschärfer erscheinen lassen. Am besten gibst du Nutzern die Wahl und respektierst ihre Systemeinstellung.
Brauche ich eine eigene Farbpalette für den Dark Mode?
Ja, zumindest für Akzent- und Textfarben. Die Farben des hellen Themes unverändert zu übernehmen, schafft Kontrast- und Sättigungsprobleme. Farb-Tokens mit eigenen Werten je Theme zu definieren ist der nachhaltigste Ansatz.
Soll ich für OLED-Bildschirme reines Schwarz verwenden?
Zur Akkuschonung schaltet reines Schwarz tatsächlich Pixel ab, das stimmt. Doch die gesamte Oberfläche auf #000000 zu setzen, zerstört Lesbarkeit und Ebenentrennung. Ein ausgewogener Ansatz: Halte die Hauptfläche sehr dunkel wie #121212 und nutze echtes Schwarz nur dort, wo du es gezielt möchtest.
Möchtest du eine Oberfläche, die für deine Marke im hellen wie im dunklen Theme einwandfrei funktioniert? Ich helfe dir bei barrierefreiem Kontrast, einem konsistenten Farbsystem und einem augenfreundlichen Dark Mode. Nimm Kontakt auf und lass uns über dein Projekt sprechen.