Farbkontrast prüfen nach WCAG

So prüfen Sie den Farbkontrast mit dem Tool

Für Text und Hintergrund gibt es je ein Farbfeld und ein Eingabefeld. Im Eingabefeld tragen Sie den Hex-Wert ein, etwa #1a1a1a. Auch die Kurzform #333 und Werte ohne Raute erkennt das Tool. Ein Klick auf das Farbfeld öffnet stattdessen den Farbwähler, beide Felder gleichen sich gegenseitig ab. Das Ergebnis erscheint sofort als Verhältnis mit zwei Nachkommastellen, zum Beispiel 4,54 : 1. Darunter stehen fünf Prüfungen mit „erfüllt“ oder „nicht erfüllt“: normaler und großer Text jeweils für AA und AAA sowie Bedienelemente und Grafiken. Daneben zeigt die Vorschau eine Zeile großen Text, einen Absatz Fließtext und eine Schaltfläche in Ihren Farben.

Mit „Farben tauschen“ wechseln Text und Hintergrund die Rollen. Das Verhältnis bleibt dabei gleich, weil es nicht von der Reihenfolge abhängt. Die Vorschau zeigt dann aber die umgekehrte Kombination, und ein Vorschlag bezieht sich auf die neue Textfarbe. So sehen Sie, welche Schrift auf einer Markenfarbe genug Kontrast hat, wenn diese Farbe als Fläche für Buttons oder Hinweisbänder dienen soll.

Farbvorschlag: Markenfarbe anpassen, ohne das Design zu verlieren

Liegt das Verhältnis unter 4,5 : 1, nennt das Tool einen Vorschlag für normalen Text. Dafür verändert es die Textfarbe schrittweise, auf hellem Hintergrund in Richtung Schwarz, auf dunklem in Richtung Weiß, bis 4,5 : 1 erreicht ist. Der Farbton bleibt dabei erhalten, die Farbe wird nur dunkler oder heller. Ein Klick auf den vorgeschlagenen Wert übernimmt ihn ins Eingabefeld, dort können Sie weiter feinjustieren. Ein Beispiel: Ein Friseursalon setzt Preise in hellem Beige auf Weiß, weil es zum Logo passt, und fällt bei AA durch. Der Vorschlag ist ein dunkles Braun mit demselben Grundton, der Charakter bleibt erhalten.

Eine Markenfarbe, die als Schrift durchfällt, muss also nicht ersetzt werden. Behalten Sie die Originalfarbe für Grafiken und Flächen und legen Sie für Text und Links eine abgedunkelte Variante fest. Eine helle Akzentfarbe eignet sich als Fläche mit dunkler Schrift, nicht als Textfarbe auf Weiß. Halten Sie die geprüften Paare in einer kleinen Farbliste fest, damit spätere Änderungen daran gemessen werden. Bei einer neuen Website spart es Arbeit, den Kontrast schon im Entwurf zu prüfen. Wie Bemuar Websites gestaltet, steht unter Webdesign.

Was das Kontrastverhältnis bedeutet

Das Kontrastverhältnis vergleicht die relative Helligkeit zweier Farben nach einer Formel aus den Web Content Accessibility Guidelines, kurz WCAG. Es reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei Schwarz auf Weiß. Entscheidend ist der Helligkeitsunterschied, nicht der Farbton: Rot auf Grün mit ähnlicher Helligkeit ist schlecht lesbar, obwohl sich die Farbtöne stark unterscheiden. Ein mittleres Grau wie #767676 liegt auf Weiß knapp über 4,5:1, ein etwas helleres Grau schon darunter. Mehr zu den Grundlagen steht im Wissensbeitrag Farbkontrast.

AA und AAA: die Schwellenwerte im Überblick

Die WCAG kennen die Konformitätsstufen A, AA und AAA. Für den Kontrast von Text sind diese Mindestwerte maßgeblich:

• AA, normaler Text: mindestens 4,5:1
• AA, großer Text: mindestens 3:1
• AAA, normaler Text: mindestens 7:1
• AAA, großer Text: mindestens 4,5:1

AA gilt in der Praxis als Ziel für Websites, an dieser Stufe orientiert sich auch die europäische Norm für barrierefreie digitale Angebote. AAA ist strenger. Die WCAG empfehlen nicht, diese Stufe als Anforderung für ganze Websites vorzuschreiben, weil sie sich nicht für jeden Inhalt erreichen lässt. Bei Fließtext und Überschriften lohnt es sich trotzdem, über das Minimum hinauszugehen.

