Wissensdatenbank & Anleitung
Farbkontrastverhältnisse und WCAG-Zugänglichkeit
Farbkontrast ist der mathematische Unterschied in der Leuchtdichte zwischen einer Vordergrundtextfarbe und ihrer Hintergrundfarbe. Der richtige Kontrast ist gesetzlich vorgeschrieben, um sicherzustellen, dass digitale Inhalte für sehbehinderte Benutzer lesbar sind.
Das Testen von Millionen von Farbkombinationen in komplexen UI-Systemen erfordert sofortiges visuelles Feedback. Dieser Prüfer berechnet die präzisen WCAG 2.1-Luminanzalgorithmen vollständig clientseitig und ermöglicht so eine sofortige Manipulation.
Formel & Berechnungsmethode
Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05)
Dabei ist L1 die relative Leuchtdichte der helleren Farbe und L2 die Leuchtdichte der dunkleren Farbe. Das resultierende Verhältnis reicht von 1:1 (kein Kontrast, Weiß auf Weiß) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß).
Best Practices & Tipps
- AA-Konformität anstreben (4,5:1): Die Web Content Accessibility Guidelines (WCAG) Level AA erfordern ein Mindestverhältnis von 4,5:1 für Standardtext und 3:1 für großen Text (normalerweise 18pt oder 14pt fett).
- Verlassen Sie sich bei der Bedeutung nicht nur auf die Farbe: Farbenblinde Benutzer können bestimmte Farbtöne nicht unterscheiden (z. B. rote Fehlerzustände und grüne Erfolgszustände). Kombinieren Sie Farbänderungen immer mit Ikonografie, Unterstreichungen oder Strukturänderungen.
- Berücksichtigen Sie Umkehrungen im Dunkelmodus: Eine Palette mit hohem Kontrast im Hellmodus versagt oft katastrophal, wenn sie mathematisch für den Dunkelmodus invertiert wird. Sie müssen die Kontrastverhältnisse für beide unterschiedlichen Themen manuell überprüfen.
Häufig gestellte Fragen
Was ist WCAG Level AAA?
Stufe AAA ist der strengste Barrierefreiheitsstandard und erfordert ein Kontrastverhältnis von 7:1 für normalen Text. Normalerweise ist es nur für hochspezialisierte Regierungs- oder medizinische Software vorgeschrieben.
Gilt der Kontrast für Nicht-Text-UI-Elemente?
Ja. WCAG 2.1 führte eine Mindestkontrastverhältnisanforderung von 3:1 für „UI-Komponenten und grafische Objekte“ ein, was bedeutet, dass Ihre Eingaberänder und Schaltflächenhintergründe auch einen Kontrast zur Seite haben müssen.
Warum versagen meine reinen Grautöne im Kontrast?
Reine mittlere Grautöne (wie #808080) auf einem reinweißen Hintergrund bewegen sich normalerweise in einem Verhältnis von 3,9:1, was die 4,5:1-Anforderung für Fließtext strikt nicht erfüllt. Sie müssen sie abdunkeln.