Das Kontrastverhältnis ist ein Zahlenwert, der angibt, wie stark sich zwei Farben in ihrer Helligkeit voneinander unterscheiden. Es wird als Verhältnis dargestellt und reicht von 1 zu 1, wenn beide Farben identisch sind, bis 21 zu 1 bei Schwarz auf Weiß. Das Kontrastverhältnis ist die zentrale Messgröße, um zu beurteilen, ob Text und Bedienelemente auch bei eingeschränktem Sehvermögen, auf spiegelnden Displays oder bei grellem Licht lesbar bleiben.

So wird das Kontrastverhältnis berechnet

Grundlage ist die relative Luminanz einer Farbe, also ihre wahrgenommene Helligkeit auf einer Skala von 0 (Schwarz) bis 1 (Weiß). Dafür werden die Rot-, Grün- und Blauanteile der sRGB-Farbe zunächst in lineare Werte umgerechnet und anschließend gewichtet addiert. Grün trägt dabei am stärksten zur Helligkeit bei, Blau am schwächsten. Das spiegelt wider, wie empfindlich das menschliche Auge auf die jeweiligen Wellenlängen reagiert.

Aus den Luminanzwerten der helleren und der dunkleren Farbe ergibt sich das Verhältnis: Zur helleren Luminanz wird 0,05 addiert, zur dunkleren ebenfalls, danach wird der erste Wert durch den zweiten geteilt. Der Zuschlag von 0,05 berücksichtigt das Streulicht, das auch auf einem schwarzen Bildschirm vorhanden ist. Die Reihenfolge der Farben spielt keine Rolle, ein heller Text auf dunklem Grund liefert denselben Wert wie dunkler Text auf hellem Grund.

Vier Graustufen auf weißem Hintergrund mit den berechneten Kontrastverhältnissen von knapp 2 zu 1 bis 7 zu 1
Grafik: Designbote

Schwellenwerte nach WCAG

Die Web Content Accessibility Guidelines legen Mindestwerte fest. Für Stufe AA gilt bei normalem Text ein Verhältnis von mindestens 4,5 zu 1. Großer Text, definiert als mindestens 18 Punkt oder fett mindestens 14 Punkt, braucht 3 zu 1. Denselben Wert verlangt das Kriterium für Nicht-Text-Kontrast bei Bedienelementen wie Rahmen von Eingabefeldern, bei Symbolen und bei Grafiken, die für das Verständnis wichtig sind. Stufe AAA fordert 7 zu 1 für normalen und 4,5 zu 1 für großen Text.

Die Werte sind strikt zu verstehen. Ein Ergebnis von 4,49 zu 1 besteht die Prüfung nicht, auch wenn es gerundet 4,5 ergäbe. Ein mittleres Grau mit dem Hexwert #767676 erreicht auf Weiß etwa 4,54 zu 1 und ist damit einer der hellsten Grautöne, die für normalen Text auf weißem Grund gerade noch zulässig sind.

Weil die Berechnung ausschließlich auf der Helligkeit beruht, ist sie unabhängig vom Farbton. Zwei Farben, die sich nur in der Buntheit unterscheiden, etwa ein Rot und ein Grün gleicher Helligkeit, ergeben ein Verhältnis von nahezu 1 zu 1 und sind für Menschen mit Farbsehschwäche kaum zu unterscheiden. Ein ausreichender Helligkeitsunterschied ist deshalb eine verlässlichere Grundlage als der Farbton.

Ausnahmen und Sonderfälle

Keine Mindestwerte gelten für rein dekorative Elemente, für Logos und Schriftzüge von Marken sowie für deaktivierte Bedienelemente. Schwieriger ist die Prüfung bei Text auf Fotos, Verläufen oder halbtransparenten Flächen. Hier muss der ungünstigste Bereich hinter dem Text betrachtet werden. Eine zusätzliche Fläche oder ein Farbverlauf hinter der Schrift kann das Problem lösen, ohne das Bildmotiv zu opfern.

Werkzeuge und Grenzen der Berechnung

Zur Prüfung stehen Kontrastrechner im Browser, Entwicklertools mit eingebauter Kontrastanzeige sowie Erweiterungen für gängige Design-Programme zur Verfügung. Auch Zustände wie Hover, Fokus oder Auswahl sowie Text auf farbigen Schaltflächen sollten die Werte ebenfalls erreichen. Sinnvoll ist es, Farbpaare bereits im Designsystem zu testen und nur geprüfte Kombinationen freizugeben.

Die WCAG-Formel stößt an Grenzen. Sie bewertet Schriftgröße und Strichstärke nicht und beurteilt helle Schrift auf dunklem Grund teils ungenau. Ein Verhältnis von 21 zu 1 ist zudem nicht automatisch ideal, denn reines Weiß auf reinem Schwarz kann bei längeren Texten blenden und für manche Menschen unruhig wirken. Für künftige Richtlinien werden daher wahrnehmungsbasierte Verfahren diskutiert, die auch Schriftgröße und Strichstärke einbeziehen. Bis dahin gilt: Das berechnete Verhältnis ist ein notwendiger, aber kein hinreichender Beleg für gute Lesbarkeit.