Farbkontrast-Prüfer
| AA | AAA | |
|---|---|---|
| Normaler Text | ||
| Großer Text | ||
| UI-Komponenten | — |
Vorschau
Kleiner Text (16px): So sieht Ihr Text aus. The quick brown fox jumps over the lazy dog. 0123456789
Großer Text (24px): So sieht Ihr Text aus.
So nutzen Sie das Tool
- Farben wählen — Vordergrund- (Text) und Hintergrundfarbe per Farbwähler oder HEX-Eingabe setzen.
- Verhältnis ablesen — Das Kontrastverhältnis aktualisiert sich sofort. Grün = gut, Rot = unzureichend.
- WCAG-Level prüfen — Bestanden/Nicht bestanden für AA und AAA bei Normal- und Großtext sehen.
- Farben tauschen — Vordergrund und Hintergrund schnell tauschen.
Was ist Farbkontrast?
Farbkontrast ist der Helligkeitsunterschied zwischen Vordergrund- und Hintergrundfarben. WCAG 2.1 definiert Mindestverhältnisse, damit Text für Menschen mit Sehbehinderungen lesbar ist.
AA erfordert 4,5:1 für Normaltext, 3:1 für Großtext. AAA erfordert 7:1 für Normaltext, 4,5:1 für Großtext. Großtext ist 18pt+ oder 14pt+ fett.
WCAG-Level im Überblick
Tipps & Best Practices
Die meisten Barrierefreiheits-Gesetze verlangen WCAG-AA-Konformität. AAA ist ideal, aber nicht immer Pflicht.
Icons, Unterstreichungen oder Fettschrift zusätzlich zur Farbe nutzen, um Bedeutung für farbenblinde Nutzer zu vermitteln.
Kontrast mit tatsächlichen Schriftgrößen und -stärken prüfen — dünne Schriften brauchen höheren Kontrast.
Heller Text auf dunklem Hintergrund braucht oft andere Verhältnisse als dunkel auf hell. Beides testen.
Häufig gestellte Fragen
Welches Kontrastverhältnis brauche ich?
Mindestens 4,5:1 für Normaltext (WCAG AA). Für Großtext (18px+ fett oder 24px+) reichen 3:1. AAA-Level verlangt 7:1.
Was zählt als „Großtext"?
18pt (24px) reguläre Stärke, oder 14pt (18,66px) fett. Diese Schwellen definiert WCAG 2.1.
Ist WCAG-Konformität gesetzlich vorgeschrieben?
In vielen Ländern ja — besonders für staatliche und öffentlich zugängliche Websites. EAA (EU), ADA (USA) und ähnliche Gesetze verweisen auf WCAG.
Funktioniert diese Prüfung für farbenblinde Nutzer?
Kontrastverhältnis misst Helligkeitsunterschiede, was allen Nutzern hilft, auch solchen mit Farbsehschwäche. Zusätzlich Farbenblind-Simulationstools verwenden.