Welche Grenzwerte werden geprüft?
Das Tool prüft 4.5:1 und 7:1 für normalen Text, 3:1 und 4.5:1 für großen Text sowie 3:1 für UI-Komponenten.
Prüfe WCAG-Kontrast, bevor du ein Farbpaar veröffentlichst
Nutze den Farbkontrast-Prüfer, um Vordergrund- und Hintergrundfarben gegen gängige WCAG-Kontrastgrenzen zu testen. Gib Farben ein oder wähle sie aus, sieh eigenen Text in der Vorschau, stelle Schriftgröße und Gewicht ein und kopiere einen klaren Bericht für Design-Reviews oder Tickets.
Das Ergebnis enthält das exakte Kontrastverhältnis, AA- und AAA-Bestehen oder -Nichtbestehen für normalen Text, großen Text und UI-Komponenten sowie praktische Vorschläge für Vordergrundfarben.
Nutze es, wenn
- Du Text- und Hintergrundfarben für Buttons, Cards, Dashboards, Formulare oder Dokumentation auswählst.
- Du Markenfarben prüfst, bevor sie in lesbarem UI-Text verwendet werden.
- Du prüfen möchtest, ob eine Schriftgröße nach WCAG als großer Text gilt.
- Du eine Barrierefreiheitsnotiz in ein Ticket, einen Pull Request oder ein Design-Handoff kopieren willst.
Tool wird geladen...
FAQ zum Farbkontrast-Prüfer
Ändert fetter Text das Ergebnis für großen Text?
Ja. Fetter Text gilt schon bei einer kleineren Pixelgröße als großer Text.
Kann ich eine nahegelegene barrierearme Farbe finden?
Ja. Der Prüfer schlägt eine möglichst nahe AA-Vordergrundrichtung vor und erhält den ursprünglichen Farbton so weit wie praktikabel.
