Kontrastverhältnis zwischen Text- und Hintergrundfarbe prüfen

Wofür der Kontrast-Checker geeignet ist

Mit dem Contrast Checker vergleichen Sie eine Vordergrundfarbe mit einer Hintergrundfarbe. Das eignet sich beispielsweise für Text in einer Benutzeroberfläche, in einem Dokument oder in einer Grafik. Statt nur nach dem persönlichen Farbeindruck zu urteilen, erhalten Sie ein Kontrastverhältnis und darauf bezogene Einschätzungen für festgelegte Schwellenwerte.

Die Vordergrundfarbe kann etwa die Textfarbe sein, während die Hintergrundfarbe die Fläche hinter dem Text bezeichnet. Beide Angaben sind optional. Wenn Sie keine Werte eintragen, werden Schwarz als Vordergrundfarbe und Weiß als Hintergrundfarbe verwendet. Sie können diese Standardfarben nutzen, um eine erste Prüfung zu starten, oder eigene Farben in einem unterstützten Format eingeben.

Die Ausgabe betrachtet vier Schwellenwerte: 4,5 und 7,0 für normalen Text sowie 3,0 und 4,5 für großen Text. Damit lässt sich die Wirkung einer konkreten Farbkombination anhand dieser festgelegten Werte einordnen. Die Ergebnisse beziehen sich auf das Verhältnis der beiden eingegebenen Farben, nicht auf die übrige Gestaltung Ihres Dokuments oder Ihrer Oberfläche.

Farben eingeben und Prüfung starten

1. Legen Sie fest, welche beiden Farben Sie vergleichen möchten. Tragen Sie die Farbe im Vordergrundfeld ein, beispielsweise die Textfarbe, und verwenden Sie das Hintergrundfeld für die dahinterliegende Fläche. Falls Sie eine Standardprüfung wünschen, können Sie eines oder beide Felder leer lassen.
2. Verwenden Sie für eigene Angaben eine dreistellige oder sechsstellige Hexadezimalangabe mit vorangestelltem #, etwa #fff oder #1a1a1a. Alternativ ist RGB-Text möglich, der mit rgb beginnt und drei durch Kommas getrennte Dezimalwerte enthält. Farbnamen und beliebige CSS-Farbsyntax sollten Sie nicht anstelle dieser Formen einsetzen.
3. Starten Sie die Prüfung, nachdem Sie die gewünschten Werte eingetragen haben. Ein leeres Vordergrundfeld wird als #000000 interpretiert, ein leeres Hintergrundfeld als #ffffff. Wenn nur ein Feld leer bleibt, wird also nur für diese Seite der jeweilige Standardwert verwendet.
4. Sehen Sie sich das gemeldete Kontrastverhältnis und die dazugehörigen Einschätzungen an. Vor und nach einer Farbangabe stehende Leerzeichen werden entfernt. Außerdem werden Großbuchstaben in der Eingabe vor der Verarbeitung vereinheitlicht. Eine Eingabe wie #ABC wird dadurch in derselben normalisierten Form betrachtet wie #abc.
5. Prüfen Sie bei einem Fehlerhinweis zuerst die Schreibweise beider Farben. Wenn eine der Angaben nicht verarbeitet werden kann, liefert die Prüfung zwar ein Ergebnis mit einer Fehlerangabe, aber nicht die normalen Kontrast-Einschätzungen. Korrigieren Sie dann das Format und starten Sie die Prüfung erneut.
6. Bei RGB-Angaben sollten Sie drei durch Kommas getrennte Dezimalwerte verwenden. Die Werte werden als Dezimalzahlen ohne ausdrücklich geprüfte Bereichsgrenze eingelesen. Verlassen Sie sich deshalb nicht darauf, dass jede denkbare RGB-Schreibweise wie eine allgemeine CSS-Angabe behandelt wird.

Ergebnis richtig einordnen

