So verwenden Sie Kontrastprüfer
- 1
Zwei Farben eingeben
Geben Sie die Textfarbe und die Hintergrundfarbe als HEX, rgb(), hsl() oder oklch() ein, oder öffnen Sie das runde Farbfeld, um eine Farbe auszuwählen.
- 2
Ergebnis ablesen
Das Verhältnis und fünf Zeilen mit „Bestanden“ oder „Nicht bestanden“ zeigen AA und AAA für normalen und großen Text sowie die 3:1-Regel für Symbole und Rahmen.
- 3
Korrektur übernehmen
Wenn eine Stufe nicht bestanden wird, verwenden Sie den nächsten dunkleren oder helleren Text bzw. Hintergrund, der besteht, und kopieren Sie dann den neuen Wert.
Limits und Pro
Kostenlos und unbegrenzt: beliebig viele Prüfungen, 5 WCAG-2.2-Kriterien pro Farbpaar, 2 Korrekturvorschläge pro nicht bestandener Stufe und ein Raster mit bis zu 7 Farben.
Über Kontrastprüfer
Dieser Kontrastprüfer misst anhand der Formel für die relative Luminanz aus WCAG 2.2, wie weit zwei Farben in ihrer Helligkeit auseinanderliegen. Es ist dieselbe Berechnung, die auch Barrierefreiheits-Prüfungen im Browser und Design-Plugins verwenden. Das Ergebnis ist ein Verhältnis zwischen 1:1 (identisch) und 21:1 (Schwarz auf Weiß). Erfolgskriterium 1.4.3 verlangt auf Stufe AA 4,5:1 für Fließtext und 3:1 für großen Text; 1.4.6 erhöht das für AAA auf 7:1 und 4,5:1; 1.4.11 verlangt 3:1 für aussagekräftige Elemente ohne Text, etwa Fokusrahmen, Umrandungen von Eingabefeldern und Linien in Diagrammen.
Eine Live-Vorschau zeigt Text in beiden Größen, eine Schaltfläche mit Rahmen und ein Symbol in Ihren Farben, sodass Sie neben der Zahl auch die Lesbarkeit beurteilen können. Die Verhältnisse werden auf zwei Dezimalstellen abgeschnitten statt gerundet, denn ein Paar mit 4,496:1 erfüllt die Anforderung von 4,5:1 nicht. Besteht eine Stufe nicht, durchsucht der Prüfer die OKLCH-Helligkeit einer Farbe, behält dabei Farbton und Buntheit bei und schlägt den nächstgelegenen Wert vor, der besteht – getrennt für Text und Hintergrund.
Der Prüfer ist für einfarbige Flächen gedacht. Er kann Text über Fotos oder Verläufen, Transparenz, die Darstellung der Schriftstärke auf einem bestimmten Bildschirm oder die neuere APCA-Methode, die für WCAG 3 vorgeschlagen wird, nicht bewerten. Betrachten Sie ein „Bestanden“ daher als Minimum und testen Sie auch auf echten Bildschirmen.
Datenschutz
Beide Farben bleiben in diesem Tab: Das Verhältnis, die Prüfungen auf Bestanden und Nicht bestanden sowie die Korrekturvorschläge werden von Ihrem Browser berechnet. Es werden keine Farbwerte an einen Server gesendet oder gespeichert.