Farbkontrast prüfen

Ein Farbpaar prüfen

1. Gib jede Farbe als drei- oder sechsstelligen HEX-Wert ein oder nutze die Farbauswahl. Der Hintergrund muss einfarbig und deckend sein.
2. Lass die Deckkraft des Vordergrunds für deckenden Text bei 100 % oder gib einen niedrigeren Wert ein. Die Ergebnisse werden aktualisiert, sobald alle drei Werte gültig sind.
3. Lies das Verhältnis und die getrennten Ergebnisse für normalen Text, großen Text und Nicht-Text-Details. Prüfe den tatsächlichen Gestaltungskontext und kopiere bei Bedarf den Bericht mit seinen Einschränkungen.

Ergebnisse verstehen

Für normalen Text liegen die numerischen Schwellen bei 4,5:1 für AA und 7:1 für AAA. Die Berechnung vergleicht die relative Leuchtdichte, nicht die Namen der Farben.

Für großen Text gelten 3:1 für AA und 4,5:1 für AAA. Groß bedeutet mindestens 18 pt normal oder 14 pt fett beziehungsweise eine entsprechende Größe für andere Schriftsysteme: etwa 24 und 18,67 CSS-Pixel. Die tatsächliche Typografie muss geprüft werden.

Die Deckkraft des Vordergrunds verändert die wirksame Farbe auf dem gewählten Hintergrund. Bei 100 % ist er deckend; bei 0 % verschwindet er im Hintergrund und das Verhältnis beträgt 1:1. Ein transparenter Hintergrund wird nicht unterstützt.

Die Nicht-Text-Zeile mit 3:1 vergleicht dieses Paar für wichtige visuelle Details gegenüber einer angrenzenden Farbe. Alle Entscheidungen nutzen das ungerundete Verhältnis; zwei Nachkommastellen dienen nur der Lesbarkeit.

Beispiele zum Nachprüfen

Schwarz #000000 auf Weiß #FFFFFF mit 100 % Deckkraft ergibt 21:1 und erreicht alle fünf angezeigten numerischen Schwellen. Das Tauschen deckender Farben ändert das Verhältnis nicht.

Grau #777777 auf Weiß ergibt etwa 4,48:1. Es erreicht nicht 4,5:1 für normalen Text auf AA, übersteigt aber 3:1 für großen Text auf AA.

Schwarz mit 50 % Deckkraft auf Weiß ergibt in dieser sRGB-Berechnung etwa 3,98:1. Geringere Deckkraft kann den Kontrast auch bei einem ursprünglich kontrastreichen deckenden Paar reduzieren.

Ein Farbpaar ist nur ein Teil der Barrierefreiheit

Das Werkzeug bewertet einfarbige sRGB-Farben mit deckendem Hintergrund und optionaler Deckkraft des Vordergrunds. Es untersucht keine Seite oder Schrift, entnimmt keine Farben aus Bildern oder Verläufen, simuliert kein Farbsehen und bewertet nicht alle WCAG-Anforderungen und Ausnahmen.

Ein erreichter numerischer Schwellenwert zertifiziert keine Seite und kein Produkt als barrierefrei. Prüfe tatsächliche Textgröße und Schriftstärke, angrenzende Farben, aussagekräftige Formen und Zustände sowie weitere Anforderungen. Darstellung und Kantenglättung können die Lesbarkeit beeinflussen.

Berechnung im Browser

Der Vergleich erfolgt im Browser ohne vom Werkzeug hinzugefügte Uploads oder gespeicherten Farbverlauf. Der aktuelle Bericht wird nur auf Anfrage in die Zwischenablage geschrieben. Übliche Website-Dienste und Einwilligungseinstellungen gelten getrennt.