WCAG-Kontrastrechner
Prüfen Sie das Kontrastverhältnis eines Text-/Hintergrundpaares gegen WCAG AA und AAA — mit Live-Vorschau bei normaler und großer Schriftgröße.
795 Aufrufe
Zwölf Boxkämpfer jagen Viktor quer über den Sylter Deich
Beispiel großer Text 24px
Was das Verhältnis bedeutet
Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben, von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). WCAG verlangt 4,5:1 für normalen Text (AA) und 3:1 für großen Text (≥24 px oder ≥18,7 px fett); die strengere AAA-Stufe verlangt 7:1 und 4,5:1. UI-Komponenten und Grafiken benötigen 3:1 gegenüber angrenzenden Farben.
Die Berechnung linearisiert jeden sRGB-Kanal, gewichtet ihn (L = 0,2126R + 0,7152G + 0,0722B) und berechnet (L₁+0,05)/(L₂+0,05). Die Intuition täuscht hier oft — mittleres Grau #777 auf Weiß wirkt für viele Augen gut lesbar, erreicht aber nur 4,48:1, knapp unter AA. Die Sicherheitsmargen sind für sehbehinderte Nutzer, Sonnenlicht und billige Bildschirme gedacht.
Häufig gestellte Fragen
Ändert das Vertauschen von Text und Hintergrund das Verhältnis?
Nein — die Formel setzt immer die hellere Farbe in den Zähler, das Verhältnis ist symmetrisch. Die Lesbarkeit kann subjektiv trotzdem variieren (Halo-Effekt bei hell auf dunkel), aber der WCAG-Wert ist identisch.
Was zählt als großer Text?
24 px (18 pt) normal oder etwa 18,7 px (14 pt) fett und größer. Großer Text benötigt bei AA nur 3:1, weil größere Zeichen auch bei geringerem Kontrast lesbar bleiben.
Meine Markenfarbe besteht den Test nicht — was nun?
Behalten Sie sie für Dekoration und verschieben Sie die Textverwendung dunkler oder heller, bis sie besteht; eine Ton-/Schattenskala hilft dabei. Platzhaltertext und deaktivierte Zustände sind von der Anforderung ausgenommen, sollten aber trotzdem vernünftig bleiben.
Ähnliche Tools
Problem melden
WCAG-Kontrastrechner