Kontrastrechner – Farbkontraste auf Barrierefreiheit prüfen

Das Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe ist entscheidend für barrierefreie Farben (bzw. Farbkombinationen).
Damit digitale Medien (z. B. Webseiten, PDFs) barrierefrei sind, müssen sie verschiedene Anforderungen erfüllen. Eine dieser Anforderungen betrifft das Kontrastverhältnis zwischen den verwendeten Farben. In Europa und auch in vielen anderen Teilen der Welt wird hierfür die Kontrastberechnung nach WCAG herangezogen, welche im Folgenden erläutert wird.

Umrechnung von HEX zu RGB

Die WCAG-Kontrastberechnung basiert auf dem RGB-Farbmodell in seiner numerischen RGB-Darstellungsform (z. B. RGB(0, 125, 179)). In der digitalen Welt liegen die Farben aber typischerweise in HEX-codierter Form vor (z. B. #007db3) und müssen daher zunächst in RGB-Werte umgerechnet werden. Da die Umrechnung von HEX in RGB in den meisten Programmiersprachen als Standardfunktion verfügbar ist, wird die genaue Formel hier nicht weiter erläutert. Stattdessen zeigt die folgende Tabelle die bereits errechneten RGB-Werte für zwei beispielhafte HEX-Farben – jeweils für Vorder- und Hintergrund.

Beispiel: HEX- und RGB (8-Bit)-Werte für Vorder- und Hintergrundfarbe

	Vordergrund	Hintergrund
HEX	#007db3	#fdfdfd
RGB (8-bit)	RGB(0, 125, 179)	RGB(253, 253, 253)

Normierung der RGB-Werte

Im nächsten Schritt werden die 8-Bit-RGB-Werte aus dem ursprünglichen Wertebereich [0; 255] auf den normierten Bereich [0; 1] überführt, indem sie jeweils durch 255 geteilt werden.

Beispiel: RGB (8-Bit)- und normierte RGB-Werte für Vorder- und Hintergrundfarbe

	Vordergrund #007db3	Hintergrund #fdfdfd
RGB (8-Bit)	RGB(0, 125, 179)	RGB(253, 253, 253)
RGB (normiert)	RGB(0.0000, 0.4902, 0.7020)	RGB(0.9922, 0.9922, 0.9922)

Linearisierung der Farbwerte

Bisher wissen Sie, dass die Berechnung auf dem RGB-Farbmodell basiert. Jetzt kommt eine weitere Information dazu: Die WCAG geht von einer Farbdarstellung im sRGB-Farbraum aus. Aber was bedeutet das genau?

Der sRGB-Farbraum ist ein Standard, der genau festlegt, wie die einzelnen RGB-Werte interpretiert werden – also wie diese 3 Zahlen (z. B. RGB(0, 125, 179)) letzten Endes auf dem Bildschirm aussehen, insbesondere in Bezug auf Helligkeit und Farbwahrnehmung.

Was viele nicht wissen: Die RGB-Werte sind im sRGB-Farbraum nicht linear. Das bedeutet, dass ein Wert von 128 auf einer Skala von 0 bis 255 nicht der halben Helligkeit eines Werts von 255 entspricht.
Grund dafür ist eine sogenannte Gamma-Kodierung, mit der die Werte an die Wahrnehmung des menschlichen Auges angepasst wurden. Während das für die Darstellung auf Bildschirmen sinnvoll ist, führt es bei mathematischen Berechnungen – wie der Bestimmung der Helligkeit oder des Kontrastverhältnisses – zu falschen Ergebnissen.
Deshalb müssen die RGB-Werte zunächst (nach IEC/4WD 61966-2-1 – kostenpflichtige Norm) linearisiert werden. Erst durch diesen Schritt spiegeln sie die tatsächliche Lichtintensität korrekt wider und können als Grundlage für die Berechnung der relativen Luminanz verwendet werden.
Die RGB-Werte werden mit folgender Formel linearisiert:

Beispiel: Normierte und linearisierte RGB-Werte für Vorder- und Hintergrundfarbe

	Vordergrund #007db3	Hintergrund #fdfdfd
RGB (normiert)	RGB(0.0000, 0.4902, 0.7020)	RGB(0.9922, 0.9922, 0.9922)
RGB (linear)	RGB(0.0000, 0.2051, 0.4508)	RGB(0.9823, 0.9823, 0.9823)

Berechnung der relativen Luminanz

Nachdem die sRGB-Werte normiert und linearisiert wurden, können wir jetzt deren relative Luminanz nach WCAG berechnen. Die relative Luminanz ist die Helligkeit einer Farbe, angepasst an die menschliche Wahrnehmung. Da das menschliche Auge Grün beispielsweise intensiver wahrnimmt als Rot oder Blau, fließt der Grün-Anteil der Farbe stärker in die Helligkeits-Berechnung mit ein. Die Skala reicht dabei von 0 (Schwarz) bis 1 (Weiß).

L = 0.2126∙Rlin + 0.7152∙Glin + 0.0722∙Blin

Beispiel: Linearisierte RGB-Werte und berechnete Luminanz für Vorder- und Hintergrundfarbe

	Vordergrund #007db3	Hintergrund #fdfdfd
RGB (linear)	RGB(0.0000, 0.2051, 0.4508)	RGB(0.9823, 0.9823, 0.9823)
Luminanz	0.1792	0.9823

Berechnung des Kontrastverhältnisses

Aus den relativen Luminanzen zweier Farben lässt sich nun das Kontrastverhältnis berechnen, wie es von der WCAG definiert wird:

Hier ist zu berücksichtigen, dass die hellere Farbe L1 immer in Zähler steht, damit das Kontrastverhältnis einheitlich immer ≥ 1.0 ist.

Beispiel: Kontrastverhältnis berechnet aus den Luminanzen der Vorder- und Hintergrundfarbe

	Vordergrund #007db3	Hintergrund #fdfdfd
Luminanz	0.1792	0.9823
Kontrastverhältnis	(0.9823 + 0.05) ÷ (0.1792 + 0.05) ≈ 4.50 : 1

Das in diesem Beispiel errechnete Kontrastverhältnis von 4.5 : 1 erfüllt übrigens das WCAG-AA-Level. Bei der gewählten Farbkombination handelt es sich also um „barrierefreie Farben“.

Der Begriff „Farbkontrast“ ist nicht eindeutig definiert. Je nach Kontext (z. B. Farbtheorie, Fotografie, Mode, barrierefreies Design, etc.) kann er sich auf ganz unterschiedliche Dinge beziehen. Im barrierefreien Design ist „Farbkontrast“ die umgangssprachliche Bezeichnung für den technisch klar definierten „Kontrast“. Dieser ist messbar und bezieht sich auf den Helligkeitsunterschied (Luminanz) zwischen zwei Farben – ganz unabhängig vom Farbton.
Ziel ist es, den Kontrast möglichst hoch zu wählen, damit alle Inhalte gut wahrnehmbar und lesbar sind.

Aber Achtung: Ein hoher Kontrast hängt nicht davon ab, wie unterschiedlich Farben wirken, sondern allein von ihrem Helligkeitsunterschied. So kann etwa ein heller und ein dunkler Blauton einen sehr hohen Kontrast bilden – obwohl es sich um denselben Farbton handelt. Umgekehrt kann ein intensives Rot neben einem kräftigen Grün trotz starker Farbwirkung schwer lesbar sein, wenn beide Farben eine ähnliche Helligkeit haben.
Das im Anschluss gezeigte Beispielbild veranschaulicht diesen Unterschied deutlich.