Farbkontrast & WCAG: Leitfaden für barrierefreies Design

So elegant eine Oberfläche auch aussehen mag: Wenn ihr Text nicht lesbar ist, erfüllt das Design seine Aufgabe nicht. Die Regeln zum Farbkontrast WCAG machen genau dieses Anliegen messbar: Sie übersetzen den Helligkeitsunterschied zwischen Text und Hintergrund in ein numerisches Verhältnis und sichern die Lesbarkeit für Menschen mit Sehschwäche, altersbedingtem Sehverlust oder für jeden, der bei greller Sonne auf einen Bildschirm blinzelt. In diesem Artikel erkläre ich, was ein Kontrastverhältnis wirklich ist, welche Schwellen verpflichtend sind und wie du sie in deiner täglichen Designarbeit praktisch anwendest.

Was ist ein Kontrastverhältnis genau?

Ein Kontrastverhältnis ist die Beziehung zwischen der relativen Leuchtdichte (relative luminance) zweier Farben. WCAG definiert es mit dieser Formel:

Kontrast = (L1 + 0.05) / (L2 + 0.05)

Dabei ist L1 die relative Leuchtdichte der helleren Farbe und L2 die der dunkleren. Die Leuchtdichte reicht von 0 (reines Schwarz) bis 1 (reines Weiß). Das Ergebnis liegt zwischen 1:1 (kein Unterschied) und 21:1 (Schwarz auf Weiß, das höchstmögliche). Entscheidend: Dieses Verhältnis beruht auf Helligkeit, nicht auf Farbton; ein Rot und ein Grün gleicher Leuchtdichte mögen auffällig wirken, aber ein schlechtes Kontrastverhältnis haben.

Die WCAG-Schwellen: 4.5:1 und 3:1

WCAG (Web Content Accessibility Guidelines) kennt zwei Konformitätsstufen, und die meisten rechtlichen und unternehmerischen Anforderungen zielen auf AA:

• Normaler Text — AA: mindestens 4.5:1 (Kriterium 1.4.3).
• Großer Text — AA: mindestens 3:1. "Groß" bedeutet mindestens 18pt (≈24px) oder fett 14pt (≈18.66px).
• Normaler Text — AAA: mindestens 7:1 (Kriterium 1.4.6).
• Großer Text — AAA: mindestens 4.5:1.

Die Logik: Je größer und fetter die Schrift, desto breiter die Buchstabenstämme, sodass sie auch bei geringerem Kontrast lesbar bleibt. Das gibt dir bei Überschriften etwas mehr Spielraum, doch im Fließtext solltest du nie unter 4.5:1 fallen.

Nicht nur Text: UI-Elemente und Grafiken

Ein Punkt, den viele Designer übersehen: Kontrast betrifft nicht nur Text. Das mit WCAG 2.1 eingeführte Kriterium 1.4.11 Kontrast von Nicht-Text-Inhalten umfasst auch die interaktiven und informationstragenden Teile einer Oberfläche:

• Button-Ränder, Umrandungen von Formularfeldern, Fokusringe;
• die Grenzen von Steuerelementen wie Kontrollkästchen und Optionsfeldern;
• Linien, Icons und Kartenfarben, die in einer Grafik Bedeutung tragen.

All das muss gegenüber seinen Nachbarfarben mindestens 3:1 Kontrast halten. Setzt du also einen etwas helleren grauen Feldrand auf einen hellgrauen Hintergrund, verletzt du dieses Kriterium höchstwahrscheinlich. Fokusindikatoren sind besonders kritisch: Ein Tastaturnutzer erkennt nur an einem sichtbaren Fokusring, wo er sich gerade befindet.

Farben in der Praxis wählen

Ein paar Gewohnheiten erleichtern den Aufbau einer barrierefreien Palette enorm:

• Beginne mit der Helligkeit, nicht mit dem Farbton. Behalte den Markenton bei, passe aber bei Bedarf die Helligkeit an. Den L-Wert in HSL oder besser in OKLCH zu verändern, ist der sauberste Weg, den Kontrast zu erhöhen.
• Codiere Bedeutung nie allein über Farbe. "Grün = Erfolg, Rot = Fehler" reicht für sich genommen nicht; ergänze ein Icon, ein Label oder ein Muster für farbenblinde Nutzer. Das ist der Kern von Kriterium 1.4.1 (Benutzung von Farbe).
• Teste beide Enden. Eine Farbe, die im hellen Modus besteht, sitzt im dunklen Modus auf einem anderen Hintergrund. Miss in beiden Themes.
• Verlasse dich nicht auf Platzhaltertext. Blasse graue Platzhalter liegen fast immer unter 4.5:1; nutze sie nie als Ersatz für ein dauerhaftes Label.

Auf der CSS-Seite schont es die Augen und hält genug Kontrast, dem Dark-Mode-Text einen leicht abgemilderten Ton statt reinem #000 (oder reinem Weiß) zu geben:

:root {
  --text: #1a1a1a;      /* helles Theme, ~16:1 auf Weiß */
  --text-muted: #555;   /* weiterhin über 4.5:1 */
}
[data-theme="dark"] {
  --text: #e8e8e8;      /* ~13:1 auf Dunkel */
  --text-muted: #a0a0a0;
}

Wie misst und testest du Kontrast?

Schätzen mit bloßem Auge ist unzuverlässig; prüfe immer mit einem Werkzeug:

• WebAIM Contrast Checker — gib zwei Hex-Werte ein und sieh sofort das AA/AAA-Urteil.
• Chrome/Edge DevTools — wähle ein Textelement und öffne den Color Picker, um Kontrastverhältnis und AA/AAA-Linien direkt abzulesen.
• Lighthouse und axe DevTools — scannen die ganze Seite und listen Kontrastfehler auf; sie lassen sich sogar in deine CI-Pipeline einbinden.
• Figma-Plugins (etwa Contrast oder Stark) — messen direkt auf dem Artboard, während du noch entwirfst.

Der ideale Ablauf: Verifiziere die Palette während des Designs in Figma, ergänze im Code eine automatisierte Prüfung mit axe oder Lighthouse, damit eine Regression vor dem Release auffällt.

Häufige Fragen

Muss ich 4.5:1 überall erreichen?

Für Fließtext und kleine Schrift ja, das ist Pflicht, wenn du AA-Konformität willst. Es gibt Ausnahmen: rein dekorativer Text (ohne Bedeutung), Logos und deaktivierte UI-Elemente sind von der Kontrastanforderung ausgenommen. Bei großen Überschriften sinkt die Schwelle auf 3:1.

Löst der Dark Mode den Kontrast automatisch?

Nein. Reinweißer Text auf dunklem Hintergrund kann einen "Halo"-Effekt erzeugen, der das Lesen erschwert, während blasser grauer Text leicht unter 4.5:1 fällt. Der Dark Mode muss genauso sorgfältig gemessen werden wie der Light Mode.

Haben sich die Kontrastregeln zwischen den WCAG-Versionen geändert?

Die zentralen Kontrastschwellen (4.5:1, 3:1, 7:1) sind seit WCAG 2.0 unverändert. WCAG 2.1 ergänzte den Nicht-Text-Kontrast (1.4.11); 2.2 stärkte die Kriterien zur Fokussichtbarkeit. Die Schwellen sind also fix, der Geltungsbereich wurde erweitert.

Möchtest du eine Oberfläche, die zugleich scharf und für alle lesbar ist? Ich helfe dir, eine WCAG-konforme Palette und ein Designsystem aufzubauen, ohne deine Markenfarben zu zerstören. Kontaktiere mich, und lass uns dein Projekt gemeinsam ansehen.