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.
Color Contrast Checker
The quick brown fox jumps over the lazy dog
Contrast Ratio
8.67:1
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.).
WCAG-Farbkontrast für Web-Barrierefreiheit verstehen
Ein Farbkontrast-Checker ist ein unverzichtbares Werkzeug für Webdesigner und Entwickler, um sicherzustellen, dass ihre digitalen Inhalte den Barrierefreiheitsstandards entsprechen. WCAG-Farbkontrast-Richtlinien helfen dabei, Schnittstellen zu erstellen, die für jeden lesbar und nutzbar sind, einschließlich Menschen mit Sehbehinderungen.
Was ist WCAG-Farbkontrast?
Die WCAG (Web Content Accessibility Guidelines) definieren spezifische Kontrastverhältnisse zwischen Text- und Hintergrundfarben, um die Lesbarkeit sicherzustellen. Der Kontrast-Checker berechnet diese Verhältnisse anhand relativer Luminanzwerte und bietet eine mathematische Messung, wie unterscheidbar Farben voneinander sind. Die Einhaltung dieser Standards ist entscheidend für die WCAG 2.1-Konformität und wird durch Vorschriften wie das Europäische Barrierefreiheitsgesetz (EAA) über EN 301 549 referenziert.
Wie funktioniert ein Kontrast-Checker?
Unser WCAG-Farbkontrast-Checker analysiert den Luminanzunterschied zwischen Vordergrund- (Text-) und Hintergrundfarben. Er berechnet automatisch das Kontrastverhältnis und vergleicht es mit den WCAG-Erfolgskriterien 4,5:1 für normalen Text (Level AA), 3:1 für großen Text und 7:1 für erweiterten Kontrast (Level AAA). Dieses sofortige Feedback hilft Ihnen, fundierte Designentscheidungen zu treffen, ohne manuelle Berechnungen.
Best Practices für Farbkontrast
Beginnen Sie früh im Designprozess mit dem Testen Ihrer Markenfarben mit einem Kontrast-Checker. Stellen Sie sicher, dass alle Textelemente, Buttons, Formulareingaben und Icons die Mindestanforderungen erfüllen. Verlassen Sie sich nicht nur auf Farbe, um Informationen zu vermitteln – verwenden Sie auch Textlabels, Icons oder Muster. Regelmäßiges Testen mit einem WCAG-Kontrast-Checker hilft, die Barrierefreiheitsstandards während des gesamten Projektlebenszyklus aufrechtzuerhalten.
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.
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.