Welches Kontrastverhältnis verlangt WCAG?

WCAG 2.1 nennt zwei Schwellen. AA - die häufigste gesetzliche Untergrenze - fordert 4,5:1 für normalen Text und 3:1 für grossen Text (18 pt+, oder 14 pt+ fett). AAA hebt das auf 7:1 bzw. 4,5:1 an. Nicht-textliche UI-Komponenten und Grafiken brauchen 3:1 gegen den unmittelbaren Nachbarn.

Wie wird das Verhältnis berechnet?

Es ist das Verhältnis der relativen Leuchtdichte: (L_heller + 0,05) / (L_dunkler + 0,05). Die Leuchtdichte ist eine gewichtete Summe der gamma-korrigierten RGB-Kanäle (0,2126 R + 0,7152 G + 0,0722 B). Der Offset 0,05 stabilisiert die Formel an reinen Schwarz-Hintergründen. Das Ergebnis liegt zwischen 1:1 (identische Farben) und 21:1 (Schwarz auf Weiss).

Was zählt als «grosser Text»?

WCAG definiert grossen Text als 18 pt und mehr, ODER 14 pt und mehr in fett. Das sind ungefähr 24 px / 18,66 px in CSS-Pixeln bei den Standard-96-DPI. Grosser Text braucht nur 3:1 (AA) bzw. 4,5:1 (AAA), weil grössere Glyphen bei geringerem Kontrast besser lesbar bleiben - dünner, kleiner Text braucht mehr Abstand.

Ändert sich das Verhältnis im Dark Mode?

Ja - es hängt nur von den tatsächlich gerenderten Farben ab, daher musst du beide Modi prüfen. Ein `#475569` auf `#ffffff` schafft AA (6,5:1), aber wenn das Dark-Mode-Token auf `#475569` auf `#0f172a` umschaltet, bist du bei 1,6:1 und fällst klar durch. Beide Oberflächen testen - genau deshalb liefern Designer helle + dunkle Farbtokens, keine einzelne gemeinsame Palette.

Was ist mit kantengeglättetem Text oder Hintergrundbildern?

Das WCAG-Verhältnis geht von Volltonfarben aus. Für Text über einem Hintergrundbild prüft man den schlechtesten Pixel unter dem Text (meist der hellste bei dunklem Text). Bei Text mit halbdurchlässiger Rückplatte oder Schatten rechnet man das Verhältnis gegen die effektiv gerenderte Farbe. Die meisten Tools - auch dieses - prüfen nur Volltonpaare; bildbewusste Audits brauchen ein anderes Tool oder manuelle Inspektion.

Reicht das Bestehen von WCAG für Barrierefreiheit?

Kontrast ist notwendig, aber nicht hinreichend. Du brauchst auch lesbare Schriften, semantisches HTML, Alt-Texte, Tastaturbedienung, Fokus-Indikatoren (die selbst 3:1 zum Hintergrund schaffen müssen) und mehr. Kontrast ist der am leichtesten automatisierbare Accessibility-Test - daher die überproportionale Aufmerksamkeit - aber nur einer von vielen.

Kontrast-Prüfer

WCAG-Kontrast-Prüfer mit Live-Verhältnis, AA/AAA-Badges und Beispieltext.

Vordergrund

Hintergrund

Beispieltext

Fliesstext bei 14 pt regular - strengste Probe für normalen Textkontrast.

Fliesstext bei 16 pt regular - Standard-Textgrösse des Browsers.

Grosser fetter Text bei 14 pt - gilt als «gross» nach WCAG.

Grosser Text bei 18 pt regular - WCAG-Schwelle für «grossen Text».

Überschrift - 24 pt, viel Raum zum Atmen.

Kontrastverhältnis

14.68:1

AA normaler Text (4,5:1)Bestanden
AA grosser Text (3:1)Bestanden
AAA normaler Text (7:1)Bestanden
AAA grosser Text (4,5:1)Bestanden

Vordergrund- und Hintergrundfarbe wählen. Das Verhältnis aktualisiert sich live, und vier Badges zeigen, ob das Paar WCAG AA und AAA für normalen und grossen Text besteht. Beispieltext rendert in den tatsächlichen Grössen der Spezifikation (14 pt regular, 14 pt bold = gross, 18 pt = gross), damit man optisch nachprüfen kann - nicht nur an einer Zahl.

So funktioniert's

Farben wählen
Vordergrund- und Hintergrund-Picker nutzen oder Hex-Werte einfügen. Das Verhältnis aktualisiert sich live.
Badges ablesen
Vier Badges zeigen Pass/Fail für AA-normal, AA-gross, AAA-normal, AAA-gross. Welche zählen, hängt von deiner Textgrösse ab.
Tausch ausprobieren
Auf Tauschen klicken, um Vordergrund und Hintergrund zu vertauschen - hilfreich beim Entwerfen invertierter Zustände (gefüllte Buttons, invertierte Hinweise).
Optisch prüfen
Der Beispieltext rendert in den tatsächlichen WCAG-Grössen. Wenn das Verhältnis passt, der Text aber bröckelig wirkt, ist deine Schrift zu dünn - probier eine stärkere Strichstärke.

