Farbkontrast prüfen
Zu blasse Schrift ist einer der häufigsten Mängel im Web, und einer der am leichtesten messbaren. Hier erfährst du, welche Mindestwerte WCAG 2.1 AA verlangt, wie du das Kontrastverhältnis deiner Website misst und worauf du bei Bedienelementen und Grafiken achten musst.
Was Farbkontrast im Sinne der WCAG bedeutet
Farbkontrast ist ein messbarer Wert, kein Geschmacksurteil. Er wird als Verhältnis zwischen der Helligkeit von Text und Hintergrund angegeben, von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). Ein Wert von 4,5:1 heißt: Der hellere Ton reflektiert viereinhalb Mal so viel Licht wie der dunklere.
Diese Zahl entscheidet darüber, ob Menschen mit eingeschränkter Sehkraft einen Text lesen können, und sie hilft allen anderen bei Sonnenlicht auf dem Handy. Weil sie objektiv messbar ist, gehört Kontrast zu den wenigen Kriterien, die ein Werkzeug vollständig automatisch prüfen kann. Genau deshalb ist es auch eines der ersten Dinge, die bei einer Prüfung auffallen.
Wie prüfe ich den Farbkontrast meiner Website?
Drei Wege, je nachdem ob du eine einzelne Stelle, ein Farbschema oder eine ganze Website prüfen willst:
- 01
Im Browser messen
Die Entwicklertools von Chrome und Firefox zeigen beim Auswählen eines Textes das Kontrastverhältnis direkt an, samt Hinweis, ob es die Anforderung erfüllt. Gut für einzelne Stellen, aber mühsam über eine ganze Website.
- 02
Farbwerte im Kontrast-Rechner prüfen
Mit Vorder- und Hintergrundfarbe lässt sich das Verhältnis vorab berechnen, zum Beispiel für ein neues Farbschema. Sinnvoll im Design, bevor überhaupt etwas gebaut wird.
- 03
Automatischer Scanner
Ein Tool prüft alle Seiten automatisch und meldet jede Stelle, die unter dem Mindestwert liegt, samt gemessenem Verhältnis. Der einzige Weg, der bei vielen Seiten praktikabel bleibt und sich nach jeder Änderung wiederholen lässt.
Alle Seiten auf einmal messen?
Fordere jetzt eine kostenlose Erstprüfung an. site-check misst jede Textstelle und meldet, wo der Kontrast unter dem Mindestwert liegt.
Die vier Regeln, auf die es ankommt
Kontrast ist nicht ein einzelner Wert, sondern hängt von Schriftgröße und Art des Elements ab:
4,5:1 für normalen Text
Fließtext muss sich mindestens im Verhältnis 4,5:1 vom Hintergrund abheben (WCAG 1.4.3, Level AA). Das ist der Wert, an dem die meisten Seiten scheitern, meist bei hellgrauer Schrift auf Weiß.
3:1 für große Schrift
Ab 24 Pixel, oder ab 18,66 Pixel bei fetter Schrift, genügt 3:1. Große Überschriften dürfen also etwas kontrastärmer sein als Fließtext, aber eben nicht beliebig.
3:1 für Bedienelemente und Grafiken
Auch Rahmen von Eingabefeldern, Schalter, Icons und wichtige Teile von Grafiken brauchen 3:1 (WCAG 1.4.11). Ein hellgrauer Rahmen um ein Formularfeld fällt hier oft durch.
Farbe allein reicht nie
Information darf nicht nur über Farbe transportiert werden (WCAG 1.4.1). Ein rot markiertes Pflichtfeld braucht zusätzlich Text oder ein Symbol, sonst geht die Aussage für farbfehlsichtige Menschen verloren.
Farbkontrast mit site-check prüfen und korrigieren
site-check misst den Kontrast jeder Textstelle auf allen Seiten deiner Website und listet jeden Fund mit dem gemessenen Verhältnis, der betroffenen Farbe und der Fundstelle im Quelltext. Weil der Wert rechnerisch eindeutig ist, gibt es hier keine Grauzone: Eine Stelle erfüllt die Anforderung oder eben nicht.
Für viele Fälle schlägt site-check einen korrigierten Farbwert vor, der den Mindestwert erreicht und dabei so nah wie möglich am ursprünglichen Ton bleibt. Übernommen wird nur, was du freigibst, denn Farbe ist immer auch eine Marken-Entscheidung. Gehostet in der EU, Daten DSGVO-konform verarbeitet.
Zu blasse Stellen automatisch finden
Melde dich bei uns, wir messen den Kontrast deiner Website und schicken dir die Liste mit den Fundstellen.
Häufige Fragen zum Farbkontrast
Welcher Farbkontrast ist nach WCAG 2.1 AA vorgeschrieben?
Für normalen Fließtext gilt ein Mindestverhältnis von 4,5:1 zum Hintergrund. Für große Schrift ab 24 Pixel, oder ab 18,66 Pixel in Fettschrift, genügen 3:1. Bedienelemente und wichtige grafische Elemente brauchen ebenfalls mindestens 3:1. Das höhere Niveau von 7:1 gehört zu Level AAA und ist gesetzlich nicht gefordert.
Wie messe ich das Kontrastverhältnis meiner Website?
Am schnellsten in den Entwicklertools des Browsers: Element auswählen, das Kontrastverhältnis wird mit Bewertung angezeigt. Für ein Farbschema in der Planung nutzt du einen Kontrast-Rechner mit Vorder- und Hintergrundfarbe. Für eine ganze Website ist ein automatischer Scanner der einzige praktikable Weg, weil er jede Textstelle auf jeder Seite misst.
Gilt der Farbkontrast auch für Logos und Symbole?
Für Logos gilt die Anforderung nicht, sie sind ausdrücklich ausgenommen. Für Symbole und Grafiken, die Information tragen oder der Bedienung dienen, gilt dagegen ein Mindestwert von 3:1. Ein reines Dekorationselement muss den Kontrast nicht erfüllen.
Ist zu schwacher Farbkontrast ein BFSG-Problem?
Ja. Der Mindestkontrast ist WCAG 2.1 Kriterium 1.4.3 auf Level AA und damit Teil dessen, was das Barrierefreiheitsstärkungsgesetz verlangt. Zu blasse Schrift gehört zu den häufigsten Mängeln überhaupt, weil sie im Design oft bewusst gewählt wird.
Kann site-check Kontrastfehler automatisch finden und beheben?
site-check misst den Kontrast jeder Textstelle auf allen Seiten und listet jeden Fund mit gemessenem Verhältnis und Fundstelle im Report. Für viele Fälle schlägt site-check einen angepassten Farbwert vor, der die Anforderung erfüllt und möglichst nah an der ursprünglichen Farbe bleibt. Übernommen wird nur, was du freigibst, denn Farbe ist auch eine Marken-Entscheidung.
Passende Ratgeber
Website auf Barrierefreiheit prüfen
Die drei Wege im Vergleich und was nach WCAG 2.1 AA getestet wird.
Mehr erfahren →Alt-Texte prüfen
Was einen guten Alternativtext ausmacht und wie du fehlende findest.
Mehr erfahren →Überschriften-Struktur prüfen
Warum die Hierarchie von H1 bis H6 zählt und wie du sie prüfst.
Mehr erfahren →Wie steht es um deine Farben?
Fordere jetzt eine kostenlose Erstprüfung an. site-check misst den Farbkontrast deiner Website nach WCAG 2.1 AA und meldet sich mit den Fundstellen, ohne Kreditkarte und ohne Verpflichtung.