Farbkontrast-Prüfer
Vorschau
Schafft Raum für gute Ideen.
Ein wenig Klarheit kann viel bewirken.
Sammeln Sie Ihre Ideen, behalten Sie den Überblick über die Details und schaffen Sie sich Zeit für die wirklich wichtigen Aufgaben. Alles, was Sie brauchen, an einem Ort.
Gemacht für den Alltag.
Prüfen Sie den Kontrast zwischen Text- und Hintergrundfarben.
Zwei Farben können in einem Mockup ansprechend wirken, aber bei kleinen Texten oder Steuerelementen schwer lesbar sein. Geben Sie eine Vorder- und eine Hintergrundfarbe im HEX-Code ein, um deren Kontrastverhältnis und die Lesbarkeit der Kombination im Vergleich zu den WCAG 2.x-Textstandards AA und AAA zu überprüfen. Die Vorschau zeigt die Farben in typischen Text-, Schaltflächen- und Benutzeroberflächenkontexten, sodass Sie neben dem Zahlenwert auch die Wirkung der Farbkombination beurteilen können.
Was bedeuten die WCAG-Kontrastergebnisse?
- Normaler Text: mindestens 4.5:1 für AA und 7:1 für AAA.
- Großer Text: mindestens 3:1 für AA und 4.5:1 für AAA. Nach WCAG gilt Text ab 24 px in normaler Schrift oder etwa 18,7 px in Fettschrift als groß.
- Aussagekräftige Bedienelemente und grafische Objekte: Gegenüber angrenzenden Farben kann ein Mindestkontrast von 3:1 gelten.
Das Ergebnis wird anhand des ungerundeten Verhältnisses ermittelt, auch wenn der angezeigte Wert weniger Dezimalstellen hat. Ein bestandenes Farbpaar bedeutet nicht, dass die gesamte Seite oder Komponente WCAG-konform ist. Weitere Farbkombinationen, Zustände, Fokusdarstellungen, Semantik und Interaktionen müssen ebenfalls geprüft werden.
Wie man ein Farbpaar testet
- Geben Sie die HEX-Werte für Vorder- und Hintergrund ein oder wählen Sie Farben über die Farbauswahl.
- Lesen Sie das Kontrastverhältnis sowie die Ergebnisse für normalen Text, großen Text und die Benutzeroberfläche.
- Überprüfen Sie die Live-Vorschau der Benutzeroberfläche. Ändern Sie eine Farbe und vergleichen Sie das Ergebnis, bevor Sie es auf Ihr Design anwenden.
Häufige Fragen
Ist ein Seitenverhältnis von 4.5:1 für jede Textart ausreichend?
Dies ist der WCAG-AA-Kontrastminimumwert für normalen Text. AAA hat einen höheren Zielwert von 7:1; für große Texte gelten andere Schwellenwerte.
...Bedeutet ein AA-Pass, dass meine Website barrierefrei ist?
Nein. Dieses Tool prüft nur ein angegebenes Farbpaar. Die Barrierefreiheit hängt auch von anderen Vorder-/Hintergrundpaaren und vielen weiteren Anforderungen ab, die über den Kontrast hinausgehen.
Kann ich Transparenz, Farbverläufe oder eine ganze Webseite testen?
Nicht in dieser Version. Der Checker wertet ein Paar einfarbiger HEX-Farben anhand der WCAG 2.x-Kontrastberechnung aus; es handelt sich nicht um einen Webseitenscanner oder einen APCA/WCAG 3-Test.
...