Farbkontrast-Prüfer
Kontrast zwischen Vordergrund- und Hintergrundfarbe nach WCAG-2.1-AA- und AAA-Schwellenwerten prüfen.
Contrast ratio
Normal text AA
Normal text AAA
Large text AA
Large text AAA
UI components AA
Warum dieses Tool verwenden
03Zwei Farben eingeben und sofort das WCAG-2.1-Kontrastverhältnis sowie Bestanden/Nicht-bestanden-Ergebnisse für normalen Text, großen Text und nicht-textuelle UI-Komponenten erhalten.
Berechnet das genaue luminanzbasierte Kontrastverhältnis zwischen einer Vordergrund- und einer Hintergrundfarbe.
Zeigt die Einhaltung der WCAG-2.1-AA- und AAA-Schwellenwerte für normalen Text (4,5:1, 7:1), großen Text (3:1, 4,5:1) und nicht-textuelle UI (3:1) an.
So wird's verwendet
03Schnellcheck vor dem Kopieren
03Confirm the input is the format you intended.
Scan the result before using it in a document, URL, config, or message.
Copy only the output you need.
FAQ
03
Was ist der Unterschied zwischen AA und AAA?
AA ist die Basislinie, die von den meisten Barrierefreiheitsvorschriften gefordert wird. AAA ist ein strengeres erweitertes Niveau. Für normalen Text: AA ist 4,5:1 und AAA ist 7:1; für großen Text: AA ist 3:1 und AAA ist 4,5:1.
Was gilt als großer Text?
WCAG definiert großen Text als mindestens 18 pt (24 px) normal oder 14 pt (18,67 px) fett. Alles darunter fällt unter die Schwellenwerte für normalen Text.
Wie wird das Verhältnis berechnet?
Nach der WCAG-2.1-Formel: Jede Farbe in relative sRGB-Helligkeit konvertieren und dann (L1 + 0,05) / (L2 + 0,05) berechnen, wobei L1 der hellere ist. Das Verhältnis reicht von 1:1 bis 21:1.
Verwandte Tools
01Farb-Konverter→
Farben zwischen HEX, RGB, HSL und OKLCH konvertieren mit Live-Vorschau und Farbton-Schieberegler.