Kontrast und Lesbarkeit: WCAG-Kontrastwerte einfach erklärt

Ausreichender Kontrast bedeutet: Text und wichtige Bedienelemente heben sich so deutlich vom Hintergrund ab, dass auch Menschen mit eingeschränktem Sehvermögen sie gut erkennen. Die Web Content Accessibility Guidelines (WCAG) machen das messbar. Auf der üblichen Stufe AA braucht normaler Text ein Kontrastverhältnis von mindestens 4,5 zu 1, großer Text sowie Bedienelemente und Grafiken mit Bedeutung mindestens 3 zu 1.

Einen Überblick über alle Bereiche der Barrierefreiheit, von Alternativtexten bis zum Barrierefreiheitsstärkungsgesetz, gibt der Ratgeber Barrierefreies Webdesign. Hier geht es nur um Kontraste, dafür im Detail.

Was das Kontrastverhältnis aussagt

Das Kontrastverhältnis vergleicht die Helligkeit zweier Farben. Der kleinste mögliche Wert ist 1 zu 1, das bedeutet zwei identische Farben. Der größte Wert ist 21 zu 1, das entspricht Schwarz auf Weiß. Alle anderen Farbpaare liegen dazwischen.

Entscheidend ist dabei nur die Helligkeit, nicht der Farbton. Ein kräftiges Rot und ein kräftiges Grün können sehr unterschiedlich aussehen und trotzdem fast gleich hell sein. Für Menschen mit einer Rot-Grün-Sehschwäche verschwimmen solche Paare.

Die Grenzwerte im Überblick

Die Größenangaben stammen ursprünglich aus Punktgrößen: 18 Punkt entsprechen 24 CSS-Pixeln, 14 Punkt fett etwa 18,66 Pixeln. Gemessen wird die tatsächlich dargestellte Größe, nicht ein Wert in der Design-Datei.

Stufe AA ist der Maßstab, auf den sich Normen und Gesetze in der Regel beziehen. Stufe AAA ist für einzelne Inhalte sinnvoll, etwa lange Texte, wird aber selten für ganze Websites verlangt.

So wird der Kontrast berechnet

Sie müssen die Formel nicht beherrschen, um Kontraste zu prüfen. Wer sie einmal gesehen hat, versteht aber, warum manche Farbpaare überraschend schlecht abschneiden.

1. Farbkanäle umrechnen: Die Rot-, Grün- und Blauwerte von 0 bis 255 werden auf 0 bis 1 skaliert und anschließend linearisiert, weil Bildschirme Helligkeit nicht linear darstellen.
2. Relative Helligkeit bilden: Die drei Kanäle werden gewichtet addiert. Grün zählt am stärksten, Blau am schwächsten, weil das menschliche Auge Grün am hellsten wahrnimmt.
3. Verhältnis bilden: Die hellere Farbe wird durch die dunklere geteilt, wobei zu beiden ein kleiner Wert addiert wird.

L = 0,2126 · R + 0,7152 · G + 0,0722 · B   (linearisierte Kanäle)
Kontrast = (L_hell + 0,05) / (L_dunkel + 0,05)

