Farbzugänglichkeits-Prüfung

Geben Sie eine Vordergrund- und Hintergrundfarbe (Hex-Codes) ein, um ihr Kontrastverhältnis und ihre WCAG-Konformität zu prüfen.

Farbeingaben

Vordergrundfarbe

Hintergrundfarbe

Textvorschau

Dies ist großer, fetter Text.

Dies ist normal großer Text.

Kontrastverhältnis

21.00:1

Kontrastverhältnis

Normaler Text (AA)

AAA

Großer Text (AA)

18pt+ or 14pt+ bold

AAA

UI-Komponenten (AA)

Buttons, form controls, etc.

WCAG Accessibility Guidelines

Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1

Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1

Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image

So verwenden Sie Farbzugänglichkeits-Prüfung

1
Zwei Farben eingeben
Geben Sie eine Vordergrundfarbe (Text) und eine Hintergrundfarbe als Hex-Codes an, zum Beispiel #1a1a1a und #ffffff.
2
Kontrast prüfen
Klicken Sie auf „Barrierefreiheit prüfen“, um das Kontrastverhältnis zwischen den beiden Farben zu berechnen.
3
WCAG-Ergebnisse prüfen
Sehen Sie Bestanden- oder Nicht-bestanden-Kennzeichnungen für AA und AAA bei normalem Text, großem Text und UI-Komponenten und betrachten Sie die Live-Vorschau.

4
Bei Bedarf anpassen
Tauschen Sie die Farben oder passen Sie einen Hex-Wert an, bis die Kombination die von Ihrem Projekt geforderte WCAG-Stufe erfüllt.

Häufig gestellte Fragen

Was ist ein Kontrastverhältnis und was gilt als gut?

Das Kontrastverhältnis misst den Helligkeitsunterschied zwischen Text und seinem Hintergrund, von 1:1 bis 21:1. WCAG verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text auf der Stufe AA sowie 7:1 und 4,5:1 auf der strengeren Stufe AAA.

Was ist der Unterschied zwischen AA und AAA?

AA ist die Stufe, die die meisten Websites und gesetzlichen Vorgaben anstreben, während AAA eine erweiterte Stufe für maximale Lesbarkeit ist. Der Checker zeigt für beide Bestanden oder Nicht bestanden an, sodass Sie die für Ihre Bedürfnisse passende Messlatte wählen können.

Warum besteht großer Text, während normaler Text durchfällt?

Großer Text, definiert als etwa 18 pt oder 14 pt fett und größer, ist leichter zu lesen, daher erlaubt WCAG dafür einen niedrigeren Kontrastschwellenwert. Dasselbe Farbpaar kann daher die Regeln für großen Text erfüllen, während es die Anforderung für normalen Text nicht erfüllt.

Welches Farbformat sollte ich eingeben?

Geben Sie Farben als Hex-Codes in der Form #RRGGBB oder als Kurzform #RGB ein. Das Tool prüft Ihre Eingabe und zeigt eine Live-Vorschau von normalem und großem Text, sodass Sie das tatsächliche Ergebnis sehen.

Ist der Checker kostenlos und sendet er meine Farben irgendwohin?

Er ist völlig kostenlos und ohne Anmeldung nutzbar, und die Kontrastberechnung läuft vollständig in Ihrem Browser, sodass die von Ihnen getesteten Farben nie an einen Server übertragen werden.

Farbzugänglichkeits-Prüfung

So verwenden Sie Farbzugänglichkeits-Prüfung

Häufig gestellte Fragen

Verwandte Tools