WCAG-Farbkontrast-Prüfer
Geben Sie eine Vordergrund- (Text-) und Hintergrundfarbe ein und erhalten Sie das exakte WCAG-2.1-Kontrastverhältnis mit Bestehen/Nichtbestehen-Ergebnissen für AA und AAA, normalen und großen Text, plus einer Live-Vorschau. Farben können als Hex oder rgb() eingegeben oder mit dem Farbwähler neben jedem Feld ausgewählt werden.
Zwölf Boxkämpfer jagen Viktor quer über den Sylter Deich
Beispieltext in normaler Größe, zum Vergleich.
Häufig gestellte Fragen
Wie wird das Kontrastverhältnis berechnet?
Mit der echten WCAG-2.1-Formel für relative Leuchtdichte auf den sRGB-Kanälen jeder Farbe, wobei dann die hellere und dunklere Leuchtdichte als (L1 + 0,05) / (L2 + 0,05) verglichen wird. Das Ergebnis reicht von 1:1 (identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß).
Was ist der Unterschied zwischen AA und AAA?
AA ist die Standard-WCAG-Konformitätsstufe, auf der die meisten Barrierefreiheitsanforderungen (einschließlich vieler rechtlicher Standards) basieren: 4,5:1 für normalen Text, 3:1 für großen Text. AAA ist eine strengere, optionale Stufe: 7:1 für normalen Text, 4,5:1 für großen Text.
Was gilt als „großer Text“?
WCAG definiert großen Text als 18pt (24px) in normaler Stärke oder größer, oder 14pt (etwa 18,66px) fett oder größer. Großer Text hat eine niedrigere Kontrastanforderung, da größere, fettere Striche auch bei geringerem Kontrast lesbar bleiben.
Kann ich Farben als RGB statt Hex eingeben?
Ja, sowohl das Vordergrund- als auch das Hintergrundfeld akzeptieren Hex (#3b82f6) oder rgb(59, 130, 246), oder Sie können den Farbwähler neben jedem Feld verwenden.