Farbkontrast prüfen: WCAG-2.2-Werte, HEX, RGB und HSL erklärt

Schlecht lesbarer Text kostet Leser, und er ist eines der häufigsten Barrierefreiheitsprobleme auf Websites. Die Web Content Accessibility Guidelines (WCAG) definieren dafür eine einfache Zahl: das Kontrastverhältnis zwischen Text und Hintergrund. In diesem Ratgeber erklären wir die Farbcodes, denen Sie begegnen (HEX, RGB und HSL), wie das Verhältnis berechnet wird und welche Grenzwerte gelten, und zeigen berechnete Beispiele für Farben, die im Web beliebt sind. Jedes Farbpaar können Sie mit unserem Tool Farbumrechner prüfen: Textfarbe eingeben, Hintergrund ergänzen, und es zeigt das Verhältnis, das WCAG-Ergebnis und die nächstgelegene Farbe, die besteht.

HEX, RGB und HSL: drei Schreibweisen für dieselbe Farbe

Bildschirme mischen jede Farbe aus rotem, grünem und blauem Licht. Alle drei gängigen Schreibweisen beschreiben dieselbe Mischung:

HEX und RGB sind exakt; bei der Umrechnung in HSL wird gerundet, deshalb kann sich eine Farbe beim Hin- und Herrechnen um eine Stufe verschieben. HSL ist beliebt, weil man eine Farbe mit einer einzigen Zahl heller oder dunkler machen kann. Für den Kontrast ist sein Helligkeitswert aber irreführend, wie gleich zu sehen ist.

So wird das Kontrastverhältnis berechnet

WCAG vergleicht die relative Leuchtdichte zweier Farben, also wie hell sie dem menschlichen Auge erscheinen. Jeder Farbkanal wird zuerst von der sRGB-Kurve in lineares Licht umgerechnet, dann werden die Kanäle danach gewichtet, wie empfindlich unser Auge für sie ist:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(R, G, B: linearisierte Kanalwerte zwischen 0 und 1)

Kontrastverhältnis = (L1 + 0.05) / (L2 + 0.05)
(L1 = hellere Farbe, L2 = dunklere Farbe)

Die Gewichte zeigen das Entscheidende: Grün trägt mehr als zehnmal so viel zur wahrgenommenen Helligkeit bei wie Blau. Das Verhältnis reicht von 1:1 (zweimal dieselbe Farbe) bis 21:1 (Schwarz auf Weiß). Seit Mai 2021 verwendet die Formel bei der sRGB-Umrechnung den Schwellenwert 0,04045 statt 0,03928; laut W3C hat das praktisch keine Auswirkung auf die Ergebnisse.

Die Grenzwerte in WCAG 2.2

Stufe AA ist das übliche Ziel und die Stufe, auf die sich die meisten Gesetze und Ausschreibungen beziehen. In der EU gilt seit dem 28. Juni 2025 der European Accessibility Act für viele digitale Produkte und Dienstleistungen, darunter Online-Shops; in Deutschland setzt ihn das Barrierefreiheitsstärkungsgesetz (BFSG) um. Die europäische Norm EN 301 549, mit der Barrierefreiheit häufig geprüft wird, baut auf WCAG auf.

Warum die HSL-Helligkeit täuscht

In HSL haben reines Gelb hsl(60, 100%, 50%) und reines Blau hsl(240, 100%, 50%) genau dieselbe Helligkeit von 50 %. Auf weißem Hintergrund könnte der Unterschied kaum größer sein:

Alle sieben Farben haben dieselbe HSL-Helligkeit, ihr Kontrast zu Weiß reicht aber von 1,07:1 bis 8,59:1. Reines Rot, das viele für eine kräftige Signalfarbe halten, erreicht auf Weiß nicht einmal 4,5:1. Beurteilen Sie Kontrast deshalb nie nach dem L-Wert in HSL, sondern berechnen Sie ihn.

Beliebte Farben, die mit weißer Schrift durchfallen

Weiße Schrift auf einem farbigen Button ist eine der häufigsten Kombinationen im Web und oft einer der häufigsten Fehler. Wir haben einige typische mittlere Farbtöne berechnet:

Weiße Schrift auf diesen blauen, grünen und orangen Buttons besteht höchstens für großen Text. Dahinter steckt eine einfache Regel: Bei jedem Hintergrund mit einer relativen Leuchtdichte über etwa 0,18 ergibt schwarze Schrift mehr Kontrast als weiße. Für die meisten hellen, gesättigten Farben ist schwarze Schrift also die lesbarere Wahl, auch wenn Weiß vertrauter wirkt.

Grauer Text: wo die Grenze liegt

