Farbkontrastprüfer
Stellen Sie sicher, dass Ihre Texte und UI-Elemente die WCAG 2.1-Kontrastanforderungen erfüllen — ein wesentlicher Bestandteil der EAA/EN 301 549-Konformität. Fügen Sie Markenfarben ein, prüfen Sie Kombinationen und erhalten Sie eine eindeutige Bewertung für normalen Text, große Texte und UI-Komponenten.
Vertraut von Organisationen in ganz Europa, die an der Erfüllung von WCAG- und EAA-Anforderungen arbeiten
Was ist ein Kontrastprüfer und warum nutzen?
Ausreichender Kontrast verbessert die Lesbarkeit für alle — insbesondere für Menschen mit Sehschwäche, Farbsehstörungen oder auf Geräten mit geringer Displayqualität.
Überprüfen Sie 1.4.3 Kontrast (Minimum), 1.4.6 Kontrast (Erweitert) und 1.4.11 Nicht-Text-Kontrast für UI-Komponenten und Grafiken.
Das Europäische Barrierefreiheitsgesetz verweist auf EN 301 549, welche wiederum auf WCAG verweist — Kontrast ist ein Schlüsselaspekt zur Erfüllung der Verpflichtungen.
Barrierefreie Farbschemata erzeugen robuste, lesbare Oberflächen, die in hellen/dunklen Themen und auf verschiedenen Geräten funktionieren.
WCAG 2.1 Kontrastgrenzwerte (Schnellreferenz)
Minimales Verhältnis: 4,5:1 (Text unter 24 px regulär / 19 px fett).
Minimales Verhältnis: 3:1 (≥ 24 px regulär oder ≥ 19 px fett).
Minimaler Kontrast zu benachbarten Farben: 3:1 (Fokusrahmen, Formulare, Icons etc.).
Kontrastprüfer testen
Geben Sie Vorder- und Hintergrundfarben (HEX) ein. Das Tool berechnet das Kontrastverhältnis und zeigt bestanden/nicht bestanden für WCAG-Stufen. Ergebnisse aktualisieren sich während der Eingabe.
Color Contrast Checker
Example text preview
Contrast ratio: 8.67:1
Normal text
Contrast Ratio:8.67:1
Normal Text (WCAG AA)
Pass ≥ 4.5
AAA
Pass ≥ 7.0
FAQ
Ändern sich die Kontrastverhältnisse in WCAG 2.1?
Erfordert EAA WCAG-Kontrast?
Was zählt als „großer Text“?
Integrieren Sie Kontrastprüfungen in Ihren Workflow
Führen Sie Kontrastprüfungen bei Design- oder Code-Reviews durch. Kombinieren Sie mit automatisiertem Scannen, um Probleme im großen Maßstab zu erkennen.