Zum Inhalt springen
Grünes Verkehrssignal leuchtet in der Dunkelheit

Barrierefreie Farbkontraste: Grünes Licht, wenn Mindestkontrast erfüllt?

Das Kontrast-Tool springt auf Grün, die magische Zahl 4,5:1 ist erreicht. »Check, Barrierefreiheit erfüllt!«, denkt man sich. Grünes Licht also?

Wer im Design-Alltag mit Barrierefreiheit zu tun hat, kennt diesen einen Moment der Erleichterung: Der Farbkontrast ist WCAG-konform, grünes Licht für die Farben. Doch wer schon einmal hellgrünen Text auf weißem Grund gesehen hat, weiß: Nur weil die Mathematik »Ja« sagt, heißt das noch lange nicht, dass das Auge zustimmt.

Warum das so ist und warum wir uns gerade an der Schwelle zu einer kleinen Kontrast-Revolution befinden, schauen wir uns heute an.

Mindestkontraste nach WCAG 2 – klar, gesetzlich relevant, aber unvollständig

Die Web Content Accessibility Guidelines (WCAG) definieren in der Version 2 sehr konkrete Mindestwerte für Farbkontraste zwischen Text und Hintergrund – praktisch relevant, rechtlich bindend in vielen Kontexten und das, worauf Prüfwerkzeuge heute standardmäßig testen. Für normalen Text gilt ein Kontrastverhältnis von mindestens 4,5:1, für großen Text mindestens 3:1. Grafische Objekte oder UI-Elemente ohne Text benötigen mindestens 3:1. Für besonders hohe Barrierefreiheit (AAA) sind höhere Werte (zum Beispiel 7:1 für normalen Text) vorgesehen.

Um Barrieren abzubauen, nutzen die WCAG eine recht simple Formel: Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben linear miteinander.

Das Problem dabei? Das menschliche Auge ist kein linearer Sensor. Wir nehmen Helligkeitsunterschiede je nach Farbe völlig unterschiedlich wahr. Blau wirkt für uns oft dunkler als ein rechnerisch gleich helles Rot. Die WCAG 2 vernachlässigt zudem weitestgehend, wie groß oder fett eine Schrift ist. Das führt dazu, dass Farbkombinationen den offiziellen Test bestehen, in der Realität aber dennoch schwer lesbar sind – oder umgekehrt: Tolle, lesbare Kombinationen werden fälschlicherweise abgestraft.

APCA und WCAG 3 – was ändert sich?

Hier kommt die WCAG 3 ins Spiel. Auch wenn sie noch nicht offiziell verabschiedet ist und noch kein Teil der Gesetzgebung ist, wirft sie ihre Schatten bereits voraus. Unter anderem wird der APCA (Accessible Perceptual Contrast Algorithm) als Bestandteil der WCAG 3 diskutiert.

Im Gegensatz zur alten Formel berechnet APCA den sogenannten Lc (Lightness Contrast). Das Besondere:

  • Wahrnehmungsorientiert: Der Algorithmus simuliert, wie wir Farben wirklich sehen.
  • Kontextabhängig: Er berücksichtigt, dass Textgröße und Schriftgewicht massiven Einfluss darauf haben, wie viel Kontrast wir benötigen.
  • Flexibler: Er erlaubt Nuancen, wo die alte WCAG nur Schwarz oder Weiß (Pass oder Fail) kannte.

Gegenüberstellung der Konformitätskriterien von WCAG 2 und APCA mit Ergebnissen für Button-Text-Kontraste
WCAG 2 vs. APCA. Verglichen werden die Konformitätsstufen WCAG 2 AA und WCAG 3 Silver.

Edelmetalle statt Buchstaben: Bronze, Silber, Gold

Mit der WCAG 3 verabschieden wir uns wahrscheinlich auch von den klassischen Leveln A, AA und AAA. Die Zukunft wird glänzen – und zwar in Bronze, Silver und Gold. Diese neuen Konformitätsstufen sollen die Struktur flexibler machen. Während »Bronze« die Grundversorgung darstellt, bietet »Gold« das höchste Maß an inklusiver Gestaltung. Das Ziel ist weg von der starren »Bestanden-oder-nicht-Mentalität« hin zu einer kontinuierlichen Verbesserung der User Experience.

Das Dilemma: Heute schon auf morgen setzen?

Einige Experten empfehlen, den APCA schon heute in Designprozessen zu berücksichtigen. Warum? Weil er Barrieren einfach besser vermeidet. Besonders bei langlebigen Elementen wie Markenfarben ist das klug. Nichts ist ärgerlicher, als ein Corporate Design in zwei Jahren komplett umkrempeln zu müssen, weil der neue Standard plötzlich die Hauptfarbe ablehnt.

Aktuelle Gesetze und Standards beziehen sich auf den geltenden Standard (WCAG 2.1, künftig erst einmal WCAG 2.2). Wer nur nach APCA optimiert und dabei die 4,5:1-Hürde der WCAG 2 reißt, handelt rechtlich riskant.

Die beste Strategie ist momentan, beide Welten zu nutzen. Erfüllen Sie die WCAG 2-Kriterien, um auf der sicheren Seite zu sein, aber nutzen Sie APCA, um die tatsächliche Lesbarkeit zu prüfen.

Ob WCAG 2 oder 3: Warum die Untergrenze kein Zielwert ist

Sich starr an Mindestkontrasten zu orientieren, ist ein wenig so, als würde man ein Haus bauen, das gerade so nicht zusammenbricht: Es erfüllt die Bauordnung, aber gemütlich ist es nicht unbedingt. Mindestwerte sind – wie der Name sagt – die absolute Untergrenze, um Information gerade noch wahrnehmbar zu machen.

Gute Usability zeichnet sich dadurch aus, dass Inhalte schnell und mühelos erfasst werden können. Wirkliche Barrierefreiheit beginnt dort, wo wir nicht mehr genauer hinschauen müssen, um etwas zu entziffern. In dem Moment, in dem sich ein Nutzer »anstrengen« muss, ist die Barriere faktisch bereits vorhanden – ganz gleich, was das Test-Tool behauptet.

Fazit: Grünes Licht ist nicht gleich grünes Licht

Ein grüner Haken im Kontrast-Checker ist ein guter Anfang, aber kein Freifahrtschein für perfekte Lesbarkeit. Die Entwicklung hin zum APCA zeigt, dass wir Barrierefreiheit zunehmend als das verstehen, was sie sein sollte: Design für Menschen, nicht für Algorithmen. Nutzen Sie den APCA heute schon als zusätzlichen »Reality Check« für Ihre Designs. So schaffen Sie ein Ergebnis, das nicht nur gesetzlich konform ist, sondern auch wirklich gern gelesen wird.

Porträtbild von Marvin Siefke

Marvin Siefke

barrierefreies.design