Design-Grundlagen

Kontrast und Lesbarkeit zwischen den Themes

Verstehen Sie WCAG-Standards und wie Sie sicherstellen, dass Text auf jedem Hintergrund ausreichend Kontrast hat. Praktische Richtlinien für Dark Mode und Light Mode.

8 Min Lesezeit Mittelstufe März 2026

Kontrastprüfung auf zwei verschiedenen Hintergründen mit WCAG-Standards-Messung

Warum Kontrast so wichtig ist

Guter Kontrast ist nicht nur eine Design-Vorliebe — es’s eine Zugänglichkeitsfrage. Wenn Sie Dark Mode und Light Mode anbieten, müssen Sie beide Varianten überprüfen. Die meisten Designer vergessen das.

Das Problem: Farben, die im Light Mode perfekt funktionieren, können im Dark Mode unsichtbar werden. Und umgekehrt. Sie brauchen eine Strategie, die beide Szenarien abdeckt. Hier’s, wie Sie das machen.

Vergleich zwischen Dark Mode und Light Mode Textlesbarkeit auf Bildschirm

WCAG 2.1 Kontrastanforderungen

Die Web Content Accessibility Guidelines (WCAG) definieren klare Zahlen. Für normalen Text brauchen Sie mindestens ein Kontrastverhältnis von 4,5:1. Das klingt mathematisch, ist aber wichtig für Menschen mit Sehbehinderungen.

AA-Stufe (Standard): 4,5:1 für normalen Text, 3:1 für großen Text (18pt+)

AAA-Stufe (Erweitert): 7:1 für normalen Text, 4,5:1 für großen Text

Wir empfehlen mindestens AA-Stufe. Das ist der Standard, den auch Behörden verwenden. Wenn Sie AAA erreichen können — noch besser. Aber AA ist realistische Basis.

Designer prüft Farben mit Contrast Checker Tool am Computer

So überprüfen Sie Ihren Kontrast

Es gibt Tools, die das einfach machen. WebAIM Contrast Checker ist kostenlos und funktioniert online. Sie geben Ihre Vordergrund- und Hintergrundfarbe ein und bekommen sofort das Ergebnis.

Aber hier’s der Trick: Sie müssen BEIDE Themes überprüfen. Light Mode und Dark Mode separat. Viele Farbkombinationen funktionieren in einer Richtung, aber nicht in der anderen. Deshalb brauchst du ein System, nicht nur einzelne Farben.

Basis-Farben definieren

Entscheiden Sie, welche Farben in Ihrem Light und Dark Mode verwendet werden. Weiß und Dunkelgrau als Basis.

Kontrast messen

Jede Textkombination testen. Headline auf Hintergrund. Normaler Text auf Hintergrund. In beiden Themes.

Anpassen und erneut testen

Farben sind zu hell oder zu dunkel? Anpassungen vornehmen und nochmal überprüfen. Das ist iterativ.

Strategien für beide Themes

Diese Ansätze funktionieren zuverlässig — ob jemand Dark Mode oder Light Mode verwendet.

Extreme Farben nutzen

