Operativ
Farbkontrastprüfer
Werbung
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
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
Black on White
White on Blue
White on Dark Gray
Geben Sie unten Ihre Farbkombinationen ein, um sie mit unserem Farbkontrastprüfer zu testen und sofort zu sehen, ob sie den Barrierefreiheitsstandards entsprechen.
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.