Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen zwei aneinander grenzenden Farben – beispielsweise Text und Hintergrund. Es wird als Verhältnis ausgedrückt, wobei der hellere Wert durch den dunkleren geteilt wird. Das Ergebnis liegt zwischen 1:1 (kein Kontrast) und 21:1 (maximaler Kontrast).
Für barrierefreie Webinhalte definieren die WCAG-Richtlinien Mindestanforderungen: Für normalen Text ist ein Kontrastverhältnis von mindestens 4,5:1 erforderlich, für große Texte (ab 18pt oder 14pt bold) mindestens 3:1. Für die erweiterte Konformitätsstufe AAA gelten höhere Anforderungen von 7:1 bzw. 4,5:1.
.high-contrast {
color: #000000;
background-color: #ffffff; / Kontrastverhältnis 21:1 /
}
Die Einhaltung ausreichender Kontrastverhältnisse ist besonders wichtig für:
Menschen mit Sehschwächen oder Farbenfehlsichtigkeit
Situationen mit schlechten Lichtverhältnissen
Mobile Nutzung im Freien
Altersbedingten Sehveränderungen
Bildschirme mit schlechter Qualität
Zur Überprüfung der Kontrastverhältnisse stehen verschiedene Tools zur Verfügung – von Browser-Erweiterungen bis zu spezialisierten Prüfwerkzeugen. Diese analysieren die verwendeten Farbwerte und berechnen das resultierende Kontrastverhältnis automatisch. Bei der Gestaltung ist zu beachten, dass dekorative Elemente von diesen Anforderungen ausgenommen sind, während alle inhaltlich relevanten Elemente die Mindestwerte erfüllen müssen.
Die Kontrastanforderungen gelten nicht nur für Text, sondern auch für grafische Bedienelemente und visuelle Informationen, die zum Verständnis des Inhalts notwendig sind. Für diese visuellen Komponenten gilt grundsätzlich ein Mindestwert von 3:1 gegenüber angrenzenden Farben.
