Farbkontrastprüfer
Geben Sie unten Ihre Farbkombinationen ein, um sie mit unserem Farbkontrastprüfer zu testen und sofort zu sehen, ob sie den Barrierefreiheitsstandards entsprechen.
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
So funktioniert unser Farbkontrastprüfer
Geben Sie Ihre Vordergrund-- undHintergrund-Farben mithilfe von RGB-Hexadezimalwerten ein oder wählen Sie sie direkt mit dem Farbwähler aus.
- Passen Sie Alpha an, um die Transparenz der Vordergrundfarbe zu ändern.
- Verwenden Sie den Schieberegler Helligkeit, um die Farbe heller oder dunkler erscheinen zu lassen.
Unser Tool berechnet dann das Kontrastverhältnis und prüft es anhand der WCAG-Richtlinien:
- WCAG 2.0 Level AA
- Mindestens 4,5:1 für normalen Fließtext
- Mindestens 3:1 für großen Text
- WCAG 2.1 (Benutzeroberfläche und Grafiken)
- Mindestens 3:1 für Symbole, Rahmen und andere Schnittstellenkomponenten
- WCAG-Stufe AAA
- Mindestens 7:1 für normalen Text
- Mindestens 4,5:1 für großen Text
Großer Text bedeutet entweder:
- 14 pt (ca. 18,66 px) und fett, oder
- 18 pt (ca. px) oder größer
Sie können die Pipette im Farbwähler verwenden, um exakte Farben von allem auf Ihrem Bildschirm zu erfassen.
Verwenden Sie für Links, deren Hervorhebung allein durch die Farbe erfolgt, unseren Farbkontrastprüfer, um sicherzustellen, dass sie den Barrierefreiheitsstandards entsprechen und für alle gut lesbar bleiben.