| Stufe | Normaler Text | Großer Text | UI-Komponenten |
|---|---|---|---|
| AA | — | — | — |
| AAA | — | — | N/V |
Was ist der Kontrastprüfer?
Prüfen Sie das Farbkontrastverhältnis für die WCAG-AA- und AAA-Barrierefreiheitskonformität. Überprüfen Sie sofort Vordergrund- und Hintergrundfarbkombinationen für normalen Text, großen Text und UI-Komponenten.
So verwenden Sie den Kontrastprüfer
- Geben Sie die Vordergrundfarbe des Textes ein oder wählen Sie sie aus.
- Geben Sie die dahinterliegende Hintergrundfarbe ein oder wählen Sie sie aus.
- Prüfen Sie sofort das Kontrastverhältnis und das WCAG-Ergebnis (bestanden/nicht bestanden).
- Passen Sie eine der beiden Farben an, bis die Kombination Ihr Barrierefreiheitsziel erfüllt.
Farbkontrast verstehen ▾
Beispiel
Häufige Anwendungsfälle
- Kontrast von Schaltflächen und Links prüfen, bevor UI-Updates ausgeliefert werden
- Textfarben in Markensystemen und Styleguides validieren
- Marketinggrafiken auf Lesbarkeit prüfen
- Dunkel-auf-Hell- und Hell-auf-Dunkel-Kombinationen schnell testen
Häufig gestellte Fragen
WCAG AA erfordert ein Verhältnis von 4.5:1 für normalen Text und 3:1 für großen Text – die gesetzliche Standardanforderung. AAA erfordert 7:1 für normalen Text und 4.5:1 für großen Text und bietet verbesserte Barrierefreiheit für Nutzer mit stark eingeschränktem Sehvermögen.
Ja – WCAG 1.4.11 (Nicht-Text-Kontrast) erfordert 3:1 für UI-Komponenten und grafische Elemente. Das Ergebnis „AA UI-Komponenten“ in der Tabelle deckt diese Anforderung ab.
AAA-Konformität ist nicht für alle Inhalte erforderlich. WCAG AA ist in den meisten Rechtsordnungen die gesetzliche Standardanforderung. Streben Sie wo möglich AAA an, aber AA reicht für die gesetzliche Konformität aus.
WCAG definiert großen Text als 18pt (24px) oder größer bei normaler Schriftstärke bzw. 14pt (ungefähr 18.67px) oder größer bei fettem Text. Großer Text hat eine niedrigere Kontrastanforderung (3:1 für AA), weil er naturgemäß leichter zu lesen ist.