Das Kontrastverhältnis wird bei gültigen Farben zunächst auf zwei Dezimalstellen gerundet. Erst danach werden die Schwellenwert-Einschätzungen vorgenommen. Für normalen Text werden die Werte 4,5 und 7,0 betrachtet; für großen Text sind es 3,0 und 4,5. Lesen Sie die jeweilige Einschätzung daher zusammen mit der Textkategorie, für die sie ausgegeben wird.

Ein günstigeres Ergebnis für großen Text lässt sich nicht automatisch als passende Bewertung für normalen Text lesen, weil für beide Kategorien unterschiedliche Schwellenwerte gelten. Ebenso beschreibt das Verhältnis nur die geprüfte Vordergrund-Hintergrund-Kombination. Schriftgröße, Schriftgewicht, Abstände, weitere Farben, Zustände und die Anordnung einer Seite werden durch diese Prüfung nicht beurteilt. Die Ausgabe ersetzt deshalb keine umfassende Prüfung eines Designs oder eine allgemeine Beurteilung der Barrierefreiheit.

Wenn Vorder- und Hintergrundfarbe identisch sind, wird ein Verhältnis von 1,0 gemeldet. Bei zwei gültigen identischen Eingaben können Sie die vier Einschätzungen weiterhin im Zusammenhang mit diesem Verhältnis lesen. Fehlt die normale Bewertung dagegen und erscheint eine Fehlerangabe, ist mindestens eine Farbe nicht parsebar. Kontrollieren Sie dann zuerst das Präfix, die zulässige Hexadezimalform oder die drei RGB-Komponenten.

Für die Einordnung Ihrer Gestaltung ist außerdem wichtig, welche Textart Sie tatsächlich einsetzen. Vergleichen Sie die Ausgabe nicht nur mit einem einzelnen Zahlenwert, sondern ordnen Sie sie dem vorgesehenen normalen oder großen Text zu. Andere CSS-Farbsyntax, Farbnamen sowie Hexadezimalformen außerhalb der drei- und sechsstelligen Schreibweisen sollten Sie nicht voraussetzen.

Praktisches Beispiel

Sie möchten prüfen, wie gut dunkelgrauer Text auf weißem Hintergrund die festgelegten Kontrastschwellenwerte erreicht.

Geben Sie als Vordergrundfarbe #1a1a1a und als Hintergrundfarbe #ffffff ein und starten Sie die Prüfung.

Das Ergebnis enthält ein auf zwei Dezimalstellen gerundetes Kontrastverhältnis sowie vier Schwellenwert-Einschätzungen für normalen und großen Text.

Einschränkungen

• Die Ausgabe bewertet die vier festgelegten Kontrastschwellenwerte für die eingegebenen Farben. Sie ersetzt keine umfassende Prüfung eines Designs oder eine allgemeine Beurteilung der Barrierefreiheit.

Häufige Fehler

• Fehler: Eine Farbe wird als CSS-Farbname oder in einer nicht unterstützten Schreibweise eingegeben. Korrektur: Ersetzen Sie die Angabe durch eine drei- oder sechsstellige Hexadezimalangabe mit # oder durch RGB-Text mit drei durch Kommas getrennten Dezimalwerten.

Häufige Fragen

Welche Farben werden ohne Eingabe geprüft?

Wenn beide Felder leer bleiben, wird Schwarz als Vordergrundfarbe und Weiß als Hintergrundfarbe verwendet. Bleibt nur eines der Felder leer, gilt der jeweilige Standardwert nur für diese Farbe.

Welche Farbformate akzeptiert der Checker?

Verwenden Sie eine dreistellige oder sechsstellige Hexadezimalangabe mit # oder RGB-Text, der mit rgb beginnt und drei durch Kommas getrennte Dezimalwerte enthält. Farbnamen und andere CSS-Schreibweisen sind nicht als unterstützt belegt.

Was passiert bei identischen Vorder- und Hintergrundfarben?

Wenn beide gültigen Eingaben dieselbe Farbe darstellen, wird ein Kontrastverhältnis von 1,0 gemeldet. Die vier Schwellenwert-Einschätzungen beziehen sich dann weiterhin auf dieses Verhältnis.