Kontrast-Checker für Farben
Das WCAG-Kontrastverhältnis zwischen Text- und Hintergrundfarbe prüfen, mit klarem Ergebnis für AA und AAA bei normaler und großer Schrift.
Weiteres Tool ausprobieren
Passend zu diesem Tool ausgewähltDer Kontrast-Checker berechnet das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe nach den Web Content Accessibility Guidelines (WCAG) und zeigt, ob die Kombination die Stufen AA und AAA erfüllt, getrennt für normale und große Schrift. Farben werden als HEX-Code eingegeben oder im Farbwähler ausgesucht, eine Vorschau zeigt die Wirkung sofort. Das ist mehr als eine Stilfrage: Seit dem 28. Juni 2025 verlangt das Barrierefreiheitsstärkungsgesetz von vielen digitalen Angeboten für Verbraucher in Deutschland eine barrierefreie Gestaltung, und ausreichender Kontrast gehört zu den Grundlagen.
So funktioniert das Tool
- 01Textfarbe eingebenDen HEX-Code der Schrift eintragen, etwa #1F2937, oder die Farbe im Farbwähler wählen.
- 02Hintergrundfarbe eingebenEbenso die Farbe der Fläche dahinter. Mit „Farben tauschen“ lassen sich beide umdrehen.
- 03Ergebnis ablesenDas Verhältnis erscheint sofort, dazu „Erfüllt“ oder „Nicht erfüllt“ für AA und AAA in beiden Schriftgrößen.
Wann ist das nützlich?
- Webdesign und StyleguidesMarkenfarben vor dem Einsatz auf Buttons, Links und Hinweisen prüfen, statt Probleme erst nach dem Start der Website zu finden.
- Barrierefreiheit dokumentierenKontrastwerte für Prüfberichte sammeln, wenn eine Website oder ein Shop nach BITV 2.0 oder Barrierefreiheitsstärkungsgesetz barrierefrei sein muss.
- Präsentationen und DruckvorlagenAuch Folien und Plakate profitieren: Was am Bildschirm gerade noch lesbar ist, geht auf einem Beamer oft unter.
Beispiele
- Grau auf Weiß#767676 auf #FFFFFF ergibt 4,54:1 und erfüllt AA für normale Schrift knapp. Das etwas hellere #777777 kommt nur auf 4,48:1 und fällt durch.
- Weiß auf hellem TürkisWeiß auf #1ED4C5 erreicht nur 1,86:1 und fällt überall durch. Schwarz auf derselben Farbe kommt auf 11,28:1 und erfüllt sogar AAA.
- Dunkles PetrolWeiß auf #0B7A70 ergibt 5,21:1: AA für normale und große Schrift erfüllt, AAA nur für große Schrift.
Tipps für ein besseres Ergebnis
- Knapp bestanden ist riskantWerte knapp über 4,5:1 kippen schnell, wenn eine Farbe später leicht angepasst oder auf einem anderen Bildschirm dargestellt wird.
- Hover und Fokus mitprüfenHover- und Fokuszustände haben oft eigene Farben und werden leicht vergessen. Deaktivierte Elemente sind nach WCAG von der Kontrastanforderung ausgenommen.
- Text auf BildernAuf Fotos schwankt der Hintergrund. Die hellste und die dunkelste Stelle hinter dem Text getrennt prüfen.
Wie das Kontrastverhältnis berechnet wird
Grundlage ist die relative Leuchtdichte beider Farben: Die sRGB-Werte werden linearisiert und gewichtet, Grün zählt am stärksten, Blau am wenigsten. Das Verhältnis lautet (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Es reicht von 1:1 bei gleichen Farben bis 21:1 bei Schwarz auf Weiß und wird hier auf zwei Nachkommastellen gerundet.
Die Schwellen für AA und AAA
Stufe AA verlangt mindestens 4,5:1 für normale Schrift und 3:1 für große Schrift, Stufe AAA 7:1 und 4,5:1. Als groß gilt Schrift ab 18 Punkt, das sind 24 Pixel, oder fette Schrift ab 14 Punkt, rund 18,7 Pixel. Für Bedienelemente und Grafiken wie Symbole oder Rahmen von Eingabefeldern nennt WCAG 2.1 zusätzlich 3:1 (Erfolgskriterium 1.4.11).
Rechtlicher Rahmen in Deutschland und Österreich
Für öffentliche Stellen des Bundes gilt in Deutschland die BITV 2.0. Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz auch viele Unternehmen, etwa Onlineshops und Bankdienstleistungen für Verbraucher, Kleinstunternehmen mit Dienstleistungen sind ausgenommen. In Österreich setzt das Barrierefreiheitsgesetz dieselbe EU-Richtlinie um. Technischer Maßstab ist die Norm EN 301 549, die für Webinhalte WCAG 2.1 auf Stufe AA übernimmt. Diese Prüfung ersetzt keinen vollständigen Barrierefreiheitstest.
Was der Kontrast nicht abdeckt
Ein guter Wert sagt nichts über Schriftgröße, Zeilenabstand oder Farbfehlsichtigkeit aus. Rot und Grün können ein ausreichendes Verhältnis haben und für Menschen mit Rot-Grün-Schwäche trotzdem schwer zu unterscheiden sein. Informationen sollten deshalb nie allein über die Farbe vermittelt werden.
Häufige Fragen
Welcher Kontrast ist für Text vorgeschrieben?
Nach WCAG Stufe AA mindestens 4,5:1 für normale und 3:1 für große Schrift. Diese Stufe ist der Maßstab der EN 301 549, auf die sich die BITV 2.0 und die Umsetzung des Barrierefreiheitsstärkungsgesetzes stützen.
Was gilt als große Schrift?
Schrift ab 18 Punkt (24 Pixel) oder fette Schrift ab 14 Punkt (rund 19 Pixel). Für sie genügt bei AA ein Verhältnis von 3:1.
Was bedeutet 4,5:1?
Die hellere Farbe hat, jeweils um 0,05 erhöht, die 4,5-fache relative Leuchtdichte der dunkleren. Je höher die Zahl, desto leichter ist Text lesbar.
Warum fällt meine Markenfarbe durch?
Helle, kräftige Farben wie Türkis, Gelb oder Hellgrün haben eine hohe Leuchtdichte und kontrastieren schwach mit Weiß. Für Text eine dunklere Variante der Farbe nehmen oder dunkle Schrift auf die helle Fläche setzen.
Werden die Farben gespeichert?
Nein. Die Berechnung läuft im Browser, eingegebene Farben werden nicht übertragen.