Farbkontrast-Prüfer
Kostenloser Farbkontrast-Prüfer: Prüfen Sie Text- und Hintergrundfarbe nach WCAG 2.2 AA und AAA, mit Kontrastverhältnis und der nächsten passenden Farbe.
Dies ist normaler Text in der Größe eines Absatzes.
Großer Text
Schaltfläche| AA | AAA | |
|---|---|---|
| Normaler Text | ||
| Großer Text (24 px oder 18,7 px fett) | ||
| Symbole und Rahmen der Oberfläche | — |
Was er macht
Dieser Prüfer misst den Kontrast zwischen einer Textfarbe und ihrem Hintergrund mit der Formel der Barrierefreiheitsrichtlinien WCAG 2.2, auf die sich viele Barrierefreiheitsgesetze stützen. Er zeigt das Kontrastverhältnis von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß) und ob das Farbpaar die Stufen AA und AAA für normalen Text, großen Text und Oberflächenelemente wie Symbole und Rahmen besteht. Fällt ein Paar durch, schlägt er die nächstgelegene Farbe mit demselben Farbton vor, die besteht.
So wird er benutzt
- Geben Sie die Textfarbe und die Hintergrundfarbe ein oder wählen Sie sie aus.
- Lesen Sie das Kontrastverhältnis und die Ergebnisse für AA und AAA ab und prüfen Sie die Live-Vorschau.
- Wenn es nicht besteht, klicken Sie bei einer vorgeschlagenen Farbe auf Übernehmen und kopieren Sie dann den Link, um das Ergebnis zu teilen.
Häufige Fragen
Welches Kontrastverhältnis brauche ich?
Stufe AA, das übliche gesetzliche Ziel, verlangt 4,5:1 für normalen Text und 3:1 für großen Text sowie für Symbole und Rahmen der Oberfläche. Stufe AAA verlangt 7:1 für normalen Text und 4,5:1 für großen Text.
Was gilt als großer Text?
Text mit mindestens 24 CSS-Pixeln (18 Punkt) oder, wenn er fett ist, mit mindestens etwa 18,7 CSS-Pixeln (14 Punkt). Überschriften sind oft groß, Fließtext meist nicht.
Warum fällt #777777 auf Weiß durch?
Sein Verhältnis beträgt 4,47:1, knapp unter den für normalen Text geforderten 4,5:1. Verhältnisse werden nicht aufgerundet, daher ist ein etwas dunkleres Grau wie #767676 (4,54:1) das hellste Grau, das auf Weiß besteht.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast