Farbkontrast-Leitfaden der WCAG
Machen Sie sich mit den Kontrastanforderungen von AA und AAA vertraut, erfahren Sie, wie Sie Text- und UI-Komponenten testen und fehlerhafte Paare beheben.
FAQ
- Welches Verhältnis benötige ich für Knöpfe?
- UI-Komponenten und grafische Objekte benötigen im Allgemeinen mindestens 3:1 gegenüber benachbarten Farben. Text innerhalb von Schaltflächen benötigt weiterhin 4,5:1 (AA) oder 3:1 für großen Text.
Grundlagen des WCAG-Kontrasts
WCAG 2.x definiert minimale Kontrastverhältnisse zwischen Text- und Hintergrundfarben. Level AA ist das gemeinsame Rechts- und Produktziel; AAA ist strenger und wird nach Möglichkeit für den Fließtext empfohlen.
Der Kontrast basiert auf der relativen Leuchtdichte, nicht auf dem Farbton. Zwei Farben können unterschiedlich aussehen, aber der Kontrast versagt, wenn ihre Helligkeit zu ähnlich ist.
Testworkflow
Wählen Sie Vordergrund- und Hintergrundfarben aus Ihrem Designsystem. Führen Sie sie durch einen Kontrastprüfer. Beachten Sie die Schwellenwerte für normale und große Texte.
Testen Sie Hover-, Fokus- und Deaktivierungszustände – nicht nur Standardschaltflächen und -links.