Barrierefreie Farbkontraste nach WCAG 2.1 und BFSG

Von der Redaktion Farbwähler Online • Lesezeit: 9 Minuten

Barrierefreiheit (Accessibility, A11y) ist im modernen Webdesign längst kein optionales "Nice-to-have" mehr. Mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) in Deutschland und der EU-weiten Richtlinie müssen Websites von Online-Händlern, Dienstleistern und Unternehmen strenge Kriterien für barrierefreien Zugang erfüllen — insbesondere bei Farbkontrasten.

Die Kontraststufen der Web Content Accessibility Guidelines (WCAG)

Die WCAG definieren drei Konformitätsstufen (A, AA, AAA). Für Textinhalte gelten folgende Grenzwerte:

• Level AA (Gesetzlicher Standard): Mindestens 4,5:1 für normalen Fließtext und 3,0:1 für großen Text (ab 18pt bzw. 14pt fett) sowie funktionale UI-Komponenten (Icon-Buttons, Eingabefeld-Ränder).
• Level AAA (Höchste Exzellenzstufe): Mindestens 7,0:1 für normalen Text und 4,5:1 für großen Text.

Wie wird das Kontrastverhältnis mathematisch berechnet?

Das Verhältnis basiert auf der relativen Leuchtdichte (Relative Luminance, \(L\)) beider Farben, die nach Gamma-Korrektur der RGB-Werte berechnet wird:

Kontrastverhältnis = (L1 + 0.05) / (L2 + 0.05)

Wobei \(L1\) die Leuchtdichte der helleren Farbe und \(L2\) die der dunkleren Farbe darstellt. Das Ergebnis reicht von 1:1 (kein Kontrast, gleiche Farbe) bis 21:1 (maximaler Kontrast: Tiefschwarz auf Reinweiß).

Typische Kontrastfehler im modernen Webdesign

1. Hellgrauer Text auf weißem Grund: Viele minimalistische Websites nutzen hellgraue Schriftarten (z. B. #999999 auf #FFFFFF), die lediglich ein Kontrastverhältnis von ~2,8:1 erreichen und für Menschen mit Sehschwächen unlesbar sind.
2. Gelber oder oranger Text auf Weiß: Helle Warnfarben erfordern stets einen dunklen Hintergrund, um die 4,5:1-Schwelle zu erreichen.
3. Mangelnder Kontrast im Dark Mode: Dunkelgraue Schaltflächen auf schwarzem Grund ohne deutlich sichtbare Rahmenlinie.