Farbkontrast-Prüfer

1. Geben Sie den HEX-Wert der Vordergrundfarbe ein oder wählen Sie die Farbe mit dem Farbwähler aus.
2. Geben Sie den HEX-Wert der Hintergrundfarbe ein oder verwenden Sie den zugehörigen Farbwähler.
3. Prüfen Sie das aktuelle Kontrastverhältnis.
4. Sehen Sie sich die WCAG-2.2-Ergebnisse für normalen und großen Text sowie zutreffende Nicht-Text-Elemente an.
5. Prüfen Sie eine Vorschau mit Beispieltext und Schaltfläche in den gewählten Farben.
6. Mit Tauschen wechseln Vorder- und Hintergrundfarbe; Zurücksetzen stellt die Standardfarben wieder her.

Farbkontrast-Prüfer

Farbkontrast beschreibt den Unterschied der relativen Helligkeit zweier Farben. Ausreichender Kontrast kann Text besser vom Hintergrund abheben. Mit diesem Prüfer testen Sie eine Vorder- und Hintergrundkombination, bevor Sie sie auf einer Website, in einer Anwendung, einem Designsystem oder einer anderen Oberfläche verwenden.

Geben Sie HEX-Werte ein oder wählen Sie Farben mit den Farbwählern aus. Das Kontrastverhältnis und die WCAG-2.2-Ergebnisse werden bei Änderungen aktualisiert.

Farbkontrast prüfen

Wählen Sie eine Vordergrundfarbe für Text oder ein anderes Element und eine Hintergrundfarbe. Geben Sie HEX-Werte ein oder nutzen Sie die Farbwähler. Der Prüfer berechnet das Kontrastverhältnis und zeigt die Ergebnisse für die zutreffenden WCAG-Schwellenwerte an.

Was ist ein Kontrastverhältnis?

Das Kontrastverhältnis beschreibt den relativen Unterschied zwischen zwei Farben und wird als Verhältnis angegeben, zum Beispiel 4,5:1. Es reicht von 1:1 ohne Kontrastunterschied bis 21:1, dem maximalen Kontrast zwischen Schwarz und Weiß. Ein höherer Wert bedeutet meist einen größeren Unterschied. Der erforderliche Schwellenwert hängt jedoch von der Verwendung ab: normaler Text, großer Text oder zutreffende Nicht-Text-Inhalte.

WCAG-2.2-Kontrastanforderungen

Für normalen Text verlangt WCAG AA mindestens 4,5:1 und AAA mindestens 7:1. Für großen Text sind es bei AA 3:1 und bei AAA 4,5:1. Für zutreffende UI-Komponenten und aussagekräftige grafische Objekte gilt nach dem einschlägigen Nicht-Text-Kriterium ein Mindestwert von 3:1. Der Prüfer zeigt diese Ergebnisse getrennt an.

Was gilt als großer Text?

Für den WCAG-Kontrast gilt Text ab 18 Punkt oder 14 Punkt in Fettschrift als groß. Punktgrößen und CSS-Pixel sind nicht in jedem Fall direkt austauschbar. Berücksichtigen Sie daher die tatsächliche Darstellung. Erfüllt der Text die Definition nicht, verwenden Sie die Schwellenwerte für normalen Text.

AA- und AAA-Ergebnisse verstehen

AA und AAA sind unterschiedliche WCAG-Konformitätsstufen. AAA verlangt einen stärkeren Textkontrast. Eine Kombination mit 5:1 erfüllt AA für normalen Text, aber nicht AAA; für großen Text erfüllt sie beide Stufen. Jede Pass- oder Fail-Angabe bezieht sich auf den jeweiligen angezeigten Schwellenwert.

Vorschau, Tauschen und Zurücksetzen

Die Vorschau zeigt Beispieltext und eine Schaltfläche in den ausgewählten Farben. Nutzen Sie sie zusammen mit dem Zahlenwert, um die Kombination visuell zu beurteilen. Tauschen wechselt Vorder- und Hintergrundfarbe; Zurücksetzen stellt die Standardfarben wieder her. Die Ergebnisse werden bei Farbänderungen aktualisiert.

Was ein bestandenes Ergebnis aussagt

Ein bestandenes Ergebnis bedeutet, dass das Farbpaar diesen bestimmten Kontrastschwellenwert erfüllt. Es bedeutet nicht, dass eine gesamte Website oder Oberfläche barrierefrei ist. Dazu gehören auch Typografie, Textgröße und Abstände, Fokusindikatoren, Tastaturnavigation, Beschriftungen, Alternativtexte, Struktur, Animationen und Screenreader-Unterstützung. Wichtige Informationen sollten nicht allein durch Farbe vermittelt werden.

Wann ein Farbkontrast-Prüfer hilfreich ist

Prüfen Sie Text- und Hintergrundfarben beim Gestalten einer Website, vergleichen Sie Textfarben für bessere Lesbarkeit, kontrollieren Sie Schaltflächen und ihre Abgrenzungen, testen Sie zutreffende Steuerelemente und Grafiken oder untersuchen Sie Farbkombinationen in einer bestehenden Oberfläche. Eine frühzeitige Kontrastprüfung hilft, anpassungsbedürftige Kombinationen zu erkennen.

Vergleichen Sie Vorder- und Hintergrundfarben mit den WCAG-2.2-AA- und -AAA-Schwellenwerten für normalen und großen Text sowie der zutreffenden Nicht-Text-Anforderung von 3:1.

Geben Sie Vorder- und Hintergrundfarben als HEX-Werte ein oder wählen Sie sie mit den Farbwählern aus. Das Ergebnis wird bei Änderungen aktualisiert.

Prüfen Sie Beispieltext und eine Schaltfläche in den gewählten Farben, um die Kombination zusätzlich zum Zahlenwert visuell zu beurteilen.

Mit Tauschen wechseln Vorder- und Hintergrundfarbe; Zurücksetzen stellt die Standardfarben wieder her.