Hellgrauer Text ist beliebt für Nebeninformationen, Bildunterschriften und Platzhalter in Formularen. Auf weißem Hintergrund liegen die Grenzen hier:

Dasselbe gilt für halbtransparenten Text. Schwarze Schrift mit 54 % Deckkraft sieht auf Weiß aus wie #757575 (4,61:1), mit 38 % wie #9E9E9E (2,68:1). Entscheidend ist die Farbe, die beim Leser ankommt; berechnen Sie transparente Farben deshalb auf dem Hintergrund, auf dem sie erscheinen.

Schritt für Schritt: Ihre Farben prüfen

1. Sammeln Sie die tatsächlichen Paare: Fließtext auf dem Seitenhintergrund, Linkfarbe, Buttontext auf der Buttonfarbe, Platzhaltertext in Eingabefeldern und Text auf Bildern oder farbigen Kästen.
2. Geben Sie die Textfarbe in unseren Farbumrechner ein und darunter den Hintergrund.
3. Prüfen Sie die Ergebnisse für normalen Text, großen Text und Grafiken. Für Fließtext brauchen Sie mindestens 4,5:1.
4. Fällt ein Paar durch, nehmen Sie den vorgeschlagenen nächstgelegenen Farbton: Er behält Farbton und Sättigung und ändert nur die Helligkeit, damit Ihr Design erkennbar bleibt.
5. Prüfen Sie den Dunkelmodus getrennt. Farben, die auf Weiß funktionieren, fallen auf dunklem Hintergrund oft durch, und umgekehrt.

WCAG 3 ist noch ein Arbeitsentwurf, und wie dort Kontrast gemessen wird, steht noch nicht fest. Bis daraus ein Standard wird, bleiben WCAG 2.2 und seine Grenzwerte die Grundlage für Gesetze und Prüfungen.

Farben umrechnen (HEX, RGB, HSL)Farben zwischen HEX, RGB, HSL und CMYK umrechnen, Farben visuell auswählen und den WCAG-Kontrast zu weißer und schwarzer Schrift prüfen.Tool öffnen

Tools aus diesem Ratgeber

• Farben umrechnen (HEX, RGB, HSL)

  Farben zwischen HEX, RGB, HSL und CMYK umrechnen, Farben visuell auswählen und den WCAG-Kontrast zu weißer und schwarzer Schrift prüfen.

  Tool öffnen

Häufige Fragen

Welches Kontrastverhältnis brauche ich für normalen Text?

Mindestens 4,5:1 für WCAG-Stufe AA, das übliche Ziel. Stufe AAA verlangt 7:1. Großer Text ab 24 px oder ab etwa 18,7 px fett braucht für AA mindestens 3:1.

Warum fällt weiße Schrift auf meinem blauen Button durch?

Viele kräftige Blautöne sind heller, als sie wirken. Weiße Schrift auf #2196F3 erreicht zum Beispiel nur 3,12:1. Dunkeln Sie das Blau ab, bis das Verhältnis mindestens 4,5:1 beträgt, oder verwenden Sie schwarze Schrift, die auf demselben Blau 6,72:1 erreicht.

Ist die HSL-Helligkeit dasselbe wie Helligkeit fürs Auge?

Nein. Die HSL-Helligkeit berücksichtigt nicht, wie unterschiedlich unser Auge auf Rot, Grün und Blau reagiert. Reines Gelb und reines Blau haben in HSL beide 50 % Helligkeit, Gelb hat auf Weiß aber einen Kontrast von 1,07:1 und Blau von 8,59:1.

Brauchen Logos und Icons einen bestimmten Kontrast?

Logos und Markennamen sind ausgenommen. Icons mit Bedeutung, Rahmen von Eingabefeldern und Fokusanzeigen brauchen nach Erfolgskriterium 1.4.11 der WCAG 2.2 mindestens 3:1 zu den angrenzenden Farben.

Werden meine Farben bei der Prüfung irgendwohin gesendet?

Nein. Unser Farbumrechner mit Kontrastprüfung läuft vollständig in Ihrem Browser. Nichts, was Sie eingeben, wird hochgeladen.

Reicht ein Verhältnis von 4,49:1?

Nein. Der Grenzwert ist ein Minimum und wird nicht gerundet: 4,49:1 verfehlt die Anforderung von 4,5:1. Wählen Sie einen etwas dunkleren oder helleren Farbton, bis das Verhältnis mindestens 4,5:1 beträgt.

Quellen und weiterführende Informationen

1. W3C: Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation of 12 December 2024 (www.w3.org)
2. W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum) (www.w3.org)
3. W3C: Relative luminance (definition and formula) (www.w3.org)
4. Directive (EU) 2019/882 – European Accessibility Act (eur-lex.europa.eu)