Start › Ratgeber

Kontrast prüfen: So testen Sie Ihre Website nach WCAG (mit Tools)

Zu schwacher Farbkontrast ist einer der häufigsten Barrierefreiheitsfehler überhaupt – und einer der am einfachsten behebbaren. Diese Anleitung zeigt, welche Werte gelten, welche kostenlosen Werkzeuge Sie nutzen können und wie Sie typische Problemstellen finden.

Keine Rechtsberatung: Dieser Artikel gibt den Stand unserer Recherche (November 2026) wieder und ersetzt keine Rechtsberatung. Für eine verbindliche Einschätzung Ihres Einzelfalls wenden Sie sich bitte an eine Rechtsanwältin oder einen Rechtsanwalt.

Welche Werte gelten?

Element	Mindestkontrast (WCAG 2.1 AA)	Kriterium
Normaler Text	4,5:1	1.4.3
Großer Text (ab ca. 24 px normal oder ca. 18,7 px fett)	3:1	1.4.3
Bedienelemente, Fokusrahmen, Formularfeld-Rahmen, informative Icons	3:1 zur Umgebung	1.4.11
Logos, rein dekorative Elemente, deaktivierte Buttons	keine Anforderung	–

Das Kontrastverhältnis reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Es wird aus der relativen Helligkeit beider Farben berechnet – Sie müssen das nicht selbst rechnen.

Werkzeuge, die Sie kostenlos nutzen können

WebAIM Contrast Checker (webaim.org/resources/contrastchecker): zwei Hex-Farben eingeben, Ergebnis für AA und AAA ablesen.
Colour Contrast Analyser (TPGi, Windows/Mac): mit Pipette Farben direkt vom Bildschirm aufnehmen – ideal für Text auf Bildern.
Chrome/Edge DevTools: Element untersuchen, auf das Farbfeld bei color klicken – der Kontrastwert wird angezeigt, inklusive Linien für AA/AAA.
Firefox Barrierefreiheitsinspektor: „Probleme prüfen › Kontrast“ listet alle Textstellen mit zu geringem Kontrast einer Seite.
WAVE und Lighthouse: automatisierte Seitentests, die Kontrastfehler markieren.

Eine Übersicht weiterer Tools pflegt das W3C. Beachten Sie: Automatische Tests erkennen Text auf Hintergrundbildern und Verläufen oft nicht. Dafür brauchen Sie die Pipette.

Schritt für Schritt: Ihre Seite in 15 Minuten prüfen

Farbpalette erfassen: Notieren Sie Textfarbe, Hintergrund, Primär-Button, Link-Farbe, Rahmenfarbe von Formularfeldern.
Paare prüfen: Jede Kombination in den WebAIM Checker eingeben. Typisch kritisch: Grau auf Weiß (z. B. #999 auf #FFF ergibt nur rund 2,8:1), weiße Schrift auf hellen Markenfarben.
Seiten scannen: Startseite, Produkt- oder Leistungsseite und Formular mit dem Firefox-Inspektor oder WAVE prüfen.
Bilder mit Text: Banner mit Pipette an der hellsten Stelle hinter dem Text messen.
Zustände prüfen: Hover, Fokus, Fehlermeldungen, Badges, Placeholder-Text.

Typische Problemstellen in Shops

Durchgestrichene Altpreise und „inkl. MwSt.“-Hinweise in Hellgrau
Sale-Badges in Pastellfarben
Platzhaltertext in Formularfeldern
Fokusrahmen in Hellblau auf Weiß
Cookie-Banner mit blassem „Ablehnen“-Link

Markenfarbe zu hell? So retten Sie sie

Sie müssen Ihre Marke nicht aufgeben. Nutzen Sie die helle Farbe als Fläche oder Akzent und setzen Sie darauf dunklen Text. Für Text und Links verwenden Sie eine dunklere Variante derselben Farbe. Mit dem WebAIM-Checker können Sie die Helligkeit schrittweise verringern, bis 4,5:1 erreicht ist. In Shopify Dawn hinterlegen Sie das im Farbschema – siehe Dawn barrierefrei machen.

Kontrast ist nicht alles

Informationen dürfen außerdem nicht nur über Farbe vermittelt werden (WCAG 1.4.1): Links im Fließtext brauchen z. B. eine Unterstreichung, Fehlerfelder einen Text. Die gesamte Liste finden Sie in der BFSG-Checkliste und den WooCommerce-Fixes.

Quellen

Häufige Fragen

Welcher Kontrast ist nach WCAG 2.1 AA vorgeschrieben?

Mindestens 4,5:1 für normalen Text, 3:1 für großen Text sowie 3:1 für Bedienelemente, Fokusrahmen und informative Grafiken.

Mit welchem Tool prüfe ich den Kontrast am schnellsten?

Für einzelne Farbpaare mit dem WebAIM Contrast Checker, für ganze Seiten mit dem Barrierefreiheitsinspektor in Firefox oder mit WAVE, für Text auf Bildern mit dem Colour Contrast Analyser.

Gilt die Kontrastanforderung auch für Logos?

Nein. Text, der Teil eines Logos oder Markennamens ist, hat keine Mindestanforderung an den Kontrast.