Farbkontrast und Web-Zugänglichkeit: Ein vollständiger WCAG-Leitfaden

Jedes Mal, wenn Sie auf einer Website die Augen zusammenkneifen müssen, weil der Text zu hell ist, oder sich abmühen, ein Schaltflächen-Label zu lesen, das im Hintergrund verschwimmt, erleben Sie ein Kontrastversagen. Für die meisten Menschen ist das ein kleines Ärgernis. Für einen erheblichen Teil der Bevölkerung – Menschen mit Farbsehschwächen, Sehbehinderungen, nachlassender Sehkraft im Alter oder alle, die ein Gerät in hellem Sonnenlicht verwenden – macht es Inhalte tatsächlich unzugänglich. Farbkontrast ist einer der wirkungsvollsten und am häufigsten verletzten Aspekte der Web-Zugänglichkeit, und er gehört auch zu den einfachsten zu behebenden, sobald man die Regeln versteht. Dieser Leitfaden erklärt den Standard, die Mathematik, die häufigen Fehler und wie man den BrowseryTools Farbkontrast-Prüfer verwendet, um jedes Farbpaar sofort im Browser zu überprüfen.

Warum Kontrast wichtig ist

Die betroffene Bevölkerungsgruppe ist größer, als die meisten Designer annehmen. Laut der Weltgesundheitsorganisation haben weltweit rund 2,2 Milliarden Menschen irgendeine Form von Seh- oder Sehkraftbeeinträchtigung. Farbsehschwäche – umgangssprachlich Farbenblindheit genannt – betrifft etwa 8 % der Männer und 0,5 % der Frauen nordeuropäischer Abstammung, was bedeutet, dass rund 300 Millionen Menschen weltweit Schwierigkeiten haben, bestimmte Farben zu unterscheiden.

Über dauerhafte Beeinträchtigungen hinaus betrifft Kontrast jeden Menschen situationsbedingt:

• Das Lesen eines Smartphones in hellem Sonnenlicht lässt kontrastarmen Text vollständig verschwinden.
• Ältere oder günstigere Monitore haben reduzierte Helligkeit und schlechtere Farbgenauigkeit.
• Migräne-Betroffene und Menschen mit Lichtempfindlichkeit verwenden oft Displays mit reduzierter Helligkeit.
• Blendung durch Fenster oder Deckenlampen verringert den wahrgenommenen Kontrast erheblich.
• Gestresste Nutzer – also eigentlich alle – verarbeiten hochkontrastigen Inhalt schneller.

Guter Kontrast ist keine Nischenlösung. Er verbessert die Erfahrung für jeden Nutzer, auf jedem Gerät und unter jeder Beleuchtungsbedingung.

Was ist ein Kontrastverhältnis?

Das Kontrastverhältnis ist eine standardisierte Kennzahl, die ausdrückt, wie unterschiedlich zwei Farben hinsichtlich ihrer relativen Helligkeit (Leuchtdichte) sind. Es wird stets als Verhältnis ausgedrückt: die hellere Farbe dividiert durch die dunklere, wobei jeder Wert um 0,05 erhöht wird, um die Division durch null zu vermeiden und das Umgebungslicht realer Displays zu berücksichtigen.

Der Bereich reicht von 1:1 (zwei identische Farben – kein Kontrast, völlig unlesbar) bis 21:1 (reines Schwarz auf reinem Weiß – der maximal mögliche Kontrast). Je höher das Verhältnis, desto besser sind die beiden Farben zu unterscheiden.

Wie das Kontrastverhältnis berechnet wird

Die von WCAG (und dem gesamten Web-Standards-Ökosystem) verwendete Formel beruht auf dem Konzept der relativen Leuchtdichte – einem Maß dafür, wie viel Licht eine Farbe scheinbar aussendet, angepasst an die menschliche Wahrnehmung. Die Berechnung erfolgt in zwei Schritten.

Schritt 1: Relative Leuchtdichte (L) für jede Farbe berechnen.

Zunächst wird jeder RGB-Kanal vom Bereich 0–255 auf eine lineare Skala von 0–1 umgerechnet, anschließend wird eine Gamma-Expansionsformel angewendet, die berücksichtigt, wie Displays die Helligkeit kodieren:

// Für jeden Kanalwert c in [0, 1]:
if c <= 0.04045:
    c_linear = c / 12.92
