Ausreichender Farbkontrast zwischen Text und Hintergrund ist eine der einfachsten und wirkungsvollsten Maßnahmen für eine zugängliche Website. Er hilft Menschen mit Sehschwäche, älteren Nutzerinnen und Nutzern, Menschen mit Farbsehschwäche – und allen, die ihr Smartphone in der Sonne bedienen. Die Web Content Accessibility Guidelines (WCAG) des W3C definieren dafür eine einfache Kennzahl: das Kontrastverhältnis. Es reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß).
Die WCAG-Grenzwerte
| Element | Stufe AA | Stufe AAA |
|---|---|---|
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text (≥ 24 px normal oder ≥ ca. 18,66 px fett) | 3:1 | 4,5:1 |
| Bedienelemente, Fokusrahmen, Icons, Diagrammlinien | 3:1 | – |
| Logos, rein dekorative Elemente, deaktivierte Schaltflächen | keine Anforderung | – |
In der Praxis ist AA der Maßstab: Er wird von Gesetzen und Normen verlangt. AAA ist für Fließtext empfehlenswert, aber für ganze Websites selten vollständig umsetzbar.
So wird der Kontrast berechnet
Grundlage ist die relative Leuchtdichte L einer Farbe (0 für Schwarz, 1 für Weiß). Sie wird aus den RGB-Werten berechnet, wobei Grün am stärksten und Blau am schwächsten gewichtet wird – entsprechend der Empfindlichkeit des Auges:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
(R, G, B jeweils linearisiert aus 0–255)
Kontrast = (L_hell + 0,05) ÷ (L_dunkel + 0,05)Beispiele (Text auf weißem Hintergrund #FFFFFF):
| Textfarbe | Kontrast | Normaler Text AA |
|---|---|---|
| #000000 (Schwarz) | 21:1 | erfüllt |
| #595959 (Dunkelgrau) | 7,0:1 | erfüllt, sogar AAA |
| #767676 (Mittelgrau) | 4,54:1 | erfüllt (knapp) |
| #777777 | 4,48:1 | nicht erfüllt |
| #999999 (Hellgrau) | 2,85:1 | nicht erfüllt |
| #0066CC (Blau) | 5,57:1 | erfüllt |
| #1A73E8 (helleres Blau) | 4,51:1 | erfüllt (knapp) |
Weiße Schrift auf farbigem Hintergrund:
| Hintergrund | Kontrast | Bewertung |
|---|---|---|
| #E30613 (Signalrot) | 4,88:1 | AA erfüllt |
| #2E7D32 (Dunkelgrün) | 5,13:1 | AA erfüllt |
| #4CAF50 (Hellgrün) | 2,78:1 | auch für großen Text zu wenig |
| #FFCC00 (Gelb) | 1,51:1 | ungeeignet – Schwarz auf Gelb erreicht 13,89:1 |
Eine Faustregel funktioniert nicht: Rot und Grün wirken kräftig, haben aber je nach Ton sehr unterschiedliche Helligkeiten. Messen Sie deshalb immer. Mit dem Kontrast-Prüfer geben Sie zwei Farben ein und sehen sofort, welche Stufen erfüllt sind.
Farbcodes verstehen: HEX, RGB, HSL
Dieselbe Farbe lässt sich unterschiedlich schreiben:
| Format | Beispiel | Hinweis |
|---|---|---|
| HEX | #0066CC |
je zwei Hexziffern für Rot, Grün, Blau |
| RGB | rgb(0 102 204) |
Werte 0–255 |
| HSL | hsl(210 100% 40%) |
Farbton, Sättigung, Helligkeit |
| mit Transparenz | rgb(0 102 204 / 0.8) |
Alpha 0–1 |
HSL ist für barrierefreie Paletten besonders praktisch: Sie behalten Farbton und Sättigung und verändern nur die Helligkeit (L), bis der Kontrast passt. Beachten Sie aber, dass die HSL-Helligkeit nicht der wahrgenommenen Leuchtdichte entspricht: Gelb und Blau mit gleichem L-Wert wirken sehr unterschiedlich hell. Umrechnungen zwischen den Formaten erledigt der Farbumrechner.
Transparenz: Halbtransparenter Text wird mit dem Hintergrund gemischt. Messen Sie den Kontrast mit der resultierenden, gemischten Farbe – nicht mit dem Ausgangswert.
Barrierefreie Farbpaletten aufbauen
- Markenfarben prüfen: Ist die Primärfarbe auf Weiß ≥ 4,5:1? Wenn nicht, für Text und Links eine dunklere Variante definieren und die Originalfarbe für Flächen und große Elemente nutzen.
- Abstufungen planen: Eine Skala von z. B. 50 bis 900 in mehreren Helligkeitsstufen erleichtert die Auswahl. Legen Sie fest, welche Stufen auf Weiß bzw. auf Dunkel für Text zugelassen sind.
- Dark Mode separat prüfen: Farben, die auf Weiß funktionieren, sind auf Dunkelgrau oft zu dunkel. Reines Weiß auf Schwarz kann blenden; ein helles Grau auf Fast-Schwarz ist angenehmer und erfüllt AAA trotzdem.
- Zustände nicht vergessen: Hover, Fokus, Fehlermeldungen, Platzhaltertext und Links im Fließtext brauchen eigene Kontrastprüfungen.
- Nicht nur Farbe: Informationen dürfen nicht allein über Farbe vermittelt werden. Pflichtfelder rot zu markieren genügt nicht; ein Text oder Symbol muss dazukommen. Etwa 8 % der Männer in Mitteleuropa haben eine Rot-Grün-Sehschwäche.
Rechtlicher Rahmen
- Deutschland: Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025. Es betrifft u. a. Online-Shops, Bank- und Telekommunikationsdienste, E-Books und Personenbeförderung gegenüber Verbrauchern. Ausgenommen sind Kleinstunternehmen bei Dienstleistungen (weniger als zehn Beschäftigte und höchstens 2 Mio. € Jahresumsatz bzw. Bilanzsumme). Technische Grundlage ist die europäische Norm EN 301 549, die für Webinhalte auf die WCAG-Kriterien der Stufe AA verweist. Für öffentliche Stellen gilt die BITV 2.0.
- Österreich: Das Barrierefreiheitsgesetz (BaFG) setzt dieselbe EU-Richtlinie um und gilt ebenfalls seit dem 28. Juni 2025; öffentliche Stellen fallen unter das Web-Zugänglichkeits-Gesetz.
- Schweiz: Für Bundesstellen gelten das Behindertengleichstellungsgesetz und der Standard eCH-0059, der sich an den WCAG orientiert.
Diese Hinweise sind keine Rechtsberatung. Ob Ihr Angebot unter das BFSG fällt, sollten Sie im Einzelfall prüfen lassen.
Typische Fehler
- Hellgraue Platzhalter in Formularfeldern als einzige Beschriftung.
- Text auf Fotos ohne abdunkelnde Fläche oder Schatten – der Kontrast wechselt mit dem Bildinhalt.
- Links nur durch Farbe vom Fließtext unterschieden, ohne Unterstreichung.
- Deaktiviert aussehende aktive Buttons, weil die Markenfarbe zu hell ist.
- Fokusrahmen entfernt (
outline: none) ohne gut sichtbaren Ersatz.
Kontrast ist ein Baustein guter Nutzbarkeit; ebenso wichtig sind Ladezeit und klare Struktur. Mehr dazu im Ratgeber Core Web Vitals erklärt.
Checkliste
- Fließtext ≥ 4,5:1, große Schrift und UI-Elemente ≥ 3:1.
- Markenfarben, Hover- und Fokuszustände gemessen.
- Dark Mode separat geprüft.
- Information nie nur über Farbe.
- Ergebnisse dokumentieren, etwa in der Erklärung zur Barrierefreiheit.