Kostenloses Tool
Color Contrast Checker
Überprüfen Sie Kontrastverhältnisse zwischen Vordergrund- und Hintergrundfarben. Sehen Sie WCAG 2.1 AA und AAA Konformität für normalen und großen Text sofort.
Color Contrast Checker
The quick brown fox
Normaler Text
Contrast ratio: 14.10:1
Kontrastverhältnis
14.10:1
WCAG AA
Normaler Text
WCAG AAA
Normaler Text
WCAG AA Large
Großer Text
WCAG AAA Large
Großer Text
Warum Kontrastverhältnis wichtig ist
Ausreichender Farbkontrast stellt sicher, dass Text für Benutzer mit Sehbehinderung oder Farbblindheit lesbar bleibt. WCAG 2.1 Level AA (der von den meisten Barrierefreiheitsgesetzen geforderte Standard) erfordert ein Verhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (18px+ oder 14px+ fett).
Verwendungsanleitung
- Wählen Sie Ihre Textfarbe mit der Farbwahl oder geben Sie einen Hex-Wert ein.
- Wählen Sie auf die gleiche Weise Ihre Hintergrundfarbe aus.
- Lesen Sie das Kontrastverhältnis und die WCAG Bestanden/Nicht bestanden Abzeichen sofort ab.
- Verwenden Sie die Voreinstellungen für schnelle Referenzpaare.
- Klicken Sie auf CSS kopieren, um das Farbpaar als CSS-Eigenschaften zu kopieren.
Alle Berechnungen erfolgen in Ihrem Browser – keine Farbdaten werden an einen Server gesendet.
Häufig gestellte Fragen
- Was ist der Unterschied zwischen WCAG AA und AAA?
- WCAG AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text. AAA (die verbesserte Stufe) erfordert 7:1 und 4,5:1. Die meisten Barrierefreiheitsstandards und gesetzlichen Anforderungen beziehen sich auf AA.
- Was gilt als großer Text?
- WCAG definiert großen Text als 18pt (24px) oder größer, oder 14pt (ca. 18,67px) fett oder größer.