Messen Sie den WCAG-Kontrast zwischen zwei Farben

Mit Farbkontrast können Designer und Frontend-Entwickler eine Farbkombination vor der Freigabe auf Barrierefreiheit prüfen. Messen Sie den WCAG-Kontrast zwischen zwei Farben.

Messen Sie den WCAG-Kontrast zwischen zwei Farben. Das Werkzeug ist im Browser kostenlos und zeigt das Ergebnis ohne Anmeldung an.

Bedienung

Geben Sie die Hintergrundfarbe ein, zum Beispiel als Hexadezimalcode.
Fügen Sie die Text- oder Elementfarbe hinzu, die Sie mit diesem Hintergrund vergleichen möchten.
Führen Sie die Prüfung aus, um das Kontrastverhältnis zwischen den beiden Farben zu erhalten.
Lesen Sie die angezeigten WCAG-Schwellenwerte für normalen Text, großen Text und Schnittstellenelemente.
Testen Sie ein weiteres Farbpaar, wenn das erste Ergebnis Ihre Anforderungen nicht erfüllt.

Beispiel

Das Beispiel vergleicht eine dunkle Farbe mit einer hellen. Das Tool berechnet das Kontrastverhältnis und zeigt die relevanten WCAG-Schwellenwerte an. Prüfen Sie, ob das Verhältnis für normalen Text, großen Text oder Schnittstellenelemente ausreicht, und testen Sie dann ein weiteres Paar, wenn Ihr Designsystem dies zulässt. Das Ergebnis hilft Ihnen bei der Entscheidung vor der Veröffentlichung.

Eingabe

#0F172A
#FFFFFF

Grenzen und Formate

Das Tool vergleicht zwei Farben, nicht die tatsächliche Lesbarkeit eines Bildes oder Fotos.
Transparenz, Farbverläufe und Überlagerungen werden nicht immer dargestellt.
Ein gutes Verhältnis allein validiert nicht jeden Barrierefreiheitsaspekt einer Seite.
Prüfen Sie die Farben für Hover-, Aktiv- und Deaktiviert-Zustände separat.
Angezeigte Werte sollten je nach Textgröße und Zweck interpretiert werden.

Wo die Verarbeitung stattfindet

Die gesamte Kontrastberechnung läuft in Ihrem Browser. Die von Ihnen eingegebenen Farbcodes bleiben auf Ihrem Gerät und werden nirgendwohin gesendet. Das Ergebnis erscheint direkt nach der Prüfung. Sie können die Felder leeren oder den Tab schließen, ohne diese Werte zu behalten.

Häufige Fragen

Welches Verhältnis sollte ich für Fließtext anstreben?

Die WCAG-Schwellenwerte hängen von Textgröße und Zweck ab. Für normalen Text verlangt Stufe AA in der Regel einen höheren Kontrast als für großen Text. Lesen Sie die vom Tool angezeigten Hinweise für Ihren konkreten Fall und prüfen Sie jeden Textstil separat.

Kann ich Farbnamen wie Rot oder Blau verwenden?

Das Feld erwartet Werte, die das Tool lesen kann, insbesondere Hexadezimal-Farbcodes. Wenn ein Name nicht erkannt wird, ersetzen Sie ihn durch den entsprechenden Hexadezimalcode und führen Sie die Prüfung erneut aus.

Prüft das Tool den Kontrast auf einem Screenshot?

Nein, es berechnet den Kontrast zwischen zwei eingegebenen Farben. Es liest kein Bild und keine vollständige Seite. Notieren Sie für einen Entwurf die verwendeten Farbcodes und testen Sie jedes wichtige Paar separat.