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.

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.

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:

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

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.

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.

 

Hohe Farbkontraste sind im barrierefreien Design besonders wichtig, weil sie dafür sorgen, dass Inhalte für alle wahrnehmbar und bedienbar werden. Farbkontrast entscheidet maßgeblich darüber, wie gut Informationen auf einer Website oder in einem Dokument erfasst werden können. Gerade bei digitalen Inhalten hängt die Lesbarkeit von Texten, die Erkennbarkeit von Bedienelementen oder die Verständlichkeit von Grafiken stark vom Kontrast ab.
Ein zu geringer Kontrast kann dazu führen, dass Inhalte übersehen oder missverstanden werden – besonders für Menschen mit eingeschränktem Sehvermögen. Doch auch Nutzer ohne Einschränkungen profitieren von klaren Kontrasten, zum Beispiel bei schlechter Beleuchtung oder auf mobilen Geräten im Freien.
Deshalb ist der Farbkontrast nicht nur ein Designaspekt, sondern ein zentrales Kriterium für digitale Zugänglichkeit und Benutzerfreundlichkeit.

Es sind alle die Inhalte relevant, die auch eine echte inhaltliche Funktion erfüllen. Das können z. B. Texte, Bilder, Diagramme, Symbole und Bedienelemente sein. Besonders wichtig ist jedoch der Kontrast zwischen Text und Hintergrund, da Texte den Hauptinhalt vieler Webseiten und Dokumente ausmachen. Auch interaktive Elemente wie Formulare oder Buttons müssen deutlich erkennbar sein, um zuverlässig genutzt werden zu können.

Reine Designelemente oder dekorative Grafiken fallen nicht darunter – sie haben keine inhaltliche Funktion und müssen daher auch keine Mindestkontraste erfüllen.

Mindestkontraste im barrierefreien Design sind in erster Linie dafür gedacht, Menschen mit eingeschränktem Sehvermögen zu unterstützen – etwa bei altersbedingter Sehschwäche, Grauem Star (Katarakt) oder einer Farbenfehlsichtigkeit wie der Rot-Grün-Schwäche.

Doch auch Menschen ohne Sehbeeinträchtigung profitieren enorm davon. Fragen Sie sich einmal selbst: Hatten Sie schon einmal Schwierigkeiten, Inhalte auf dem Display bei starker Sonneneinstrahlung zu erkennen? Ein hoher Farbkontrast kann auch in solchen Alltagssituationen den Unterschied machen.

Daher gilt: Farbkontrast spielt nicht nur im barrierefreien Design eine große Rolle – ein hoher Kontrast optimiert die Nutzbarkeit für alle!

Ein zu geringer Farbkontrast zwischen Vorder- und Hintergrund kann die Wahrnehmung und Lesbarkeit erheblich einschränken – selbst für Menschen ohne Sehbehinderung. Besonders betroffen sind dabei Inhalte, die schnell erfassbar oder interaktiv sein müssen.

Nachteile bei schlechtem Kontrastverhältnis:

• Schlechte Lesbarkeit von Fließtexten, besonders bei kleiner Schriftgröße
• Erhöhte kognitive Belastung und schnellere Ermüdung beim Lesen
• Fehler bei der Dateneingabe, z. B. in Formularen
• Höheres Risiko, Inhalte zu übersehen (z. B. Buttons, Links, Fehlermeldungen)
• Wichtige Call-to-Actions (z. B. „Jetzt kaufen“ in Hellgrau auf Weiß) werden möglicherweise nicht wahrgenommen – was direkt zu Umsatzverlust führen kann
• Höhere Absprungrate, vor allem bei mobilen Geräten oder schwierigen Lichtverhältnissen
• Ausschluss von Menschen mit Sehbehinderungen
• Ggf. Rechtsverletzung (BFSG und BITV)
• Barrierefreie Labels oder Prüfsiegel (z. B. BITV-Zertifizierung) können nicht erreicht werden

Ein ausreichender Farbkontrast verbessert nicht nur die Barrierefreiheit, sondern steigert auch ganz allgemein die Benutzerfreundlichkeit und visuelle Klarheit von Inhalten – auf allen Geräten und für alle Nutzergruppen.

Vorteile bei gutem Kontrastverhältnis:

• Bessere Lesbarkeit von Texten in allen Schriftgrößen
• Geringere kognitive Belastung und bessere Nutzerzufriedenheit
• Höhere Auffindbarkeit wichtiger Elemente wie Buttons oder Links
• Sicherere und schnellere Bedienung von Formularen und interaktiven Bereichen
• Positiver Einfluss auf Verweildauer, Conversionrate und Nutzerbindung
• Verbesserte Nutzbarkeit bei ungünstigen Lichtverhältnissen (z.  Sonnenlicht)
• Zugänglichkeit für Menschen mit Sehbehinderungen
• Rechtskonformität

Trotz klarer technischer Definitionen und Richtlinien rund um Farbkontrast halten sich in der Praxis einige Missverständnisse hartnäckig – gerade in Designprozessen. Die folgenden Aussagen klingen vertraut, führen aber häufig zu nicht barrierekonformen Ergebnissen:

• „Hellgrau ist modern“ → Das stimmt – aber nur, wenn der Kontrast ausreichend ist. Modisches Design darf nicht zulasten der Lesbarkeit gehen.
• „Kontrast ist Geschmackssache“ → Nein – Kontrast ist nach WCAG klar messbar und objektiv prüfbar.
• „Meine Zielgruppe sieht gut“ → Barrierefreies Design bietet nicht nur Vorteile für Menschen mit Sehbehinderung. Es erhöht die Nutzbarkeit für alle.
• „Das ist doch nur eine Design-Frage.“ → Nein – Farbkontrast hat nicht nur Auswirkung auf die Ästhetik, sondern auch auf die Wahrnehmbarkeit und Nutzbarkeit von Inhalten.

Diese und ähnliche Aussagen führen schnell dazu, dass Kontrastanforderungen unterschätzt oder ignoriert werden – mit negativen Folgen für Benutzerfreundlichkeit und Zugänglichkeit.