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.
WCAG 2.2 Mindestkontrast (offizielles W3C): 4.5:1, 3:1 und Nicht-Text 3:1
Die offiziellen WCAG-2.2-Mindestkontrastanforderungen in Accessibility-Audits sind klar: Normalgroßer Text benötigt mindestens 4.5:1, großskaliger Text mindestens 3:1 und nicht-textuelle UI-Komponenten sowie grafische Objekte mindestens 3:1 gegenüber angrenzenden Farben. Diese Schwellenwerte sind in WCAG 2.2 definiert und werden üblicherweise von Accessibility-Testtools validiert.
| Elementtyp | WCAG-Mindestwert | Erfolgskriterium |
|---|---|---|
| Normalgroßer Text | 4.5:1 | 1.4.3 (AA) |
| Großskaliger Text | 3:1 | 1.4.3 (AA) |
| Nicht-textuelle UI-Komponenten und grafische Objekte | 3:1 | 1.4.11 (AA) |
WCAG 2.2 vs. WCAG 2.1: Kontrastregeln
WCAG 2.2 verwendet dieselben Kern-Kontrastverhältnisse wie WCAG 2.1, daher ändern sich Ihre Pass/Fail-Grenzen nicht. Was sich für leistungsstarke Teams ändert, ist die Umsetzung: Produkt-, Design- und QA-Teams, die WCAG 2.2 im Workflow verankern, kommen schneller von Scan-Ergebnissen zu freigegebenen Korrekturen, senken Release-Risiken und schützen conversion-kritische Oberflächen.
WCAG-Kontrastanforderungen nach Elementtyp
WCAG-Kontrastanforderungen unterscheiden sich je nach Elementtyp. Fließtext, Bildunterschriften und Hilfetexte werden als Textkontrast bewertet. Buttons, Formulargrenzen, Fokusindikatoren, Icons und Statusgrafiken werden als Nicht-Text-Kontrast bewertet. Für praxisnahe Compliance sollten Sie beide Kategorien im Design-QA prüfen, vor dem Release erneut bestätigen und nach jeder Palette- oder Komponentenänderung nochmals testen.
WCAG-Farbkontrast-Checker
Ob Ihr Team color oder colour verwendet, die WCAG-Regeln bleiben gleich. Dieser WCAG-Farbkontrast-Checker bewertet Vorder- und Hintergrund gegen offizielle W3C-Schwellen und liefert ein klares Pass/Fail-Ergebnis, mit dem Designer und Entwickler sofort arbeiten können.
ADA-Farbkontrastanforderungen und WCAG-Mapping
In US-Accessibility-Programmen wird ADA-Remediation in der Praxis häufig an WCAG-Erfolgskriterien gemessen. Wenn Ihre Organisation einen ADA-Prozess für Kontrastprüfungen benötigt, nutzen Sie WCAG-Schwellen als messbare Baseline und dokumentieren Sie Nachweise in Design-Reviews, QA-Freigaben und Release-Dokumentation.
WCAG-Checker vs. Kontrast-Checker
Ein Kontrast-Checker prüft einen kritischen Bereich: lesbare Farbverhältnisse für Text und UI-Elemente. Ein vollständiger WCAG-Checker deckt einen breiteren Compliance-Umfang ab, einschließlich Tastaturunterstützung, Formularsemantik, Labels, Überschriften und ARIA-Verhalten. Starke Accessibility-Teams nutzen beides: schnelle Kontrastprüfungen im Tagesgeschäft sowie umfassende WCAG-Tests vor dem Release.
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.