Was als großer Text gilt

Für großen Text genügt ein niedrigeres Verhältnis, weil er auch bei schwächerem Kontrast gut lesbar ist. Groß heißt nach WCAG: mindestens 18 Punkt oder mindestens 14 Punkt fett. Auf dem Bildschirm entspricht das etwa 24 Pixeln beziehungsweise rund 19 Pixeln in fetter Schrift. Normaler Fließtext mit 16 Pixeln zählt also als normaler Text und muss 4,5:1 erreichen. Überschriften sind häufig groß genug, Beschriftungen, Fußzeilentexte und Hinweise in kleiner Schrift dagegen nicht. In der Vorschau stehen großer Text und Fließtext untereinander, so sehen Sie den Unterschied direkt.

Wo der Kontrast-Checker an Grenzen stößt

Das Tool vergleicht genau zwei einfarbige Flächen. Nicht erfasst werden Text über Fotos oder Farbverläufen, Hover- und Fokuszustände sowie Schriftart und Schriftdicke. Eine sehr dünne Schrift kann trotz bestandenem Wert schlecht lesbar sein. Hex-Werte mit Transparenz, also mit acht Stellen, nimmt das Tool nicht an. Tragen Sie in diesem Fall die Mischfarbe ein, die tatsächlich sichtbar ist. Einen Dunkelmodus prüfen Sie getrennt mit dessen eigenen Farbpaaren. Von den Kontrastanforderungen ausgenommen sind Logos und deaktivierte Bedienelemente. Liegt Text auf einem Foto, prüfen Sie mehrere Stellen des Bildes oder legen eine einfarbige Fläche dahinter.

Typische Kontrastfehler auf Firmenwebsites

• Hellgrauer Text auf Weiß bei Datumsangaben, Bildunterschriften, Platzhaltern in Formularfeldern und in der Fußzeile.
• Weiße Schrift auf Buttons in hellen Akzentfarben wie Gelb, Hellgrün oder Orange.
• Schrift direkt auf einem Titelbild, das an manchen Stellen hell ist.
• Links, die sich nur durch die Farbe vom Fließtext abheben.
• Hinweisbänder und Banner in Markenfarbe mit dünner Schrift.

Prüfen Sie nicht nur die Hauptfarben, sondern jedes Paar, das auf der Seite tatsächlich vorkommt.

Kontrast bei Buttons, Formularfeldern und Symbolen

Seit WCAG 2.1 gilt für Bedienelemente und aussagekräftige Grafiken ein Mindestverhältnis von 3:1 zum Umfeld. Das betrifft zum Beispiel den Rahmen von Eingabefeldern, den Fokusrahmen, der beim Springen mit der Tabulatortaste erscheint, und Symbole ohne Beschriftung. Ein hellgrauer Rahmen um ein Formularfeld auf weißem Grund ist deshalb ein häufiger Fehler. Im Checker gibt es dafür die Zeile „Bedienelemente und Grafiken“. Tragen Sie die Rahmenfarbe als Textfarbe und die Umgebung als Hintergrund ein. Die Schaltfläche in der Vorschau trägt einen Rahmen in der Textfarbe, so sehen Sie gleich, wie er wirkt.

Barrierefreiheit und BFSG: wo der Kontrast hineingehört

Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) anzuwenden. Es betrifft bestimmte Produkte und Dienstleistungen, bei Websites vor allem Angebote im elektronischen Geschäftsverkehr, über die Verbraucher online einen Vertrag schließen, etwa Online-Shops oder Buchungsstrecken. Für Kleinstunternehmen, die Dienstleistungen erbringen, macht das Gesetz eine Ausnahme. Als Kleinstunternehmen gilt nach dem Gesetz ein Betrieb mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Als technischer Maßstab dient in der Praxis die europäische Norm EN 301 549, die für Websites die Kriterien der WCAG auf Stufe AA übernimmt. Der Kontrast ist dort ein Prüfpunkt von vielen, ein bestandener Wert im Checker ersetzt also keine vollständige Prüfung.

Unabhängig von einer Pflicht lohnt sich gute Lesbarkeit: Auf dem Handy in der Sonne, bei nachlassender Sehkraft oder auf einem schwachen Bildschirm entscheidet der Kontrast, ob Besucher Ihre Öffnungszeiten lesen können. Einen ersten Überblick über weitere technische Punkte gibt der Barrierefreiheits-Check, Hintergründe stehen unter Barrierefreiheit der Website. Diese Hinweise ersetzen keine Rechtsberatung.