Farbkontrast: WCAG-Kontrastverhältnis einfach erklärt
Also called: Kontrastverhältnis, Textkontrast, Kontrast (Minimum)
Definition
Farbkontrast ist der Helligkeitsunterschied zwischen Text oder Bedienelementen und ihrem Hintergrund, angegeben als Verhältnis von 1:1 bis 21:1. Die WCAG verlangen mindestens 4,5:1 für normalen und 3:1 für großen Text.
Farbkontrast beschreibt, wie stark sich Text und Bedienelemente von ihrem Hintergrund abheben. Die WCAG messen ihn als Kontrastverhältnis von 1:1 (kein Unterschied, etwa Weiß auf Weiß) bis 21:1 (Schwarz auf Weiß). Je höher der Wert, desto leichter ist der Text zu lesen.
Was es bedeutet
Zu geringer Kontrast gehört zu den häufigsten Barrierefreiheitsfehlern im Web. Hellgrauer Text auf weißem Grund wirkt auf einem hochwertigen Bildschirm vielleicht elegant. Auf einem günstigen Laptop, in der Sonne oder für Menschen mit Sehschwäche ist er aber kaum oder gar nicht lesbar.
WCAG 1.4.3 Kontrast (Minimum) ist eine Anforderung der Stufe AA von WCAG 2.2 – genau die Stufe, die Gesetze wie der European Accessibility Act über die EN 301 549 verlangen. Sie legt diese Mindestwerte fest:
| Was | Mindestverhältnis |
|---|---|
| Normaler Text | 4,5:1 |
| Großer Text – ab 24 px oder ab 18,66 px fett | 3:1 |
| Logos und Markennamen | Keine Vorgabe |
| Deaktivierte Buttons und rein dekorativer Text | Keine Vorgabe |
Die strengere Stufe AAA (WCAG 1.4.6) verlangt 7:1 für normalen und 4,5:1 für großen Text. Für Icons, Rahmen von Formularfeldern und Fokus-Markierungen schreibt WCAG 1.4.11 mindestens 3:1 gegenüber den angrenzenden Farben vor.
Praxisbeispiele
Ein typischer Grenzfall: #767676 auf Weiß erreicht 4,54:1 und besteht. Das etwas hellere #777777 kommt nur auf 4,48:1 und fällt durch.
<!-- Besteht: 4,54:1 -->
<p style="color: #767676; background: #ffffff;">Gratis Versand ab 50 €</p>
<!-- Fällt durch: 2,32:1 -->
<p style="color: #aaaaaa; background: #ffffff;">Gratis Versand ab 50 €</p>Dunkelgrauer Fließtext (#333333 auf Weiß, 12,6:1) und Platzhaltertext, der ebenfalls 4,5:1 erreicht. Bei Text auf Fotos eine dunkle Fläche hinter den Text legen.
Hellgrauer Platzhaltertext, weißer Text direkt auf einem hellen Foto oder Markenfarben für kleinen Text, ohne das Verhältnis vorher zu prüfen.
So prüfen Sie den Farbkontrast
- Jedes Farbpaar messen – Text- und Hintergrundfarbe in einen Kontrastchecker eingeben.
- Alle Zustände prüfen – auch Hover, Fokus, Fehlermeldungen und Platzhaltertext zählen.
- Text auf Bildern prüfen – gegen die hellste Stelle des Bildes hinter dem Text messen.
- An der Quelle korrigieren – Farben im Designsystem oder in den CSS-Variablen ändern, dann profitieren alle Seiten auf einmal.
Häufige Fragen
Welches Kontrastverhältnis fordern die WCAG?
Auf Stufe AA braucht normaler Text mindestens 4,5:1, großer Text (ab 24 px oder 18,66 px fett) mindestens 3:1. Icons, Rahmen von Eingabefeldern und Fokus-Markierungen brauchen 3:1.
Braucht Platzhaltertext genug Kontrast?
Ja. Platzhaltertext ist Text und muss daher 4,5:1 erreichen. Viele Standard-Styles von Browsern und Themes erfüllen das nicht.
Müssen Logos die Kontrastvorgaben erfüllen?
Nein. Text, der Teil eines Logos oder Markennamens ist, ist von WCAG 1.4.3 ausgenommen.
Wie prüfe ich die Farben meiner Website am schnellsten?
Geben Sie Text- und Hintergrundfarbe in den kostenlosen allyWay-Kontrastchecker ein. Sie sehen sofort das Verhältnis und ob es AA und AAA besteht. Um kontrastarmen Text auf Ihrer Startseite zu finden, nutzen Sie den kostenlosen WCAG-Scanner.
Kann allyWay Kontrastprobleme automatisch beheben?
Ja. allyWay findet Text mit zu geringem Kontrast und korrigiert die Farben automatisch – passend zu Ihrem Markenstil. Da Farben eine sichtbare Änderung sind, gehen die Korrekturen erst nach Ihrer Freigabe live – Ihr Code oder Theme muss dafür nicht angepasst werden. Kostenlos starten und sehen, welche Kontrastprobleme allyWay auf Ihrer Website beheben kann.