Farbkontrast-Prüfer (WCAG)
Prüfen Sie das Kontrastverhältnis von Text- und Hintergrundfarbe nach WCAG 2.2 AA und AAA für normalen Text, großen Text und Bedienelemente und erhalten Sie die nächstgelegenen Farben, die bestehen
Tool wird geladen…
Wählen Sie eine Textfarbe und eine Hintergrundfarbe, um das Kontrastverhältnis nach WCAG 2.2 und die Ergebnisse für AA und AAA auf einmal zu erhalten. Wird eine Stufe nicht erreicht, schlägt die Seite die nächstgelegene bestehende Farbe vor, bei der nur die Helligkeit verändert ist. Nützlich, um zu prüfen, ob Text auf einer Webseite, in einer App oder in einer Präsentation gut lesbar ist.
So geht’s
- Legen Sie unter „Zwei Farben prüfen“ die „Textfarbe“ und die „Hintergrundfarbe“ mit dem Farbwähler oder durch Eingabe von HEX, rgb() oder hsl() fest.
- Geben Sie Ihren eigenen Text in „Vorschausatz“ ein, um ihn als normalen, großen und fetten Text sowie als Rahmen und Symbol zu sehen.
- Drücken Sie unter „Nächstgelegene Farben, die bestehen“ auf „Übernehmen“ neben „Textfarbe ändern“ oder „Hintergrund ändern“. Drücken Sie auf einen HEX-Wert, um ihn zu kopieren.
- Geben Sie unter „Palette prüfen“ 2 bis 12 Farben ein, um eine Tabelle aller Kombinationen und die Liste „Paare, die die Stufe erreichen“ zu erhalten.
So wird gerechnet
- Kontrastverhältnis = (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 und L2 die relativen Leuchtdichten der beiden Farben sind. Es reicht von 1:1 bis 21:1 und wird auf zwei Nachkommastellen abgerundet.
- Die Stufen folgen den WCAG-2.2-Kriterien 1.4.3 (AA: 4,5:1 für normalen Text, 3:1 für großen Text), 1.4.6 (AAA: 7:1 und 4,5:1) und 1.4.11 (3:1 für Bedienelemente). Großer Text ist 24px oder fett 18.66px oder mehr.
- Ein Vorschlag behält Farbton und Chroma in OKLCH bei und verändert nur die Helligkeit, bis die Stufe erreicht ist. Wenn keine Helligkeit sie erreichen kann, sagt die Seite das.
- Die letzten Farben, der Satz und die Palettenliste bleiben in diesem Browser gespeichert.
Häufige Fragen
- Was bedeutet ein Kontrastverhältnis von 4,5:1?
- Die relative Leuchtdichte der helleren Farbe plus 0,05 ist 4,5-mal so groß wie die der dunkleren Farbe plus 0,05. Das ist das Minimum für Text in normaler Größe auf Stufe AA.
- Besteht grauer Text #777777 auf Weiß?
- Sein Verhältnis ist 4,47:1, knapp unter 4,5:1, daher besteht nur die Stufe für großen Text. Eine Stufe dunkler, #767676, ergibt 4,54:1 und besteht AA.
- Was ist der Unterschied zwischen AA und AAA?
- AA verlangt 4,5:1 für normalen Text, AAA verlangt 7:1. Die meisten Websites streben AA an; AAA eignet sich für lange Lesetexte.
- Brauchen auch Schaltflächenrahmen und Symbole Kontrast?
- Ja. Nach WCAG 1.4.11 brauchen Bedienelemente und Grafiken mit Bedeutung mindestens 3:1 gegenüber ihrer Umgebung; die Zeile „Bedienelemente und Grafiken“ prüft das.