nTools

Farbkontrast erklärt: WCAG-Kontrastverhältnis, lesbarer Text und Farbformate

Aktualisiert:

Text ist gut lesbar, wenn er sich vom Hintergrund abhebt, und die Web Content Accessibility Guidelines (WCAG) machen daraus eine Zahl: das Kontrastverhältnis. WCAG 2.2, die aktuelle Fassung, ist seit dem 12. Dezember 2024 eine W3C-Empfehlung. Dieser Ratgeber erklärt, wie das Verhältnis berechnet wird, welche Grenzwerte für Text und Bedienelemente gelten und wie die üblichen Schreibweisen von Farben damit zusammenhängen.

Wie das Kontrastverhältnis berechnet wird

Jede Farbe wird in eine relative Leuchtdichte zwischen 0 für Schwarz und 1 für Weiß umgerechnet. Dazu werden Rot, Grün und Blau zuerst in Lichtstärke zurückverwandelt, denn sRGB-Werte sind nicht proportional zum Licht: Ein Wert bis 0,04045 (auf einer Skala von 0 bis 1) wird durch 12,92 geteilt, höhere Werte folgen einer Potenzkurve mit dem Exponenten 2,4. Dann werden sie danach gewichtet, wie hell das Auge sie empfindet: 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau. Vor Mai 2021 stand dort als Schwelle 0,03928; laut W3C hat die Änderung keine praktische Auswirkung.

