Kontrast ist im Web so etwas wie die Luft zum Atmen. Man sieht ihn nicht bewusst – bis er fehlt.
Bisherige Kontrastformeln waren dabei sehr praktisch. Für Fans der Mathematik sogar einfach. Man rechnet die Helligkeit von Vorder- und Hintergrund aus, teilt, fertig. 4,5:1, alles gut. Aber das Auge? Das denkt nicht in Formeln. Es merkt sofort, wenn etwas sich nicht richtig anfühlt. Denn Farben sind eben nicht nur Zahlen auf dem Papier. Farben sind Psychologie, Individualität und oft auch situativ.
Und deshalb müssen wir die Definition von „was ist ausreichend hoher Kontrast“ vielleicht neu denken. Ist es möglich, die menschliche Wahrnehmung in eine Formel zu packen? Lässt sich das gute Gefühl beim Betrachten einer Farbkombination ausreichen?
Genau das versucht APCA – die Kontrastberehcnung, die wir uns heute einmal genauer anschauen.
Warum APCA die Regeln neu schreibt
Bislang galt: Wer guten Kontrast will, hält sich an die WCAG. Genauer: an die Formeln für die Kontrastwerte, die auch in den WCAG 2.1 stehen. Dabei wird über mehrere Schritte aus den RGB-Werten der Farben die relative Helligkeit ermittelt und das Verhältnis zweier Farben berechnet. Als grenzwerte gelten ein Verhältnis von 4,5:1 für normalen Text und 3:1 für große Schrift.
Wer sich für die genauen Formeln interessiert: 3:1, 7:1 – Wie berechnet sich eigentlich der Kontrast zwischen Farben?
Währenddessen werden verschiedene neue Varianten diskutiert. Nicht nur stur Zahlen vergleichen, sondern Lesbarkeit und menschliche Wahrnehmung berücksichtigen. Genau hier kommt APCA (Accessible Perceptual Contrast Algorithm) ins Spiel. Dieser Algorithmus versucht, beide Welten zusammenzubringen: Zahlen, die versuchen, wirklich zu zeigen, wie gut Text auf dem Hintergrund lesbar ist. Dunkel auf hell, hell auf dunkel, kleine Unterschiede, große Unterschiede – alles fließt in einen Wert, der direkt mit Lesbarkeit korreliert.
Das klingt abstrakt. Am besten sieht man den Unterschied direkt:
Formeltechnisch hat der schwarze Text den besseren Kontrast: 1 : 4,65 statt 1 : 4,5. Klingt nach klarer Wahl, oder? Aber wie geht es euch damit? Nach meinem Empfinden schlägt der weiße Text den schwarzen um Längen. Das ist der Punkt: APCA spiegelt die Wahrnehmung wider, die bisherige Variante nur die Mathematik.
Die Mathematik hinter APCA
Für die Mathematiknerds unter euch (so wie mich) würde ich jetzt liebend gern auseinandernehmen, wie das mathematisch alles funktioniert. Aber ganz so einfach wie bisher ist das leider nicht.
APCA ist kein simpler Bruch aus Helligkeiten, wie wir es von den alten WCAG-Formeln kennen. Stattdessen steckt hinter der Zahl ein ganzes Set von wissenschaftlich kalibrierten Anpassungen, die genau abbilden sollen, wie das menschliche Auge Kontrast wahrnimmt.
- Polung: Heller Text auf dunklem Hintergrund wird anders bewertet als dunkler Text auf hellem Hintergrund. Unser Auge reagiert nämlich asymmetrisch.
- Exponenten: Für Text und Hintergrund werden unterschiedliche Potenzen verwendet, damit kleine Unterschiede in dunklen Bereichen genauso stark wirken wie große Unterschiede in hellen Bereichen.
- Skalierung und Offsets: Sehr kleine oder sehr große Unterschiede werden geglättet, damit extrem niedrige Kontraste nicht plötzlich fälschlicherweise als gut gelten und extrem hohe Werte nicht übertrieben aussehen.
- Clamping / Korrekturen: Sehr helle oder sehr dunkle Bereiche werden zusätzlich „weicher“ gerechnet, um Rauschen und visuelle Übersteuerung zu vermeiden.
All diese Faktoren zusammen ergeben eine Formel, die zu viel wäre für diesen Post. Sie ist eher ein kleines Softwarepaket aus mehreren Funktionen, Lookup-Tabellen und Kalibrierungsparametern. Wer wirklich präzise APCA-Werte braucht, muss auf die offiziellen Implementierungen zurückgreifen, wie sie in den APCA-Rechnern oder auf GitHub zu finden sind.
Hier ein paar Rechner zur Auswahl, sie liefern aber im wesentlichen das gleiche Ergebnis
Grenzwerte bei der Verwendung von APCA
Nutzt man die erwähnten Rechner, kommen wir zu folgenden Punktwerten für unsere beiden Buttons oben:
- Weiß auf Orange: 76
- Schwarz auf Orange: 33.5
Wir haben jetzt doch zwei sehr unterschiedliche Zahlwerte. Doch was sagen die eigentlich aus? Sind die Kontraste jetzt gut oder nicht?
APCA liefert, wie wir wissen, Werte, die direkt mit der Lesbarkeit zusammenhängen. Und die hängt eben auch stark von der verwendeten Schriftgröße ab, wie das ja auch in den bisherigen Vorgaben der Fall ist. Grob gilt dabei:
- > Lc 90+ (AAA) → supergut, für alle Textgrößen geeignet
- > Lc 75+ (AA+) → sehr gut, für Text ab 14px
- > Lc 60+ (AA) → ausreichend, für Text ab 16px
- > Lc 45+ (A) → nur große Texte wie Headlines ab 24px
Schauen wir auf unsere Beispiele:
Weiß auf Orange liegt knapp im Bereich von AA+ und dürfte deshalb mit gutem Gewissen zum Einsatz kommen. Für Fließtexte wird aufgrund der hohen Bildschirmauflösungen inzwischen eh eine Schriftgröße von mindestens 16px empfohlen.
Schwarz auf Orange dagegen erfüllt nicht einmal die Kriterien für große Überschriften. Ja, das Schwarz, dass laut bisherigen Anforderungen auch in 10px noch jedes WCAG-Autdit bestanden hätte. APCA zeigt, dass die Lesbarkeit eben doch deutlich schlechter ist als das die bisherigen Formeln vortäuschen.
Fazit – wir brauchen dringend eine neue Kontrastberechnung
Ich glaube, es ist klar geworden, dass Farbkontraste mehr sind als nur Zahlen auf dem Papier. Sie entscheiden darüber, ob man Text wirklich gut lesen kann oder sich die Augen anstrengen müssen. Die alten Formeln waren praktisch, klar – aber sie sagen nicht, wie unser Auge Farben wirklich wahrnimmt. APCA zeigt, dass heller Text auf dunklem Hintergrund anders wirkt als dunkler auf hell. Kleine Unterschiede in dunklen Bereichen fallen stärker ins Auge, und hohe Zahlen bisher bedeuten eben nicht automatisch gute Lesbarkeit.
Warum das wichtig ist? Ganz klar: für Menschen mit Sehbehinderungen oder eingeschränktem Farbsehen kann der Unterschied zwischen lesbar und unlesbar riesig sein. Aber auch wir alle merken es im Alltag – morgens am Smartphone bei grellem Sonnenlicht, abends auf dem Laptop mit schwacher Beleuchtung oder einfach beim schnellen Überfliegen von Texten. Ein guter Kontrast macht Lesen leichter, angenehmer, schneller.
Die WCAG 3 wollen genau das abbilden. Sie basieren auf APCA und moderner Forschung zur visuellen Wahrnehmung. Aber: Die Richtlinien sind noch in Arbeit, die Anforderungen noch nicht final. Wer heute schon auf gute Kontraste gemäß der APCA-Rechnung achtet, tut also etwas für Barrierefreiheit – und gleichzeitig für ein besseres Nutzungserlebnis für alle.