Farb-Kontrast-Checker (WCAG)
Kostenloser WCAG-Kontrast-Checker: prüft das Kontrastverhältnis von Text und Hintergrund gegen AA/AAA. Für barrierefreie Websites.
14.68 : 1
„Groß“ = ab 18,66px fett bzw. 24px normal. AA verlangt 4,5:1 (normal) / 3:1 (groß), AAA 7:1 / 4,5:1.
Beispieltext
Digitalisierung für Unternehmen — barrierefrei und lesbar für alle. Dieser Vorschautext verwendet die gewählten Farben.
Kleinerer Fließtext zur Kontrollprüfung.
Ratgeber: Farb-Kontrast-Checker (WCAG)
Ob Text lesbar ist, entscheidet nicht der Geschmack, sondern der Unterschied zwischen Schrift- und Hintergrundhelligkeit. Die Web-Richtlinien für Barrierefreiheit drücken ihn als Verhältnis aus: 1:1 bedeutet identische Farben, 21:1 ist Schwarz auf Weiß. Ab 4,5:1 gilt normaler Text als ausreichend lesbar, große Schrift ab 3:1 — das ist die Stufe AA. Wer strenger sein will, zielt auf AAA mit 7:1.
Dieses Werkzeug rechnet das Verhältnis für ein Farbpaar aus und sagt Ihnen unmittelbar, welche Stufen bestanden sind: AA und AAA, jeweils für normale und für große Schrift. Sie geben die beiden Farben als Hex-Wert ein oder wählen sie über die Farbfelder.
Der praktische Nutzen liegt weniger in der Note als in der Korrektur: Fast jedes Corporate-Grau auf Weiß scheitert knapp, und fast immer reicht es, die Schrift eine Spur dunkler zu ziehen, statt die Gestaltung umzuwerfen. Wichtig ist außerdem, was oft vergessen wird — geprüft wird jede Kombination, die tatsächlich vorkommt: heller Text auf einem Farbbutton, Text auf einem Bild, der Hinweistext in einem Formularfeld.
Typische Anwendungsfälle
Neue Website vor dem Start prüfen
Fließtext, Überschriften, Links und Buttons einmal durchgehen, bevor die Seite live geht — später ist jede Änderung teurer.
Farben aus dem Logo übernehmen
Eine Markenfarbe, die im Logo gut aussieht, ist als Schriftfarbe oft zu hell. Die Prüfung zeigt, ob eine dunklere Variante nötig ist.
Buttons und Hinweise kontrollieren
Weiße Schrift auf einem Aktionsbutton ist der häufigste stille Durchfaller — der Button fällt auf, der Text darauf ist trotzdem schwer lesbar.
Öffentliche Aufträge vorbereiten
Für Websites öffentlicher Stellen ist Barrierefreiheit in Deutschland verbindlich. Die Kontrastprüfung ist einer der ersten Punkte jeder Abnahme.
Dunkles Design gegenprüfen
Helle Schrift auf dunklem Grund verhält sich anders als umgekehrt. Beide Varianten einer Seite gehören getrennt geprüft.
So gehen Sie vor
Textfarbe eintragen
Geben Sie die Schriftfarbe als Hex-Wert ein oder wählen Sie sie über das Farbfeld. Kurzformen wie #fff werden ebenso verstanden wie die lange Schreibweise.
Hintergrundfarbe eintragen
Entscheidend ist die Farbe, die im fertigen Layout tatsächlich hinter dem Text liegt — also die Fläche der Karte oder des Buttons, nicht die Seitenfarbe dahinter.
Ergebnis ablesen
Das Verhältnis erscheint zusammen mit vier Bewertungen: AA und AAA, jeweils für normale und große Schrift. Groß bedeutet ab 18,66 Pixel fett oder ab 24 Pixel regulär.
Nachjustieren
Reicht es nicht, verändern Sie zuerst die Helligkeit der Schriftfarbe und lassen den Farbton stehen — so bleibt der Markeneindruck erhalten und der Text wird trotzdem lesbar.
Was mit Ihren Daten passiert
Die Berechnung läuft vollständig in Ihrem Browser; es werden keine Farbwerte übertragen oder gespeichert. Das Werkzeug prüft ausschließlich das Kontrastverhältnis nach WCAG 2.1 — es ist damit ein Baustein der Barrierefreiheit, nicht deren Nachweis. Tastaturbedienbarkeit, sinnvolle Alternativtexte, Formularbeschriftungen und eine schlüssige Überschriftenstruktur gehören ebenso dazu.
Häufige Fragen
Was ist der Unterschied zwischen AA und AAA?
AA verlangt 4,5:1 für normalen und 3:1 für großen Text und ist die Stufe, auf die in der Praxis abgezielt wird. AAA verlangt 7:1 beziehungsweise 4,5:1. AAA ist für längere Fließtexte anspruchsvoll und wird meist nur dort verlangt, wo eine besonders breite Leserschaft erreicht werden muss.
Ab wann gilt Schrift als groß?
Ab 18,66 Pixel in Fettschrift oder ab 24 Pixel in normaler Stärke — das entspricht etwa 14 beziehungsweise 18 Punkt. Darunter gilt die strengere Anforderung für normalen Text.
Gilt das auch für Logos und Bilder?
Für reine Logos nicht, die sind ausgenommen. Text, der als Teil eines Bildes gesetzt ist, muss die Anforderung dagegen erfüllen — und Bedienelemente sowie Grafiken, die Information tragen, brauchen mindestens 3:1 gegenüber ihrer Umgebung.
Mein Grau scheitert knapp. Was tun?
Ziehen Sie die Helligkeit der Schriftfarbe herunter und lassen Sie den Farbton unverändert. In den meisten Fällen genügen wenige Prozent, um von 4,1:1 auf über 4,5:1 zu kommen, ohne dass sich der Gesamteindruck sichtbar ändert.
Muss meine Website barrierefrei sein?
Für öffentliche Stellen ist es in Deutschland verbindlich. Seit Juni 2025 gelten über das Barrierefreiheitsstärkungsgesetz zudem Anforderungen für viele privatwirtschaftliche Online-Angebote, etwa im Onlinehandel; Kleinstunternehmen sind teilweise ausgenommen. Unabhängig von der Pflicht gilt: Lesbarer Text nutzt allen, auch bei Sonnenlicht auf dem Telefon.