Farbkontraste prüfen: WCAG 2.1 AA Anforderungen einfach erklärt

Unzureichende Farbkontraste gehören zu den häufigsten Barrierefreiheitsproblemen auf Websites. Nach einer Analyse von WebAIM (2025) haben über 80% aller getesteten Websites mindestens einen Kontrastfehler. Das ist nicht nur ein technisches Detail — es betrifft Millionen von Menschen, die Inhalte nicht lesen können, weil Text und Hintergrund sich farblich zu wenig unterscheiden.

In diesem Artikel erklären wir, welche Kontrastverhältnisse die WCAG 2.1 auf Level AA vorschreibt, wie du Kontraste prüfst und welche typischen Fehler du vermeiden solltest.

Warum Farbkontraste wichtig sind

Rund 1,8 Millionen Menschen in Deutschland sind sehbehindert, über 350.000 sind blind. Dazu kommen Millionen mit Farbfehlsichtigkeit (ca. 8% aller Männer). Aber auch Menschen ohne diagnostizierte Sehbehinderung profitieren von guten Kontrasten: bei Sonnenlicht auf dem Smartphone-Display, bei Müdigkeit oder schlicht bei alternden Augen.

Seit dem Barrierefreiheitsstärkungsgesetz (BFSG) ist die Einhaltung der WCAG 2.1 AA für viele B2C-Websites gesetzliche Pflicht. Farbkontraste sind dabei einer der Prüfpunkte, die automatisiert getestet werden können — und damit auch einer der Punkte, bei denen Verstöße leicht nachweisbar sind.

Die WCAG-Kontrastanforderungen

Normaler Text: 4.5:1

Für normalen Text (unter 18pt oder unter 14pt fett) verlangt WCAG 2.1 AA ein Kontrastverhältnis von mindestens 4.5:1 zwischen Textfarbe und Hintergrundfarbe.

Was bedeutet das Verhältnis? Das Kontrastverhältnis wird aus der relativen Luminanz (Helligkeit) der beiden Farben berechnet. Schwarz auf Weiß hat ein Verhältnis von 21:1 (Maximum), Weiß auf Weiß hat 1:1 (kein Kontrast). Ein Verhältnis von 4.5:1 ist der Mindeststandard für Lesbarkeit.

Großer Text: 3:1

Für großen Text gelten geringere Anforderungen: Ein Kontrastverhältnis von 3:1 reicht aus. Als “großer Text” gilt:

18pt (24px) oder größer in normaler Stärke
14pt (18.66px) oder größer in Fettschrift (font-weight >= 700)

Der Grund: Größere Buchstaben sind auch bei geringerem Kontrast noch lesbar, weil die Zeichenformen besser erkennbar sind.

Grafische Elemente und UI-Komponenten: 3:1

Seit WCAG 2.1 gilt das Kriterium 1.4.11 (Non-text Contrast): Auch grafische Elemente und interaktive UI-Komponenten müssen ein Kontrastverhältnis von 3:1 zu angrenzenden Farben haben. Das betrifft:

Rahmen von Eingabefeldern
Icons, die Informationen vermitteln
Fokus-Indikatoren
Buttons (Hintergrundfarbe zum umgebenden Bereich)
Diagramme und Grafiken

Kontrastverhältnisse berechnen

Die Formel für das Kontrastverhältnis basiert auf der relativen Luminanz der beiden Farben:

Kontrastverhältnis = (L1 + 0.05) / (L2 + 0.05)

Dabei ist L1 die hellere und L2 die dunklere relative Luminanz. Du musst das aber nicht von Hand berechnen — dafür gibt es Tools.

Tools zum Prüfen von Kontrasten

Browser DevTools

Alle modernen Browser zeigen das Kontrastverhältnis direkt in den Entwicklertools an:

Rechtsklick auf ein Textelement, “Untersuchen” wählen
In den Styles die Textfarbe (color) anklicken
Der Browser zeigt das Kontrastverhältnis zum Hintergrund an
Ein Häkchen oder Kreuz zeigt, ob AA/AAA bestanden wird

Standalone-Tools