Verwenden Sie sehr helle und sehr dunkle Farben. Weiß (#ffffff) auf dunklem Hintergrund. Dunkelgrau oder Schwarz (#0f172a) auf hellem Hintergrund. Das funktioniert immer.

Sättigung erhöhen

Im Dark Mode können manche Farben zu gedimmt wirken. Erhöhen Sie die Sättigung. Das macht den Text prägnanter und verbessert den Kontrast automatisch.

Graustufen testen

Viele Menschen haben Farbsehschwächen. Konvertieren Sie Ihren Screenshot in Graustufen. Wenn der Text dann noch sichtbar ist, haben Sie guten Kontrast.

CSS-Variablen verwenden

Mit CSS Custom Properties können Sie Farben leicht umschalten. Eine Variable für Light Mode, eine für Dark Mode. Weniger Fehler, mehr Konsistenz.

Häufige Fehler und wie Sie sie vermeiden

Wir’ve gesehen es hunderte Male. Designer testen den Light Mode perfekt, vergessen aber den Dark Mode komplett. Oder sie verwenden Farben, die auf Papier toll aussehen, aber auf Bildschirmen schlecht funktionieren.

Fehler 1: Mittlere Grautöne

Grau auf Grau ist fast immer schlecht. Wenn Sie im Dark Mode dunkles Grau auf dunkelgrau verwenden — unsichtbar. Verwenden Sie stattdessen Weiß oder sehr helles Grau für Text.

Fehler 2: Desaturierte Farben im Dark Mode

Pastelle sehen elegant aus, aber im Dark Mode sind sie oft zu dunkel. Verwenden Sie kräftigere Farben oder wechseln Sie zu Weiß/Hellgrau für besseren Kontrast.

Fehler 3: Keine Unterscheidung zwischen Themes

Ein Farbsystem, das in beiden Themes funktioniert, ist selten. Meist brauchen Sie unterschiedliche Farbtöne für Light und Dark Mode. Das ist nicht fehlgeschlagen — das ist Absicht.

Split-Screen zeigt schlechte Kontrast-Beispiele neben guten Kontrast-Beispielen

Tools und Ressourcen

Sie müssen nicht alles manuell berechnen. Diese Tools machen es einfach.

WebAIM Contrast Checker

Kostenlos, einfach, zuverlässig. Sie geben zwei Farben ein und erhalten sofort das Kontrasterhältnis. Auch als Browser-Extension verfügbar.

Stark Contrast Checker

Speziell für Designer. Zeigt nicht nur das Verhältnis, sondern auch wie die Farben für Menschen mit verschiedenen Arten von Farbblindheit aussehen.

Chrome DevTools Accessibility Tab

Eingebaut in Ihrem Browser. Öffnen Sie DevTools, wählen Sie ein Element und sehen Sie sofort das Kontrasterhältnis und die WCAG-Bewertung.

Color Contrast Analyzer von PACIELLO

Desktop-Anwendung für Windows und Mac. Sie können direkt vom Bildschirm Farben aufgreifen und testen. Professionelle Lösung.

Zufriedener Designer überprüft perfekten Text-Kontrast auf Monitor in Dark Mode

Das Wichtigste zum Merken

Kontrast isn’t Nitpicking. Es geht um Barrierefreiheit. Menschen mit Sehbehinderungen, ältere Menschen, sogar Menschen auf sonnigen Terrassen — sie alle profitieren von gutem Kontrast.

Testen Sie BEIDE Themes. Light Mode und Dark Mode. Das ist nicht doppelte Arbeit — das ist professionelles Design. Sie werden feststellen, dass Ihre Benutzer es bemerken. Sie werden es nicht ausdrücklich sagen, aber sie werden es spüren.

“Guter Kontrast ist wie eine unsichtbare Hilfe. Niemand sagt ‘wow, der Kontrast ist großartig’. Aber wenn er fehlt, bemerken es alle sofort.”

Fangen Sie heute an. Überprüfen Sie Ihre aktuelle Website. Wenn Sie Dark Mode haben — ist der Text überall lesbar? Wenn nicht — Sie wissen jetzt, wie Sie es beheben.

Hinweis zum Informationszweck

Dieser Artikel dient zu Bildungszwecken und soll ein grundlegendes Verständnis von WCAG-Kontraststandards vermitteln. Die hier beschriebenen Richtlinien basieren auf den offiziellen WCAG 2.1 Standards, sind aber keine rechtliche oder professionelle Beratung. Kontrastanforderungen können je nach Region und Branche variieren. Für kritische Anwendungen (wie Gesundheitswesen oder Finanzwesen) sollten Sie mit Barrierefreiheits-Spezialisten konsultieren. Die Tools und Standards können sich ändern — überprüfen Sie immer die aktuellen W3C-Richtlinien.