Kontrastverhältnis – Definition, WCAG-Werte und Prüfung für barrierefreie Websites
Das Kontrastverhältnis beschreibt den messbaren Helligkeitsunterschied zwischen zwei Farben – in der Regel zwischen Inhalten wie Text und dem jeweiligen Hintergrund. Je höher der Wert, desto größer der Kontrast und desto leichter ist der Inhalt auf dem Bildschirm erkennbar. Für Barrierefreiheit ist das Kontrastverhältnis eines der wichtigsten und am häufigsten geprüften Kriterien – ein schlechtes Verhältnis macht Texte für Millionen Menschen unlesbar.
Besonders betroffen sind Menschen mit Sehbehinderung, Rot-Grün-Schwäche oder Farbschwäche: Für sie sind kontrastarme Farben oft gar nicht unterscheidbar. Auch auf Bildschirmen mit schlechter Ausleuchtung oder bei Sonneneinstrahlung wird ein ausreichendes Kontrastverhältnis zur Grundvoraussetzung für Lesbarkeit – unabhängig von einer Behinderung.
Die WCAG des W3C legen verbindliche Mindestwerte fest. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) – und damit WCAG 2.1 Level AA als gesetzliche Pflicht für Unternehmen in Deutschland. Das Kontrastverhältnis ist dabei eines der ersten Kriterien, die bei einer WCAG-Prüfung kontrolliert werden.
Kontrastverhältnis auf einen Blick
- Definition: Messbarer Helligkeitsunterschied zwischen zwei Farben, ausgedrückt als Verhältnis (z. B. 4,5:1)
- WCAG AA (Text): Mindestens 4,5:1 für Normaltext, 3:1 für großen Text (ab 18 pt / 14 pt fett)
- WCAG AA (Nicht-Text): Mindestens 3:1 für UI-Elemente, Icons und informative Grafiken
- WCAG AAA (Text): Mindestens 7:1 für Normaltext, 4,5:1 für großen Text
- Maximum: 21:1 – Schwarz (#000000) auf Weiß (#ffffff)
Wie wird das Kontrastverhältnis berechnet?
Das Kontrastverhältnis basiert auf der relativen Luminanz – dem wahrgenommenen Helligkeitswert einer Farbe. Die Formel lautet: (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Farbe ist. Die Luminanz wird aus den RGB-Werten einer Farbe berechnet, nach einer Gammakorrektur, die der menschlichen Wahrnehmung von Helligkeit entspricht.
In der Praxis müssen Designerinnen und Entwickler diese Formel nicht manuell anwenden – dafür gibt es spezialisierte Tools. Der SiteCockpit Kontrastchecker berechnet das Kontrastverhältnis zweier Farben direkt im Browser und zeigt an, ob der Wert die WCAG-Anforderungen auf Level A, AA oder AAA erfüllt.
WCAG-Anforderungen im Vergleich: A, AA und AAA
Die WCAG unterscheiden beim Kontrastverhältnis nach Textgröße und Konformitätsstufe. Der Vergleich zeigt, dass die Anforderungen mit jeder Stufe deutlich steigen – und dass großer Text grundsätzlich weniger Kontrast benötigt, weil er auch bei niedrigerem Verhältnis besser lesbar ist.
- Level A (1.4.1): Farbe darf nicht das einzige Unterscheidungsmerkmal sein – kein Mindestwert für Kontrast
- Level AA (1.4.3): 4,5:1 Normaltext / 3:1 großer Text – gesetzliche Mindestanforderung
- Level AA (1.4.11): 3:1 für Nicht-Text-Inhalte – Buttons, Icons, Formularfelder
- Level AAA (1.4.6): 7:1 Normaltext / 4,5:1 großer Text – höchste Zugänglichkeit
- Ausnahmen: Dekorative Elemente, inaktive UI-Komponenten und Logotypen sind ausgenommen
Kontrastverhältnis bei Bildern und Nicht-Text-Inhalten
Seit WCAG 2.1 gilt das Kontrastverhältnis nicht mehr nur für Text. Kriterium 1.4.11 (Nicht-Text-Kontrast, Level AA) fordert einen Mindestwert von 3:1 für alle visuellen Informationen, die für das Verständnis eines Bilds, einer Grafik oder einer UI-Komponente notwendig sind. Ein Bild eines Diagramms, dessen Linien sich kaum vom Hintergrund abheben, oder ein Button ohne sichtbaren Rahmen verstoßen gegen dieses Kriterium.
Für rein dekorative Bilder – also solche, die keinen inhaltlichen Mehrwert tragen – gilt keine Kontrastanforderung. Entscheidend ist die Frage: Würde das Weglassen des Elements zu einem Informationsverlust führen? Wenn ja, greift WCAG 1.4.11.
Häufige Fehler beim Kontrastverhältnis in der Praxis
Unzureichender Kontrast gehört zu den am häufigsten festgestellten Barrierefreiheitsmängeln – weil er in der Designphase oft übersehen wird. Hellgraue Texte auf weißem Hintergrund, dezente Placeholder-Texte in Formularfeldern oder subtile Icon-Farben sehen ästhetisch ansprechend aus, fallen aber regelmäßig unter den WCAG-Mindestwert.
- Hellgrauer Text: #999999 auf Weiß ergibt nur 2,85:1 – deutlich unter dem 4,5:1-Minimum
- Placeholder-Text: Oft mit sehr niedrigem Kontrast gesetzt – und dennoch informationstragend
- Farbige Links ohne Unterstreichung: Wenn Farbe das einzige Unterscheidungsmerkmal ist, braucht es 3:1 zum Fließtext
- Text auf Bildhintergründen: Kontrast variiert je nach Bildbereich – schwer pauschal prüfbar
- Fokus-Indikatoren: Auch der sichtbare Tastaturfokus muss 3:1 Kontrast zum Hintergrund aufweisen
SiteCockpit Lösung
Kontrastchecker: Kontrastverhältnis direkt prüfen
Mit dem SiteCockpit Kontrastchecker prüfen Sie das Kontrastverhältnis zweier Farben sofort und kostenlos – inklusive Anzeige, ob der Wert die WCAG-Anforderungen auf Level AA und AAA erfüllt. Für die systematische Prüfung Ihrer gesamten Website erkennt easyMonitoring automatisch alle Seiten mit unzureichendem Kontrast und ordnet die Befunde den entsprechenden WCAG-Kriterien zu.
Kontrastchecker öffnen →Häufige Fragen zum Kontrastverhältnis
Was ist ein gutes Kontrastverhältnis für Websites?
Für die gesetzliche Konformität nach BFSG gilt 4,5:1 für Normaltext als Minimum (WCAG AA). Empfehlenswert ist ein Wert von 7:1 oder höher, der auch unter schlechten Lichtverhältnissen und für Menschen mit Sehbehinderung ausreichend Lesbarkeit gewährleistet.
Gilt das Kontrastverhältnis auch für Buttons und Icons?
Ja. WCAG 1.4.11 (Nicht-Text-Kontrast, Level AA) fordert mindestens 3:1 für UI-Komponenten wie Buttons, Checkboxen, Formularfelder und informative Icons. Rein dekorative Elemente sind ausgenommen.
Wie prüfe ich das Kontrastverhältnis meiner Website?
Der SiteCockpit Kontrastchecker prüft einzelne Farbkombinationen direkt im Browser. Für eine vollständige Website-Prüfung empfiehlt sich easyMonitoring, das alle Seiten automatisiert auf Kontrastverstöße scannt und die Ergebnisse WCAG-Kriterien zuordnet.
Ist weißer Text auf farbigem Hintergrund immer problematisch?
Nicht zwangsläufig. Weißer Text (#ffffff) auf einem satten Dunkelblau (#1A56DB) ergibt beispielsweise ca. 4,6:1 – gerade noch WCAG-AA-konform. Entscheidend ist der konkrete Kontrast-Wert, nicht die Farbkombination an sich. Ein Kontrastchecker gibt sofort Auskunft.
Kontrast auf Ihrer Website jetzt prüfen
Mit dem SiteCockpit Kontrastchecker und easyMonitoring prüfen Sie Kontrastverhältnisse gezielt – einzeln oder seitenübergreifend – und erhalten konkrete Hinweise zur WCAG-konformen Umsetzung.
Kostenlos testen