WebAIM Contrast Checker (webaim.org/resources/contrastchecker): Zwei Farben eingeben, sofort Ergebnis
Colour Contrast Analyser (CCA): Desktop-App von TPGi, kann Farben direkt vom Bildschirm aufnehmen
Stark (Figma-Plugin): Kontrastprüfung direkt im Design-Tool

Automatisierte Website-Scanner

Tools wie axe-core (die Grundlage des Compliso Scanners) prüfen alle Textelemente einer Seite automatisch auf ausreichende Kontraste. Das ist die effizienteste Methode, um Kontrastfehler auf einer gesamten Website zu finden.

Die 5 häufigsten Kontrastfehler

1. Hellgrauer Text auf weißem Hintergrund

Der Klassiker: Dezenter, hellgrauer Text (#999999) auf weißem Hintergrund (#FFFFFF) hat ein Kontrastverhältnis von nur 2.85:1 — deutlich unter dem Minimum von 4.5:1. Besonders häufig bei:

Platzhaltertexten in Formularen
Fußzeilen und Copyright-Hinweisen
Datumsangaben und Meta-Informationen

Fix: Verwende mindestens #767676 auf Weiß (exakt 4.54:1) oder besser #595959 (7.0:1).

2. Farbiger Text auf farbigem Hintergrund

Markenfarben als Textfarbe auf einem farbigen Hintergrund sind oft problematisch. Ein orangefarbener Button (#FF6600) mit weißem Text hat ein Kontrastverhältnis von nur 3.0:1. Blauer Text (#4A90D9) auf hellblauem Hintergrund (#E8F0FE) kommt auf 3.2:1.

Fix: Prüfe jede Farbkombination mit einem Contrast Checker. Oft reicht es, den Farbton etwas dunkler oder den Hintergrund etwas heller zu machen.

3. Overlay-Text auf Bildern

Text auf Bildern (Hero-Banner, Karten mit Hintergrundbild) hat ein grundsätzliches Problem: Der Kontrast hängt vom darunterliegenden Bildbereich ab und kann von Stelle zu Stelle variieren.

Fix: Verwende ein halbtransparentes Overlay (background: rgba(0,0,0,0.6)) zwischen Bild und Text, oder platziere den Text in einem eigenen Container mit festem Hintergrund.

4. Deaktivierte Elemente ohne ausreichenden Kontrast

Deaktivierte Buttons und Formularfelder werden oft so stark abgeblendet, dass sie kaum noch lesbar sind. WCAG macht hier zwar eine Ausnahme (deaktivierte Elemente sind von 1.4.3 ausgenommen), aber aus UX-Sicht sollten auch deaktivierte Elemente lesbar sein.

5. Fokus-Indikatoren ignoriert

Wenn ein Element per Tastatur fokussiert wird, muss der Fokus-Indikator (oft ein Outline) ein Kontrastverhältnis von 3:1 zum Hintergrund haben. Viele Websites entfernen den Standard-Fokus per outline: none und ersetzen ihn nicht — das ist sowohl ein Kontrast- als auch ein Barrierefreiheitsproblem.

Fix: Entferne niemals outline: none ohne einen gleichwertigen Ersatz. Verwende outline: 2px solid #005FCC oder einen ähnlichen gut sichtbaren Fokus-Indikator.

Checkliste: Farbkontraste prüfen

Kontraste automatisch prüfen mit Compliso

Der Compliso Scanner prüft deine gesamte Website automatisch auf Kontrastfehler nach WCAG 2.1 AA. Die Prüfung basiert auf axe-core und erkennt:

Text mit unzureichendem Kontrast zum Hintergrund
UI-Elemente mit zu geringem Kontrast
Fehlende oder unsichtbare Fokus-Indikatoren

Du erhältst für jedes Problem die betroffenen Elemente, die aktuellen Farbwerte, das berechnete Kontrastverhältnis und einen konkreten Verbesserungsvorschlag.

Erfahre mehr über die Barrierefreiheitsprüfung von Compliso oder scanne deine Website jetzt kostenlos und finde heraus, ob deine Farbkontraste den WCAG-Anforderungen entsprechen.