Überblick WCAG-Kontrast
Verhältnis und AA/AAA
Verwendung
Geben Sie zwei Farben ein, um deren WCAG-Kontrastverhältnis zu sehen sowie ein sofortiges AA- oder AAA-Bestanden/Nicht-bestanden für Text und Elemente.
Grenzen
Verglichen werden nur zwei deckende Farben. Transparenz, Verläufe und Bildhintergründe fließen nicht ein.
WCAG-Kontrast
WCAG-Kontraststandards
WCAG AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text. AAA erhöht die Werte auf 7:1 und 4,5:1.
Großer Text bedeutet 18pt normal oder 14pt fett und größer. UI-Symbole und Fokusindikatoren sollten ebenfalls 3:1 erreichen.
Prüfen und korrigieren
Geben Sie Text- und Hintergrundfarbe ein oder verschieben Sie die Helligkeit per Regler, während Farbton und Sättigung erhalten bleiben.
Das Vorschlagsfenster zeigt nahe Farben, die AA erreichen. Wählen, kopieren und anschließend gegen das echte Hintergrundbild prüfen.
Häufige Fragen
Was ist der Unterschied zwischen AA und AAA?
Was zählt als großer Text?
Warum wirkt der Wert im Browser anders?
Kann ich diese Farben produktiv nutzen?
Beispiele: drei echte Messwerte
Drei Paare, mit demselben Algorithmus gerechnet — damit Sie sehen, wo 4,5:1 tatsächlich liegt.