Dark-Mode-Design: Hintergründe, Farbe und Kontrast

Dark-Mode-Design heißt, einen eigenen Satz von Werten für Flächen, Text, Akzente und Bilder zu bauen, statt die Farben des Light Mode umzudrehen. Dunkler Grund verändert, wie sich Farbe verhält: Gesättigte Töne wirken schwerer, Schatten verschwinden, helle weiße Schrift blendet, und sanfte Farbverläufe zeigen Banding. Die gute Nachricht: Dieselben Eigenschaften machen dunkle Themes schön, wenn man richtig mit ihnen umgeht. Farbe leuchtet, Tiefe wirkt geschichtet, und der Inhalt steht ruhig davor.

Warum du reine schwarze Hintergründe vermeiden solltest

Reines Schwarz, #000000, mit reinem weißem Text ergibt mit 21:1 den größtmöglichen Kontrast. Das klingt ideal, ist aber oft unangenehm: Viele Leserinnen und Leser sehen hellen Text auf reinem Schwarz ausstrahlen oder flimmern, besonders bei langen Passagen. Schwarz lässt zudem nichts Dunkleres mehr zu, sodass du nicht zeigen kannst, dass eine Fläche unter einer anderen liegt. Und auf manchen OLED-Handys kann Inhalt, der über echtes Schwarz scrollt, kurz nachziehen, wenn Pixel sich einschalten. Googles Material-Design-Richtlinien nutzen aus diesen Gründen #121212 als dunkle Grundfläche.

Erhöhung durch Helligkeit zeigen

Im Light Mode trennen Schatten eine Karte von der Seite. Auf dunklem Hintergrund sieht man einen dunklen Schatten kaum. Dunkle Themes drehen deshalb die Logik um: Je näher eine Fläche am Betrachter liegt, desto heller ist sie. Die Seite ist am dunkelsten, Karten sind eine Stufe heller, Menüs und Dialoge noch heller. Halte die Stufen klein und einheitlich und füge eine haarfeine Linie in etwas hellerem Ton hinzu, wo zwei ähnliche Flächen aufeinandertreffen.

Textfarbe und Kontrast im Dark Mode

Nutze für Fließtext ein gebrochenes Weiß wie #e6e8ec statt reinem Weiß. Es liefert immer noch sehr hohen Kontrast, 15:1 auf #121417, und blendet weniger. Nebentext kann auf ein mittleres Grau sinken, aber prüfe es: #9aa1ad bleibt auf derselben Fläche bei 7,1:1 und auf einer helleren Karte bei 5,5:1. WCAG verlangt für normalen Text mindestens 4,5:1, unabhängig vom Theme. Farbkontrast erklärt, wie du ihn prüfst.

Akzentfarben entsättigen

Ein kräftiges Violett wie #7c3aed funktioniert als Button auf Weiß. Auf einer dunklen Fläche wirkt es schwer und erreicht nur 3,2:1, zu wenig für Textlinks. Sein hellerer Ton #a78bfa erreicht auf demselben Hintergrund 6,8:1 und liest sich als dieselbe Markenfarbe. Die allgemeine Regel: Für dunkle Themes Akzente heller und etwas weniger gesättigt wählen, den Farbton aber behalten.

Farbverläufe im Dark-Mode-Design

Auf dunklem Grund kommen Farbverläufe zur Geltung. Ein tiefer Hintergrund lässt Farbe wie Licht wirken statt wie Farbauftrag, weshalb Glows, Auroras und Neon-Übergänge so oft auf Fast-Schwarz gezeigt werden. Halte den Großteil der Fläche dunkel und lass Farbe an ein bis zwei Stellen erscheinen: ein Glow hinter einem Hero, ein Verlaufsrand an einer hervorgehobenen Karte, ein weicher Schleier oben auf der Seite.

Der Haken ist Banding. Dunkle, langsame Übergänge nutzen auf einem 8-Bit-Bildschirm nur wenige verschiedene Töne, also werden Stufen sichtbar. Eine feine Körnungsschicht verbirgt sie, siehe Banding im Farbverlauf und, fürs Web, CSS-Rauschtextur. Für Hintergründe, die ganz im Dunkeln entstehen, hat dunkle Farbverlauf-Hintergründe Paletten.

Dark Mode in CSS bauen

Definiere Farben einmal als benutzerdefinierte Eigenschaften und wechsle ihre Werte pro Theme. color-scheme sagt dem Browser, seine eigenen Steuerelemente und Scrollleisten im passenden Theme zu zeichnen, und die Funktion light-dark() wählt anhand des aktiven Schemas zwischen zwei Werten.

:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #121417);
  --card: light-dark(#f6f7f9, #22262c);
  --text: light-dark(#16181d, #e6e8ec);
  --text-muted: light-dark(#5b6270, #9aa1ad);
  --accent: light-dark(#7c3aed, #a78bfa);
}

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

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);
  }
}

Gib Menschen einen manuellen Schalter zusätzlich zur Systemeinstellung und denk an alles jenseits der Oberfläche: Diagramme, Illustrationen, Logos und E-Mails müssen in beiden Themes geprüft werden. Farbverläufe in E-Mails zeigt, wie Mail-Apps mit Dark Mode umgehen.

Eine Checkliste für den Dark Mode

• Dunkelgraue Flächen statt reinem Schwarz, mit einer klaren Helligkeitsstufe pro Ebene.
• Gebrochen weißer Fließtext mit hohem Kontrast, Nebentext weiterhin über 4,5:1.
• Akzente heller und weicher, mit beibehaltenem Markenfarbton.
• Ränder statt Schatten, um ähnliche Flächen zu trennen.
• Farbe als Licht an wenigen Stellen, nicht überall.
• Körnung auf großen dunklen Farbverläufen gegen Banding.
• Logos mit einer hellen Version für dunklen Grund, siehe Logo auf einem Farbverlauf-Hintergrund.
• Beide Themes auf einem echten Handy geprüft, in einem abgedunkelten Raum und bei Tageslicht.