Das Verhältnis ist (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 die hellere Farbe ist. Es reicht von 1:1 für zwei gleiche Farben bis 21:1 für Schwarz auf Weiß. Es wird nie gerundet: Die offizielle WCAG-Erläuterung sagt, dass 4,499:1 die Grenze 4,5:1 nicht erreicht. Prüfer, die auf eine Nachkommastelle runden, können deshalb ein Bestehen anzeigen, das keines ist.

Farbkontrast-Prüfer

Die Grenzwerte

WCAG kennt drei Stufen, A, AA und AAA; AA ist die Stufe, die die meisten Barrierefreiheitsvorgaben und Prüfungen anstreben. Drei Erfolgskriterien legen Mindestkontraste fest:

ErfolgskriteriumGilt fürMindestwertStufe
1.4.3 Kontrast (Minimum)Normaler Text4,5:1AA
1.4.3 Kontrast (Minimum)Großer Text3:1AA
1.4.6 Kontrast (erhöht)Normaler Text7:1AAA
1.4.6 Kontrast (erhöht)Großer Text4,5:1AAA
1.4.11 Nicht-Text-KontrastBedienelemente, Fokusrahmen, Symbole und Diagrammteile3:1AA

Großer Text heißt mindestens 18 Punkt oder 14 Punkt fett, nach Angabe des W3C etwa 24 und 18,5 CSS-Pixel. Text in einem Logo, rein dekorativer Text und der Text deaktivierter Bedienelemente haben keine Kontrastanforderung. Nicht-Text-Kontrast betrifft, was man sehen muss, um eine Seite zu bedienen: den Rand eines Textfelds, ein Kontrollkästchen, den Fokusrahmen, ein Symbol ohne Beschriftung, die Linien eines Diagramms.

Welche Farben auf Weiß bestehen

Kontrastverhältnisse auf Weiß, auf zwei Nachkommastellen abgeschnitten, wie der Prüfer sie zeigt:

Text / HintergrundKontrastWas es erfüllt
#000000 / #ffffff21:1Das Maximum: erfüllt alles
#0000ff / #ffffff8,59:1AAA für jeden Text
#595959 / #ffffff7:1Genau AAA für normalen Text
#767676 / #ffffff4,54:1AA für normalen Text
#777777 / #ffffff4,47:1Verfehlt AA für normalen Text; nur großer Text und Grafiken
#ff0000 / #ffffff3,99:1Nur großer Text und Grafiken
#949494 / #ffffff3,03:1Nur großer Text und Grafiken
#959595 / #ffffff2,99:1Erfüllt nichts, auch keine Rahmen oder Symbole
#ffff00 / #ffffff1,07:1Fast unsichtbar

#777777 und #767676 sehen gleich aus, und doch fällt die eine durch und die andere besteht: So schmal ist die Grenze. Reines Rot, beliebt für Fehlermeldungen, erreicht auf Weiß nur 3,99:1, genug für ein Symbol oder großen Text, aber nicht für eine Fehlermeldung in normalem Text; ein etwas dunkleres Rot wie #ee0000 erreicht 4,53:1.

Warum 4,5:1

Das W3C begründet 4,5:1 damit, dass dieser Wert den Verlust an Kontrastempfindlichkeit ausgleicht, der meist mit einer Sehschärfe von etwa 20/40 einhergeht, wie sie im Alter häufig ist, und 7:1 den bei etwa 20/80. Guter Kontrast hilft auch allen anderen: einem Handy in der Sonne, einem billigen Bildschirm, einem Beamer in einem hellen Raum.

Farbformate und was sie über den Kontrast sagen

#1a73e8, rgb(26 115 232), hsl(214 82% 51%) und oklch(57.4% 0.195 257.9) sind dasselbe Blau, viermal anders geschrieben. HEX und RGB geben die Anteile von Rot, Grün und Blau direkt an; HEX kann ein viertes Paar für die Transparenz anhängen, etwa #1a73e880 für 50 %. HSL beschreibt Farbton, Sättigung und Helligkeit, doch diese Helligkeit ist nicht die, die das Auge wahrnimmt: Gelb und Blau mit 50 % HSL-Helligkeit haben 96,8 % und 45,2 % OKLCH-Helligkeit. Deshalb besteht blauer Text auf Weiß und gelber nicht.

OKLCH aus CSS Color Level 4 ist so gebaut, dass gleiche Helligkeitsschritte gleich aussehen. Damit ist es das nützlichste Format, um eine Palette mit vorhersehbarem Kontrast zu entwerfen. Browser unterstützen es ab Chrome und Edge 111, Firefox 113 und Safari 15.4, und seit November 2025 ist es „Baseline widely available“. Der Kontrast wird trotzdem aus der sRGB-Farbe berechnet, die tatsächlich angezeigt wird; prüfen Sie das endgültige Paar also mit einem Kontrast-Prüfer.

Farbkonverter

Eine Farbe korrigieren, die durchfällt

Über WCAG 2 hinaus

Entwürfe von WCAG 3 haben mit einer anderen Kontrastmethode experimentiert, oft APCA genannt, die Schriftgröße und -stärke berücksichtigt und hellen Text auf dunklem Grund anders bewertet. Das ist ein Entwurf, kein Standard; Prüfungen und Gesetze verwenden weiter das WCAG-2-Verhältnis. In der Europäischen Union gilt der European Accessibility Act (Richtlinie 2019/882) seit dem 28. Juni 2025 für viele Produkte und Dienstleistungen, darunter den Onlinehandel.

Häufige Fragen

Reicht 4,47:1 statt 4,5:1?

Nein. Das Verhältnis wird nicht gerundet, also verfehlt 4,47:1 das Minimum von 4,5:1 für normalen Text. Es erfüllt aber 3:1 für großen Text und Grafiken.

Was gilt als großer Text?

Mindestens 18 Punkt, etwa 24 CSS-Pixel, oder 14 Punkt fett, etwa 18,5 CSS-Pixel.

Brauchen Rahmen und Symbole Kontrast?

Ja, wenn man sie braucht, um die Seite zu verstehen oder zu bedienen: 3:1 gegenüber den angrenzenden Farben. Der Rand eines Textfelds, ein Kontrollkästchen und der Fokusrahmen sind Beispiele.

Ändert der Dunkelmodus die Regeln?

Nein. Dieselben Verhältnisse gelten für jedes Farbschema; prüfen Sie also auch die dunkle Palette.

Liest sich mehr Kontrast immer besser?

Bis zu einem Punkt. Sehr hoher Kontrast wie reines Weiß auf reinem Schwarz kann manchen Lesern grell erscheinen; ab 7:1 ist der meiste Text angenehm zu lesen.

Quellen

  1. W3C — Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 12 December 2024
  2. W3C WAI — Understanding Success Criterion 1.4.3: Contrast (Minimum)
  3. W3C WAI — Understanding Success Criterion 1.4.11: Non-text Contrast
  4. W3C — CSS Color Module Level 4
  5. Web platform features explorer — oklab() and oklch()
  6. Directive (EU) 2019/882 on the accessibility requirements for products and services (European Accessibility Act)

Weitere Ratgeber