Was ist das?

Ein Kontrast-Prüfer berechnet das WCAG-Kontrastverhältnis zwischen zwei Farben - meist Text auf seinem Hintergrund - und meldet, ob das Paar jede WCAG-Stufe erfüllt. Das Verhältnis bildet das Verhältnis relativer Leuchtdichten (ein wahrnehmungsbasiertes Helligkeitsmass), mit einem Offset, der die Formel an den Extremen stabilisiert. Höher = lesbarer; 4,5:1 ist die WCAG-AA-Grenze für normalen Fliesstext, 7:1 die für AAA.

Wann verwenden

Jedes Text/Hintergrund-Paar im Design-System prüfen, Farben gegen rechtliche Accessibility-Anforderungen abgleichen (Section 508 in den USA, EN 301 549 in der EU, AODA in Ontario), Markenfarben wählen, die sowohl in hellem als auch dunklem Thema bestehen, Fokus-Ring-Farben mit 3:1 zur Umgebung sicherstellen, Chart-Farben gegen Gitterlinien prüfen und eine gewählte Palette vor dem Release gegenchecken.

Häufige Fehler

Nur die hellste Version eines Farb-Tokens testen (der Dark-Mode-Tausch fällt oft durch). 3:1 als «gut genug» für Fliesstext ansehen - das ist die Grenze für grossen Text; kleiner Fliesstext braucht 4,5:1. Vergessen, dass WCAG-Ausnahmen für deaktivierten Text bestehen, aber Endnutzern nicht helfen - wenn deaktivierter Text unlesbar ist, ist dein Formular kaputt. Farbpaare aus Screenshots freigeben - JPEG-Kompression verschiebt Töne; immer die tatsächlichen Hex-Werte aus den Design-Tokens prüfen.

FAQ

Welches Kontrastverhältnis verlangt WCAG?: WCAG 2.1 nennt zwei Schwellen. AA - die häufigste gesetzliche Untergrenze - fordert 4,5:1 für normalen Text und 3:1 für grossen Text (18 pt+, oder 14 pt+ fett). AAA hebt das auf 7:1 bzw. 4,5:1 an. Nicht-textliche UI-Komponenten und Grafiken brauchen 3:1 gegen den unmittelbaren Nachbarn.
Wie wird das Verhältnis berechnet?: Es ist das Verhältnis der relativen Leuchtdichte: (L_heller + 0,05) / (L_dunkler + 0,05). Die Leuchtdichte ist eine gewichtete Summe der gamma-korrigierten RGB-Kanäle (0,2126 R + 0,7152 G + 0,0722 B). Der Offset 0,05 stabilisiert die Formel an reinen Schwarz-Hintergründen. Das Ergebnis liegt zwischen 1:1 (identische Farben) und 21:1 (Schwarz auf Weiss).
Was zählt als «grosser Text»?: WCAG definiert grossen Text als 18 pt und mehr, ODER 14 pt und mehr in fett. Das sind ungefähr 24 px / 18,66 px in CSS-Pixeln bei den Standard-96-DPI. Grosser Text braucht nur 3:1 (AA) bzw. 4,5:1 (AAA), weil grössere Glyphen bei geringerem Kontrast besser lesbar bleiben - dünner, kleiner Text braucht mehr Abstand.
Ändert sich das Verhältnis im Dark Mode?: Ja - es hängt nur von den tatsächlich gerenderten Farben ab, daher musst du beide Modi prüfen. Ein `#475569` auf `#ffffff` schafft AA (6,5:1), aber wenn das Dark-Mode-Token auf `#475569` auf `#0f172a` umschaltet, bist du bei 1,6:1 und fällst klar durch. Beide Oberflächen testen - genau deshalb liefern Designer helle + dunkle Farbtokens, keine einzelne gemeinsame Palette.
Was ist mit kantengeglättetem Text oder Hintergrundbildern?: Das WCAG-Verhältnis geht von Volltonfarben aus. Für Text über einem Hintergrundbild prüft man den schlechtesten Pixel unter dem Text (meist der hellste bei dunklem Text). Bei Text mit halbdurchlässiger Rückplatte oder Schatten rechnet man das Verhältnis gegen die effektiv gerenderte Farbe. Die meisten Tools - auch dieses - prüfen nur Volltonpaare; bildbewusste Audits brauchen ein anderes Tool oder manuelle Inspektion.
Reicht das Bestehen von WCAG für Barrierefreiheit?: Kontrast ist notwendig, aber nicht hinreichend. Du brauchst auch lesbare Schriften, semantisches HTML, Alt-Texte, Tastaturbedienung, Fokus-Indikatoren (die selbst 3:1 zum Hintergrund schaffen müssen) und mehr. Kontrast ist der am leichtesten automatisierbare Accessibility-Test - daher die überproportionale Aufmerksamkeit - aber nur einer von vielen.