Kontrastprüfer
Wählen Sie Text- und Hintergrundfarben aus, um ihr Kontrastverhältnis anhand der WCAG-AA- und AAA-Schwellenwerte zu prüfen. Sehen Sie separate Ergebnisse für normalen und großen Text sowie eine Vorschau mit den ausgewählten Farben.
Möglichkeiten
Verhältnis zweier Farben prüfen
Wählen Sie Text- und Hintergrundfarben aus und sehen Sie ihr Kontrastverhältnis mit zwei Dezimalstellen.
AA- und AAA-Schwellenwerte vergleichen
Sehen Sie separate Ergebnisse für normalen und großen Text sowie eine Vorschau mit den ausgewählten Farben.
Mit Schwarz und Weiß vergleichen
Öffnen Sie die optionalen Details, um die Textfarbe mit schwarzen und weißen Hintergründen zu vergleichen.
Anleitung
Textfarbe eingeben
Wählen Sie HEX, RGB, HSL, HSV oder CMYK und geben Sie die Textfarbe ein. Wenn Sie ein Farbfeld auswählen, wechselt die Eingabe zu HEX.
Hintergrund auswählen
Geben Sie einen drei- oder sechsstelligen HEX-Wert ein oder verwenden Sie den Farbwähler. Das Präfix # ist optional.
Kontrast prüfen
Wählen Sie „Kontrast prüfen“, um Verhältnis, Textvorschau und AA-/AAA-Ergebnisse zu prüfen. Prüfen Sie erneut, wenn Sie eine der Farben ändern.
Nützlich, wenn
Fließtext auf einem Hintergrund prüfen
Geben Sie die auf einer Seite verwendeten Farben ein und prüfen Sie, ob normaler Text das erforderliche Verhältnis erreicht.
Überschriftenfarben vergleichen
Verwenden Sie beim Prüfen eines Farbpaares für eine Überschrift das Ergebnis und die Vorschau für großen Text.
Ergebnisse lesen
AA- und AAA-Verhältnisse
AA erfordert mindestens 4,5:1 für normalen und 3:1 für großen Text. AAA erfordert 7:1 für normalen und 4,5:1 für großen Text. Ergebnisse basieren auf dem ungerundeten Verhältnis.
Was als großer Text gilt
Großer Text hat mindestens 18 pt oder 14 pt fett. In CSS entspricht das 24px oder ungefähr 18,7px fett. Die Vorschau verwendet normal gewichteten Text in 16px und 24px.
Umfang der Prüfung
Dies prüft den Textkontrast zwischen zwei deckenden sRGB-Farben. Bildhintergründe, Alpha-Überblendungen, Nicht-Text-Elemente oder die Konformität der gesamten Seite werden nicht bewertet.
Fragen und Antworten
Bedeutet ein bestandenes Verhältnis, dass die ganze Seite konform ist?
Dieses Ergebnis betrifft nur den Textkontrast der beiden ausgewählten Farben. Die Konformität der gesamten Seite muss separat beurteilt werden.
Was zeigt der Schwarz-Weiß-Vergleich?
Es vergleicht die ausgewählte Textfarbe mit Schwarz und Weiß und zeigt, bei welcher Farbe das Verhältnis höher ist. Dies ist unabhängig vom Ergebnis für den ausgewählten Hintergrund.
Kann ich transparenten Text oder Text auf einem Bild prüfen?
Alpha und Bildhintergründe werden nicht unterstützt. Geben Sie deckende Text- und Hintergrundfarben ein.
Eingabe und Ausgabe
- Textfarbe
- HEX-, RGB-, HSL-, HSV- oder CMYK-Werte oder der Farbwähler. CMYK ist ein Schätzwert ohne ICC-Profil.
- Hintergrund
- Drei- oder sechsstelliger HEX-Wert oder der Farbwähler. Alpha wird nicht unterstützt.
- Ergebnis
- Kontrastverhältnis, AA-/AAA-Ergebnisse für normalen und großen Text sowie Textvorschau. Ergebnisse werden ohne Speicherfunktion angezeigt.