Ob Text lesbar ist, lässt sich ausrechnen. Die Grenzwerte stehen in den WCAG, die Formel ist öffentlich — und das Ergebnis widerspricht oft dem, was auf dem eigenen Bildschirm gut aussieht.
Barrierefreiheit wird oft als Gefühlsfrage behandelt: Ist das gut lesbar? Beim Farbkontrast muss man das nicht schätzen. Die Web Content Accessibility Guidelines (WCAG) definieren ein Kontrastverhältnis zwischen Text- und Hintergrundfarbe, das sich aus den Farbwerten berechnen lässt. Es reicht von 1:1 für gleiche Farben bis 21:1 für Schwarz auf Weiß.
Eine Zahl statt eines Eindrucks
Für das Barrierefreiheitsstärkungsgesetz ist das keine Nebensache. Die zugehörige europäische Norm EN 301 549 verweist für Websites auf die WCAG-Kriterien der Stufe AA. Wer Kontraste nicht nachrechnet, kann auch nicht belegen, dass er sie einhält.
1. Die Grenzwerte
Normaler Fließtext braucht mindestens 4,5:1. Großer Text — ab 24 Pixel oder ab etwa 18,7 Pixel in fetter Schrift — kommt mit 3:1 aus. Dasselbe Mindestmaß von 3:1 gilt für Bedienelemente und Grafiken, die zum Verständnis nötig sind, etwa den Rahmen eines Eingabefelds oder ein Symbol ohne Beschriftung.
2. Ein Beispiel aus der eigenen Marke
Das Orange von hnvr.me, #FF7120, erreicht auf dem dunklen Grundton #1A1815 ein Verhältnis von 6,44:1. Weißer Text auf demselben Orange kommt nur auf 2,75:1 und fällt damit durch — obwohl die Kombination auf den ersten Blick kräftig wirkt. Seitdem gilt in unserer Gestaltung die Regel: auf Orange nie Weiß.
Fließtext: mindestens 4,5:1
Großer Text ab 24 px oder fett ab 18,7 px: mindestens 3:1
Bedienelemente und informative Grafiken: mindestens 3:1
Tippziele mindestens 24 × 24 Pixel (WCAG 2.2)
Gegen die tatsächliche Hintergrundfläche rechnen, nicht gegen die gedachte
Ein zweiter Befund aus derselben Rechnung: Zwischen dem dunklen #1A1815 und dem hellen #F4F1EC gibt es keine einzelne Farbe, die auf beiden Flächen 4,5:1 erreicht. Für Nebentexte braucht die Marke deshalb zwei Grautöne: #8F897F auf dunklem Grund mit 5,11:1 und #6F6A62 auf hellem Grund mit 4,76:1.
Gerechnet wird gegen die Fläche, auf der der Text tatsächlich steht. Liegt Text auf einem Bild oder einem halbtransparenten Verlauf, zählt die ungünstigste Stelle. Ein Farbwert aus dem Gestaltungsdokument genügt dann nicht; man muss die sichtbaren Pixel messen.
Rechnen, bevor gestaltet wird
Mit WCAG 2.2 sind im Oktober 2023 weitere Kriterien hinzugekommen, darunter eine Mindestgröße für Tippziele von 24 mal 24 Pixeln und die Regel, dass der Tastaturfokus nicht von anderen Elementen verdeckt werden darf. Wer heute neu gestaltet, sollte sie gleich mit einhalten.
Kontrastprüfung ist keine einmalige Abnahme. Jede neue Farbe, jeder neue Hintergrund, jede Schaltfläche für eine Aktion ist eine neue Kombination. Am einfachsten ist es, die zulässigen Paare einmal festzulegen und in der Gestaltung nur noch diese zu verwenden.
Die Rechnung dauert Sekunden, die Korrektur einer fertigen Website Tage. Deshalb gehört sie an den Anfang, in die Farbpalette, und nicht an das Ende, in die Abnahme.
