Ü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.
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?
AA ist die Basisstufe, AAA ist strenger. AAA eignet sich für Langtexte, AA ist das übliche Ziel für Produktoberflächen.
Was zählt als großer Text?
18pt (24px) oder 14pt (18,66px) fett und größer. Großer Text darf einen niedrigeren Kontrast haben.
Warum wirkt der Wert im Browser anders?
Browser können Deckkraft, Overlays oder Bildhintergründe anwenden. Messen Sie die endgültig gerenderten Farben.
Kann ich diese Farben produktiv nutzen?
Ja, es sind normale HEX-Farben. Prüfen Sie sie im Kontext, auch für Hover- und Deaktiviert-Zustände.