else:
    c_linear = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

Die Koeffizienten 0,2126, 0,7152 und 0,0722 spiegeln die menschliche Farbempfindlichkeit wider: Unsere Augen reagieren am stärksten auf Grün, mäßig auf Rot und am schwächsten auf Blau.

Schritt 2: Das Kontrastverhältnis berechnen.

Kontrastverhältnis = (L_heller + 0.05) / (L_dunkler + 0.05)

Dabei ist L_heller die relative Leuchtdichte der helleren Farbe und L_dunkler die relative Leuchtdichte der dunkleren Farbe.

Berechnungsbeispiele

• Schwarz (#000000) auf Weiß (#FFFFFF): L(Weiß) = 1,0, L(Schwarz) = 0,0. Verhältnis = (1,0 + 0,05) / (0,0 + 0,05) = 1,05 / 0,05 = 21:1. Maximal möglicher Kontrast.
• Grau #767676 auf Weiß (#FFFFFF): L(#767676) ≈ 0,216. Verhältnis = (1,0 + 0,05) / (0,216 + 0,05) ≈ 1,05 / 0,266 ≈ 4,54:1. Dies besteht WCAG AA für normalen Text gerade noch.
• Grau #999999 auf Weiß (#FFFFFF): L(#999999) ≈ 0,319. Verhältnis = (1,0 + 0,05) / (0,319 + 0,05) ≈ 1,05 / 0,369 ≈ 2,85:1. Dies besteht WCAG AA für keinen Textgröße.

WCAG: Der Standard, der Anforderungen an die Barrierefreiheit definiert

Die Web Content Accessibility Guidelines (WCAG) werden vom World Wide Web Consortium (W3C) veröffentlicht und definieren den international anerkannten Standard für Web-Zugänglichkeit. Die aktuelle, weitverbreitete Version ist WCAG 2.1 aus dem Jahr 2018. WCAG 3.0 befindet sich in der Entwicklung und wird sie schließlich durch ein differenzierteres Messsystem ersetzen, doch WCAG 2.1 ist nach wie vor der maßgebliche Standard für Compliance-Zwecke.

WCAG gliedert Anforderungen in drei Konformitätsstufen: A (Minimum), AA (Standard) und AAA (erhöht). Stufe AA ist das, was die meisten rechtlichen Rahmenbedingungen verlangen. Stufe AAA ist ein angestrebtes Ziel und wird nicht für ganze Websites vorgeschrieben, sondern nur für bestimmte Kontexte.

Es ist wichtig zu beachten, worauf die Kontrastanforderungen nicht zutreffen: Dekorative Bilder ohne informativen Inhalt, Logos und Marken-Wortmarken sowie Text, der Teil einer inaktiven UI-Komponente ist (zum Beispiel ein deaktivierter Button), sind von den Kontrastanforderungen unter WCAG 2.1 ausgenommen. Die Absicht ist der Schutz informativer Inhalte, nicht rein dekorativer Elemente.

Farbpaare: Bestanden- und Nicht-bestanden-Beispiele

Das Kontrastverhältnis eines Farbpaares hängt ausschließlich von der relativen Leuchtdichte der beiden Farben ab – nicht davon, welche Farbe „schöner" ist oder welche ähnlich wirken. Hier sind repräsentative Beispiele aus dem gesamten Bestanden/Nicht-bestanden-Spektrum:

Häufige Kontrastfehler

Dieselben Fehler tauchen immer wieder in Zugänglichkeitsprüfungen im gesamten Web auf. Sie zu kennen, erleichtert es, sie in der eigenen Arbeit zu erkennen.

Hellgrauer Text auf Weiß

Dies ist das häufigste einzelne Kontrastversagen im modernen Web. Designtrends in Richtung Minimalismus haben eine Generation von Oberflächen hervorgebracht, in denen Fließtext, Bildunterschriften, Metadaten und Platzhaltertext in Tönen wie #aaaaaa, #bbbbbb oder #cccccc auf weißem Hintergrund dargestellt werden. Diese Kombinationen ergeben typischerweise Kontrastverhältnisse zwischen 1,5:1 und 2,5:1 – weit unter dem Minimum von 4,5:1. Der Designer kann es auf einem kalibrierten Studio-Monitor in einem abgedunkelten Raum lesen; der Endnutzer auf einem Smartphone im Nachmittagssonnenlicht hingegen nicht.

Weißer Text auf farbigen Schaltflächen

Weißer Text auf Gelb (#ffdd00), Limonengrün (#84cc16) oder hellem Orange (#fb923c) besteht WCAG AA bei keiner Textgröße. Diese Farbkombinationen sind visuell auffällig, aber der Kontrast ist zu gering. Dunkler Text (Schwarz oder sehr dunkles Grau) auf diesen hellen Hintergründen ist die barrierefreie Lösung – er erreicht in der Regel Verhältnisse über 10:1.

Platzhaltertext in Formularfeldern

Browser-Standard-Platzhaltertext – der Hinweistext in leeren Eingabefeldern vor der Eingabe – wird typischerweise mit rund 40 % Deckkraft der Textfarbe oder als Mittelgrau wie #aaaaaa dargestellt. Dies besteht WCAG AA fast nie. Platzhaltertext unterliegt denselben Kontrastanforderungen von 4,5:1 wie normaler Text, da er Informationen darüber vermittelt, was einzugeben ist.

Blaue Links auf farbigen oder dunklen Hintergründen

Die traditionelle blaue Hyperlink-Farbe (#0000ee) hat auf Weiß einen hervorragenden Kontrast (8,6:1), versagt aber auf farbigen Hintergründen. Auf einem mittellila Hintergrund erreicht derselbe blaue Link nur etwa 1,7:1. Link-Farben müssen nicht nur gegen den Seitenhintergrund geprüft werden, sondern auch gegen farbige Abschnitte oder Karten, in denen sie erscheinen.

Deaktivierte Zustände und Fokusindikatoren

Obwohl WCAG 2.1 deaktivierte UI-Komponenten von den Kontrastanforderungen ausnimmt, müssen Fokusindikatoren – der sichtbare Ring oder Rahmen, der beim Tabben auf ein fokussierbares Element erscheint – unter WCAG 2.2 einen Kontrast von 3:1 gegenüber den angrenzenden Farben aufweisen. Viele Websites unterdrücken den Browser-Standard-Fokusring mit outline: none und bieten keinen Ersatz, was für Tastatur-Nutzer ein Zugänglichkeitsproblem darstellt.

Techniken zur Wahl barrierefreier Farben

Dunkel auf Hell als Standard

Die einfachste Standardeinstellung für Text ist nahezu schwarzer Text auf weißem oder sehr hellgrauem Hintergrund. Verhältnisse über 10:1 sind leicht erreichbar und geben enorme Flexibilität bei Schriftgröße und -stärke. Helle-auf-dunkel-Farbschemata (Dark Mode) sollte man sekundären Flächen vorbehalten und den Kontrast in beiden Designs sorgfältig prüfen.

Alle interaktiven Zustände prüfen

Der Standard-Zustand einer Schaltfläche besteht möglicherweise AA, während ihr Hover-Zustand – der den Hintergrund aufhellt – unter 4,5:1 fällt. Standard-, Hover-, Fokus-, Aktiv- und deaktivierten Zustand separat prüfen. Der deaktivierte Zustand ist von der Anforderung ausgenommen, alle anderen müssen bestehen.

Die 60-30-10-Regel barrierefrei anwenden

Die 60-30-10-Farbregeln (60 % Hauptfarbe, 30 % Sekundärfarbe, 10 % Akzentfarbe) ist hilfreich für die visuelle Hierarchie. Sie barrierefrei anzuwenden bedeutet: Text in jeder dieser drei Farbzonen einzeln auf den Kontrastschwellenwert prüfen. Die Akzentfarbe bei 10 % ist oft die problematischste – kräftige Akzentfarben in Kombination mit entweder weißem oder dunklem Text können bei bestimmten Farbton- und Sättigungskombinationen versagen.

Den Farbkontrast-Prüfer nutzen, bevor man sich festlegt

Der günstigste Zeitpunkt, ein Kontrastproblem zu beheben, ist noch vor dem Programmieren. Wenn man in einem Design-Tool Farben auswählt, sollte man die geplanten Text-/Hintergrundpaare sofort prüfen. Eine Anpassung der Helligkeit einer Farbe um 10–15 % bringt oft eine nicht bestandene Kombination in die Compliance, ohne den visuellen Charakter des Designs wesentlich zu verändern.

Rechtliche Anforderungen

WCAG-Konformität ist in vielen Jurisdiktionen nicht rein freiwillig. Rechtliche Rahmenbedingungen, die auf WCAG AA verweisen, umfassen:

• Vereinigte Staaten – Americans with Disabilities Act (ADA): Das ADA verbietet Diskriminierung aufgrund von Behinderungen an öffentlich zugänglichen Stätten. Bundesgerichte und das Justizministerium haben dies auf gewerbliche Websites ausgeweitet. Tausende von ADA-Klagen werden jährlich bei US-Bundesgerichten eingereicht, wobei Farbkontrastverstöße häufig in Abmahnungen zitiert werden.
• Europäische Union – EN 301 549: Die EU-Richtlinie zur Web-Zugänglichkeit schreibt WCAG 2.1 Stufe AA für öffentliche Websites und mobile Apps vor. EN 301 549 ist der für die Beschaffung verwendete technische Standard. Auch privatwirtschaftliche Organisationen in regulierten Branchen sehen sich zunehmenden Anforderungen gegenüber.
• Kanada – AODA (Accessibility for Ontarians with Disabilities Act): Ontario schreibt WCAG 2.0 Stufe AA für privatwirtschaftliche Organisationen mit 50 oder mehr Mitarbeitenden sowie für alle Organisationen des öffentlichen Sektors vor.
• Vereinigtes Königreich – Equality Act 2010: Dienstleister sind verpflichtet, für Menschen mit Behinderungen angemessene Anpassungen vorzunehmen, was die britische Regierung auf die Zugänglichkeit von Websites anwendet.

Jenseits rechtlicher Risiken fordern viele Unternehmenskunden und Ausschreibungsverfahren der öffentlichen Hand inzwischen WCAG-AA-Konformität in Lieferantenverträgen. Barrierefreiheits- Compliance ist zunehmend eine kommerzielle Anforderung, nicht nur eine ethische.

Wer profitiert – über Menschen mit Behinderungen hinaus

Barrierefreier Kontrast ist gutes Design für alle. UX-Forschung zeigt konsistent, dass hochkontrastiger Text von allen Nutzergruppen schneller und mit weniger Fehlern gelesen wird. Diejenigen, die nachweislich am meisten profitieren:

• Menschen mit Farbsehschwäche (Rot-Grün-Schwäche, Blau-Gelb-Schwäche oder Achromatopsie)
• Ältere Erwachsene, bei denen die Kontrastempfindlichkeit mit dem Alter natürlich abnimmt
• Menschen mit Sehbehinderungen, die keine Bildschirmvergrößerung verwenden
• Nutzer in lichtstarken Umgebungen (im Freien, in der Nähe von Fenstern)
• Nutzer mit minderwertigen, veralteten oder günstigen Displays
• Alle unter kognitiver Belastung – bei Müdigkeit oder Ablenkung reduziert hoher Kontrast Lesefehler

So verwendet man den BrowseryTools Farbkontrast-Prüfer

Der BrowseryTools Farbkontrast-Prüfer macht es kinderleicht, jede Farbkombination gegen WCAG-Standards zu prüfen:

• Hex-Codes eingeben: Einen gültigen Hex-Farbcode (3 oder 6 Ziffern, mit oder ohne #-Präfix) in die Vordergrund- und Hintergrundfelder eingeben oder einfügen.
• Das Verhältnis sofort ablesen: Das Kontrastverhältnis wird in Echtzeit berechnet und angezeigt, während man tippt – kein Klicken erforderlich.
• AA- und AAA-Badges: Klare Bestanden/Nicht-bestanden-Badges für Stufe AA Normal, Stufe AA Groß, Stufe AAA Normal und Stufe AAA Groß werden angezeigt, damit man genau erkennt, welche Schwellenwerte das Farbpaar erfüllt.
• Live-Vorschau: Das Tool zeigt eine Textprobe auf dem gewählten Hintergrund, sodass man die Kombination so sehen kann, wie sie für einen Nutzer aussehen würde.
• Farbauswahl nutzen: Wer keinen bestimmten Hex-Wert im Kopf hat, kann mit dem integrierten Farbwähler Farben visuell auswählen und sofort sehen, wie sich das Verhältnis beim Navigieren durch den Farbraum verändert.