Plain Figures CreativeFarbkontrast prüfen (WCAG 2.2)
Kontrastverhältnis zwischen Text- und Hintergrundfarbe nach der Formel der WCAG 2.2 berechnen und sehen, welche Erfolgskriterien (1.4.3, 1.4.6, 1.4.11) erfüllt sind.
Kontrastverhältnis
15,24:1
Der Beispieltext zeigt die Farbkombination.
Großer Text
| Kriterium | Nötig | Ergebnis |
|---|---|---|
| 1.4.3 (AA) · Normaler Text | 4,5:1 | ✓ Erfüllt |
| 1.4.3 (AA) · Großer Text | 3,0:1 | ✓ Erfüllt |
| 1.4.6 (AAA) · Normaler Text | 7,0:1 | ✓ Erfüllt |
| 1.4.6 (AAA) · Großer Text | 4,5:1 | ✓ Erfüllt |
| 1.4.11 (AA) · Bedienelemente und Grafik | 3,0:1 | ✓ Erfüllt |
So funktioniert es
Für jede Farbe wird die relative Leuchtdichte berechnet, wie sie die WCAG 2.2 für den sRGB-Farbraum definieren; das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die Leuchtdichte der helleren Farbe ist. Es reicht von 1:1 bis 21:1.
Schwellen der WCAG 2.2: Text 4,5:1 und großer Text 3:1 für Stufe AA (1.4.3); 7:1 und 4,5:1 für Stufe AAA (1.4.6); 3:1 für Bedienelemente und Grafiken (1.4.11). Großer Text heißt mindestens 18 Punkt oder 14 Punkt fett.
Das Verhältnis wird auf zwei Nachkommastellen abgeschnitten angezeigt, damit ein Wert knapp unter einer Schwelle (4,499) nicht als 4,50 erscheint; verglichen wird mit dem genauen Wert. Nicht berücksichtigt sind Transparenz, Verläufe, Hintergrundbilder und die Ausnahmen der Kriterien (dekorativer Text, Logos).
Quellen
- Web Content Accessibility Guidelines (WCAG) 2.2: contrast ratio, relative luminance, success criteria 1.4.3, 1.4.6, 1.4.11, large scale text, World Wide Web Consortium (W3C) (abgerufen am 20. Oktober 2026)