Farbkontrast – wichtiger Bestandteil der Barrierefreiheit

Kategorien

Ein schwarzweißer Hintergrund auf dem Farbkontrast steht.

Details

Der höchstmögliche Ratio ist 21:1.

Warum und wie es funktioniert

Farben spielen eine zentrale Rolle in Design und Alltag – aber nicht jede Kombination ist gleich gut lesbar. Der Kontrast zwischen Text und Hintergrund kann über Erfolg oder Misserfolg deiner Inhalte entscheiden, insbesondere wenn Barrierefreiheit eine Rolle spielt. Heute erkläre ich dir, wie der Farbkontrast technisch berechnet wird – und erspare dir dann den Taschenrechner, versprochen!

Die Formel zur Berechnung des Farbkontrasts

Die Berechnung basiert auf den Luminanzwerten der Farben, also deren wahrgenommener Helligkeit. Hier sind die Schritte:

Normiere die RGB-Werte: Jeder Farbwert (Rot, Grün, Blau) wird durch 255 geteilt, um einen Wert zwischen 0 und 1 zu erhalten:

R‘ = R255 , G‘ = G255 , B‘ = B255

Wende Gamma-Korrektur an:

Rc = { R‘12.92 wenn R‘ 0.03928 R‘ + 0.0551.055 2.4 wenn R‘ > 0.03928

Dasselbe gilt für G′G‘ und B′B‘.

Berechne die relative Luminanz (LL):

L = 0.2126 Rc + 0.7152 Gc + 0.0722 Bc

Kontrast-Ratio berechnen: Ordne die Farben nach ihrer Helligkeit () und wende die Formel an:

Kontrast-Ratio = L1 + 0.05 L2 + 0.05

Ein Beispiel zur Veranschaulichung:

Nehmen wir weiß (#FFFFFF) und schwarz (#000000):

Weiß:

L1 = 0.2126 1 + 0.7152 1 + 0.0722 1 = 1

Schwarz:

L2 = 0.2126 0 + 0.7152 0 + 0.0722 0 = 0

Kontrast:

1 + 0.05 0 + 0.05 = 21:1

Ein Kontrast von 21:1 ist der höchstmögliche Wert und garantiert optimale Lesbarkeit.

Einfache Lösung für den Alltag

Zugegeben: Diese Rechnung möchtest du nicht jedes Mal selbst durchführen. Es gibt nützliche Tools, die dir das Leben leichter machen, wie zum Beispiel der WebAIM Contrast Checker. Einfach die Hex-Werte deiner Farben eingeben, und das Tool sagt dir sofort, ob die Kombination barrierefrei ist.

Warum ist der Kontrast so wichtig?

Ein guter Farbkontrast sorgt nicht nur für eine bessere Lesbarkeit, sondern ist auch ein zentraler Faktor für Barrierefreiheit (Accessibility). Menschen mit Sehbehinderungen, Farbenblindheit oder ähnlichen Einschränkungen profitieren enorm von klar erkennbaren Texten und Elementen.

WCAG-Richtlinien:

  • Normaler Text: mindestens 4.5:1
  • Großer Text: mindestens 3:1
  • UI-Elemente: mindestens 3:1

Fazit: Kontrast macht den Unterschied

Wenn du möchtest, dass deine Designs für alle zugänglich sind, ist ein ausreichender Farbkontrast ein Muss. Nutze Tools wie den WebAIM Contrast Checker – sie sparen dir Zeit und liefern präzise Ergebnisse. So wird dein Design nicht nur schön, sondern auch inklusiv.