Farbkontrastprüfer
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
WCAG Compliance
Normal Text
Large Text (18pt+ or 14pt+ bold)
UI Components & Graphics
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Wie unser Farbkontrastprüfer funktioniert
Gib deine Vordergrund- und Hintergrundfarben mit RGB-Hex-Werten ein oder wähle sie direkt mit dem Farbwähler aus.
Sie können:
- Stelle Alpha an, um zu ändern, wie transparent die Vordergrundfarbe ist.
- Benutze den Lightness-Schieberegler, um die Farbe heller oder dunkler wirken zu lassen.
Unser Tool berechnet dann das Kontrastverhältnis und vergleicht es mit den WCAG-Richtlinien:
- WCAG 2.0 Level AA
- Mindestens 4,5:1 für normalen Fließtext
- Mindestens 3:1 für große Texte
- WCAG 2.1 (UI & Grafik)
- Mindestens 3:1 für Symbole, Ränder und andere Interface-Komponenten
- WCAG Level AAA
- Mindestens 7:1 für normalen Text
- Mindestens 4,5:1 für große Texte
Großer Text bedeutet entweder:
- 14 Punkte (etwa 18,66 Punkte) und fett, oder
- 18 Punkte (etwa px) oder mehr
Du kannst die Pipette im Farbwähler benutzen, um genaue Farben von allem auf deinem Bildschirm zu erfassen. Es macht es einfach, echte Designs, Knöpfe oder Hintergründe zu testen.
Für Links, die nur auf Farbe angewiesen sind, um hervorzuheben, nutzen Sie unseren Farbkontrastprüfer, um sicherzustellen, dass sie den Barrierefreiheitsstandards entsprechen und für alle leicht lesbar bleiben.
API-Dokumentation folgt in Kürze
Documentation for this tool is being prepared. Please check back later or visit our full API documentation.