Die Gewichtung erklärt ein bekanntes Phänomen: Reines Blau (#0000ff) erreicht auf Weiß etwa 8,6 zu 1, reines Rot (#ff0000) nur etwa 4 zu 1 und fällt damit für normalen Text durch.

Beispiele: Farbpaare im Test

Die Tabelle zeigt, wie knapp die Grenze verläuft: Ein einziger Wert im Farbcode entscheidet zwischen bestanden und nicht bestanden. Planen Sie deshalb etwas Spielraum ein, statt Farben exakt an der Grenze zu wählen.

Kontraste prüfen in der Praxis

Für die Prüfung gibt es mehrere Wege, die sich gut ergänzen:

• Kontrastrechner: Zwei Farbcodes eingeben, Ergebnis ablesen. Ideal, um eine Palette einmal vollständig durchzuprüfen.
• Browser-Entwicklerwerkzeuge: Gängige Browser zeigen beim Untersuchen eines Textelements das Kontrastverhältnis direkt an und markieren, ob AA oder AAA erreicht wird.
• Automatische Prüfwerkzeuge: Sie scannen ganze Seiten und melden Textstellen mit zu geringem Kontrast. Bei Text auf Bildern oder Verläufen stoßen sie an Grenzen.
• Design-Programme: Viele bieten Erweiterungen, die Kontraste schon im Entwurf prüfen.

Am effizientesten ist es, die Palette einmal systematisch zu prüfen und die erlaubten Kombinationen im Styleguide festzuhalten. Dann muss nicht jede neue Seite einzeln getestet werden. Wie Sie eine Palette mit Rollen und Abstufungen aufbauen, erklärt der Ratgeber Farbgestaltung.

Schwierige Fälle

Text auf Fotos

Über einem Bild wechselt der Hintergrund von Pixel zu Pixel. Der Kontrast muss an der hellsten Stelle hinter dem Text ausreichen. Sichere Lösungen sind eine halbtransparente dunkle Fläche hinter dem Text, ein Verlauf über dem relevanten Bildbereich oder Text neben statt auf dem Bild.

Platzhaltertext in Formularen

Grauer Platzhaltertext in Eingabefeldern ist oft zu blass. Wenn er wichtige Informationen enthält, gelten dieselben Werte wie für normalen Text. Besser ist es, Hinweise als sichtbare Beschriftung über dem Feld zu platzieren.

Fokusrahmen und Eingabefelder

Der Rahmen eines Eingabefelds und der Fokusrahmen, der bei Tastaturbedienung anzeigt, wo man sich befindet, müssen sich mit mindestens 3 zu 1 von ihrer Umgebung abheben. Ein hellgrauer Rahmen auf Weiß erfüllt das häufig nicht.

Dunkelmodus

Auf dunklem Hintergrund gelten dieselben Grenzwerte. Farben, die auf Weiß gut funktionieren, fallen auf Dunkel oft durch: Das Violett #5b21b6 erreicht auf Weiß etwa 9 zu 1, auf einem sehr dunklen Grau wie #121212 nur etwa 2 zu 1. Für den Dunkelmodus brauchen Akzentfarben deshalb hellere Varianten. Wie Sie dabei vorgehen, steht im Artikel Dark Mode gestalten.

Mehr als nur das Verhältnis

Ein bestandener Kontrasttest ist eine Mindestanforderung, keine Garantie für gute Lesbarkeit. Achten Sie zusätzlich auf:

• Schriftstärke: Dünne Schnitte wirken blasser als der Rechenwert.
• Schriftgröße: Kleine Texte profitieren von mehr Kontrast als dem Minimum.
• Farbe nicht allein: Fehler, Pflichtfelder und Status brauchen zusätzlich Text oder ein Symbol.
• Links erkennbar machen: Links im Fließtext sollten nicht nur durch Farbe auffallen, eine Unterstreichung ist die sicherste Lösung.
• Zu viel Kontrast: Reines Weiß auf reinem Schwarz kann bei langen Texten anstrengend wirken. Ein sehr dunkles Grau statt Schwarz ist meist angenehmer und erfüllt die Werte trotzdem deutlich.

Für die künftige Version WCAG 3 wird ein neues, stärker wahrnehmungsorientiertes Kontrastmodell diskutiert. Verbindlich und in Normen verankert ist bis auf Weiteres das hier beschriebene Verfahren aus WCAG 2.

Häufige Irrtümer

• “Unser Markenblau ist Pflicht, also ist der Kontrast egal.” Die Markenfarbe kann für Flächen und Logos bleiben. Für Text wird bei Bedarf eine dunklere Stufe derselben Farbe verwendet.
• “Auf meinem Bildschirm ist das gut lesbar.” Bildschirme unterscheiden sich in Helligkeit und Farbdarstellung stark. Der berechnete Wert ist unabhängig vom Gerät und deshalb der verlässliche Maßstab.
• “Große Überschriften brauchen keinen Kontrast.” Sie brauchen weniger, aber mindestens 3 zu 1.
• “Hover-Zustände zählen nicht.” Auch Text, der beim Überfahren mit der Maus die Farbe wechselt, muss in jedem Zustand lesbar bleiben.
• “Transparenz ist unproblematisch.” Halbtransparenter Text ergibt je nach Hintergrund unterschiedliche Kontraste. Geprüft wird die tatsächlich sichtbare Mischfarbe.

Checkliste: Kontraste auf Ihrer Website

• Fließtext erreicht mindestens 4,5 zu 1.
• Große Überschriften erreichen mindestens 3 zu 1.
• Button-Beschriftungen sind auf der Button-Farbe gut lesbar.
• Rahmen von Eingabefeldern und der Fokusrahmen erreichen 3 zu 1.
• Icons ohne Textbeschriftung erreichen 3 zu 1.
• Text auf Bildern hat eine sichere Unterlage.
• Der Dunkelmodus ist separat geprüft.
• Erlaubte Farbpaare sind im Styleguide dokumentiert.

Wer diese Punkte einmal sauber abarbeitet, löst das häufigste Barrierefreiheitsproblem im Web und macht die Website zugleich für alle angenehmer lesbar, etwa bei Sonnenlicht auf dem Smartphone.