Barrierefreiheit barrierefreies Webdesign mit Joomla aus Bonn

CSS Contrast-Color() , automatisch barrierefreie Farbkombinationen?

Wie gut lesbar ein Text ist, entscheidet, ob er tatsächlich gelesen wird. Dabei spielt der Kontrast von Vordergrund- zur Hintergrundfarbe eine deutliche Rolle. Im Juni 2025 hat WebKit die Unterstützung für eine neue CSS-Funktion namens contrast-color() als Feature-Flag in seine Engine integriert. Alle anderen Browser unterstützen diese Methode leider noch nicht.

 

Die Funktion soll dabei helfen, automatisch eine Textfarbe zu wählen, die zum Hintergrund einen möglichst großen Kontrast bildet (oder umgekehrt). Das könnte für die Umsetzung der Barrierefreiheit und die Verwendung von Design-Systemen eine große Hilfe sein.

Der Gedanke dahinter:
Man muss nicht mehr selbst entscheiden, welche Farbkombinationen man wählt, sondern überlässt dem Browser die Verantwortung.

Es könnte sogar so weit gehen, dass der Nutzer seine Lieblingsfarben auf einer Website selbst festlegt, und diese dann – unter Verwendung von CSS-Variablen – die Gestaltung der Seite bestimmen.
Das klingt erst mal cool, aber ich muss die freudigen Erwartungen schon zu Beginn des Artikels dämpfen, denn es geht nur um den höchstmöglichen Kontrast.

Umsetzung mit CSS contrast-color()

Der Browser wählt in diesem Fall automatisch Schwarz oder Weiß als Schriftfarbe – je nachdem, welche Farbe einen besseren Kontrast zu var(-- --bg-color:) bietet.

Was steckt technisch dahinter

Der Algorithmus hinter contrast-color() im Safari basiert aktuell auf dem Kontrastverhältnis gemäß WCAG (Web Content Accessibility Guidelines, ein internationaler Standard für barrierefreies Webdesign ). Dabei wird rechnerisch ermittelt, welcher Farbton den besseren Helligkeitskontrast zu einer gegebenen Hintergrundfarbe bietet. Um diesen Kontrast zu bestimmen, wird zunächst die sogenannte CIE-Luminanz (Y) berechnet – ein Maß für die Helligkeit einer Farbe, das auf einem internationalen Standard (CIE) basiert und so definiert ist, dass es dem menschlichen Seheindruck möglichst genau entspricht. Die Berechnung erfolgt dabei relativ zu einem sogenannten D65-Weißpunkt, einem standardisierten Referenzwert, der etwa dem natürlichen Tageslicht entspricht und für Farbvergleiche herangezogen wird.

Anschließend wird das Kontrastverhältnis gemäß der WCAG 2.1-Kontrastformel berechnet:

Kontrast = (Yl + 0,05) / (Yd + 0,05)

Dabei steht Yl für die Luminanz der helleren und Yd für die der dunkleren Farbe. Luminanz ist ein Maß für die Helligkeit. Die Luminanz sorgt dafür, dass das menschliche Auge Kontraste überhaupt wahrnehmen kann. Stell dir vor, du schaust auf zwei Farben – ein helles Gelb und ein dunkles Blau. Das Gelb wirkt heller. Diese empfundene Helligkeit wird als Luminanz beschrieben. Der Faktor 0,05 wird in der Kontrastformel sowohl zur Luminanz der helleren als auch der dunkleren Farbe addiert, um den sogenannten Streulichteffekt zu berücksichtigen. Dieser Begriff beschreibt einen zusätzlichen Helligkeitseindruck, der beim realen Sehen durch Streulicht, Reflexionen oder Blendungen entsteht. Solche Effekte treten beispielsweise auf, wenn Licht von einer hellen Fläche in der Umgebung zurückgeworfen wird und so auch dunklere Bereiche im Blickfeld leicht aufhellt.

Stell dir vor, ein dunkelblauer Text wird auf einem hellgelben Hintergrund dargestellt. Obwohl der Dunkelblau-Farbton eigentlich recht dunkel ist, kann durch das starke Umgebungslicht oder Bildschirmreflexionen ein Teil der Helligkeit des Gelbs auf das Blau „überspringen“. Dadurch wirkt das Dunkelblau in der Wahrnehmung minimal heller als es rechnerisch wäre. Um diesen Effekt realistisch in die Kontrastberechnung einzubeziehen, wird beiden Farben ein kleiner Wert von 0,05 zur Luminanz hinzugefügt. So ergibt sich ein praxisnaher Kontrastwert, der unserem Seheindruck näher kommt als eine rein theoretische Rechnung.

Farben im mittleren Helligkeitsbereich haben bei dieser Art der Berechnung ein grundsätzliches Problem in der Kontrastbewertung: Sie sind oft weder hell noch dunkel genug, um klare Kontraste zu erzielen. Die 0,05-Korrektur wirkt sich in diesem Bereich überproportional stark aus, wodurch rechnerisch niedrigere Kontrastwerte entstehen – obwohl das menschliche Auge diese Farben häufig als deutlich kontrastreicher wahrnimmt. Orange ist dafür ein ganz gutes Beispiel.

APCA  in der Zukunft?

Die Kontrast-Richtlinien von WCAG 2.x stammen aus einer Zeit, in der es noch keine Smartphones oder iPads gab, auch die Forschung war noch nicht auf dem heutigen Stand. Es gibt aber schon jetzt eine mögliche Alternative , APCA.
Das APCA-Modell (Accessible Perceptual Contrast Algorithm ) ist wahrnehmungs- und kontextbasiert. Es stützt sich auf aktuelle Forschung zur Farbwahrnehmung und berücksichtigt, wie das menschliche Auge Farben und Helligkeitsunterschiede tatsächlich interpretiert. Anders als starre Kontrastverhältnisse bezieht APCA auch den konkreten Darstellungskontext ein – etwa Schriftgröße, Schriftstärke und Umgebungsbedingungen – um die tatsächliche Lesbarkeit realistischer zu bewerten.

APCA erzeugt einen Helligkeitskontrastwert, der ein Mindestmaß an Schriftgewicht, Größe und Farbpaar berücksichtigt. Dieser Wert ist einheitlich für die Wahrnehmung von Helligkeit und Dunkelheit. Das bedeutet, dass unabhängig davon, wie hell oder dunkel die beiden Farben sind, ein gegebener Kontrastwert optisch konsistent bleibt. Somit stellt beispielsweise der Wert Lc 60 immer denselben wahrgenommenen Kontrast dar, egal in welchem Farbbereich die Farben liegen. Dadurch kann die Lesbarkeit von Text verlässlich beurteilt werden, da der Kontrastwert für den Betrachter immer gleich stark wirkt. Es scheint sehr wahrscheinlich, dass sich dieser Algorithmus als Standard in der WACG 3 etabliert.
Viele Gestalter würden sich sehr darüber freuen, weil damit auch der Umfang der zu verwendenden Farben deutlich größer wird .