WCAG-Kontrast-Prüfer
Prüfen Sie die Barrierefreiheit Ihrer Text-/Hintergrundfarben.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Farben, die alle lesen können — in zwei Klicks geprüft
Fast jeder Zwölfte nimmt manche Kontraste schlecht wahr. Die WCAG (Web Content Accessibility Guidelines) legen Mindestverhältnisse zwischen Text und Hintergrund fest; dieser Prüfer berechnet sie live mit der offiziellen Formel der relativen Luminanz und zeigt eine echte Vorschau Ihrer Kombination.
-
Zwei Farben wählen
Mit dem Wähler oder durch Einfügen eines Hexcodes (#rrggbb oder #rgb).
-
Verhältnis ablesen
Von 1:1 bis 21:1, mit den vier AA/AAA-Urteilen für normalen und großen Text.
-
Bei Bedarf anpassen
Ändern Sie die Helligkeit einer Farbe bis zum Bestehen — die Vorschau hilft dabei.
Die WCAG-Schwellenwerte auf einen Blick
| Stufe | Normaler Text | Großer Text |
|---|---|---|
| AA (Minimum) | 4,5 : 1 | 3 : 1 |
| AAA (erweitert) | 7 : 1 | 4,5 : 1 |
| UI-Komponenten (2.1) | 3 : 1 | 3 : 1 |
Der Kontrast muss für jedes Text/Hintergrund-Paar Ihrer Oberfläche geprüft werden — denken Sie an Zustände: Hover-Links, deaktivierte Buttons, Platzhalter und Dunkelmodus.
Häufige Fragen
Was ist das Kontrastverhältnis?
Das Verhältnis zwischen der Luminanz der helleren und der dunkleren Farbe, von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). Die WCAG nutzen es, um die Lesbarkeit von Text für alle zu sichern, auch für sehbehinderte Menschen.
Welche Schwellenwerte muss ich erreichen?
Stufe AA: 4,5:1 für normalen Text, 3:1 für großen Text. Stufe AAA, strenger: 7:1 bzw. 4,5:1. AA ist in vielen Ländern das gesetzliche Minimum für öffentliche Dienste.
Was zählt als „großer Text“?
Laut WCAG: mindestens 18 pt (24 px) in normaler Stärke oder 14 pt (18,5 px) fett. Große Überschriften vertragen daher weniger Kontrast als Fließtext.
Gilt Kontrast auch für Nicht-Text-Elemente?
Ja: Seit WCAG 2.1 müssen Interface-Komponenten (Feldränder, informative Icons, Fokuszustände) 3:1 gegenüber angrenzenden Farben erreichen (Kriterium 1.4.11).
Mein Verhältnis reicht nicht: Wie korrigiere ich es?
Text dunkler oder Hintergrund heller machen (bzw. umgekehrt im Dunkelmodus). Oft genügen wenige Helligkeitsstufen — behalten Sie den Farbton bei und variieren Sie die Helligkeit, um Ihre Palette zu bewahren.