Über dieses Tool
Check color contrast ratios between foreground text and background colors according to WCAG 2.1 accessibility guidelines. Geben Sie Farben als Hex-Codes, RGB-Werte oder HSL-Werte ein und sehen Sie sofort das Kontrastverhältnis sowie die Pass/Fail-Ergebnisse für die WCAG AA- und AAA-Konformität bei normalen und großen Textgrößen.
Häufig gestellte Fragen
- Welches Kontrastverhältnis ist für die WCAG-Konformität erforderlich?
- WCAG AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt+ fett). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. The maximum possible ratio is 21:1 (black on white).
- Warum ist Farbkontrast wichtig?
- Ein ausreichender Kontrast stellt sicher, dass der Text für Benutzer mit Sehbehinderung, Farbenblindheit oder Personen, die Bildschirme bei hellem Sonnenlicht betrachten, lesbar ist. Für viele Websites ist dies auch eine gesetzliche Anforderung gemäß den ADA- und EU-Zugänglichkeitsbestimmungen.
- Was gilt in der WCAG als „großer Text“?
- Großer Text ist als 18pt (24px) und höher für normale Schriftstärke bzw. 14pt (18,66px) und höher für fetten Text definiert. Bei großem Text sind die Anforderungen an den Kontrast geringer, da er von Natur aus besser lesbar ist.
- Prüft dieses Tool den Kontrast für Nicht-Text-Elemente?
- WCAG 2.1 requires a 3:1 contrast ratio for UI components and graphical objects (buttons, icons, form fields). Sie können dieses Tool auch verwenden, um diese zu überprüfen – geben Sie einfach die Komponenten- und Hintergrundfarben ein.