Farbkontrast-Prüfer (WCAG)
Prüfe, ob die Textfarbe genug Kontrast zum Hintergrund nach den Barrierefreiheitsregeln WCAG AA und AAA hat, mit Live-Vorschau.
So geht’sFarbkontrast testen
Großer Beispieltext
Normaler Beispieltext: Barrierefreiheit hilft allen, besser zu lesen, auf jedem Bildschirm.
Kleiner Text, wie Bildunterschriften und Fußzeilen.
Verfügbar auf: 
Farbkontrast-Prüfer (WCAG): wofür es gut ist
Wähle die Textfarbe und die Hintergrundfarbe, um das Kontrastverhältnis zu sehen und ob es die WCAG-Kriterien für normalen Text, großen Text und Icons erfüllt. Die Vorschau zeigt, wie der Text in verschiedenen Größen aussieht.
Es akzeptiert Farben in Hexadezimal (#RRGGBB oder #RGB) und hat einen Button zum Vertauschen der Farben.
So geht’s
- Wähle oder tippe die Textfarbe.
- Wähle die Hintergrundfarbe.
- Sieh den Kontrast und die Stufen AA und AAA.
Wann nutzen
- Die Farben einer Website oder App prüfen.
- Die Farbe von Buttons und Links wählen.
- Barrierefreiheits-Warnungen von Lighthouse beheben.
Häufige Fragen
Welchen Mindestkontrast gibt es?
Nach WCAG Stufe AA braucht normaler Text mindestens 4,5:1 und großer Text (ab 24 px oder 18,66 px fett) 3:1. In Stufe AAA steigen die Mindestwerte auf 7:1 und 4,5:1.
Warum ist der Kontrast wichtig?
Text mit wenig Kontrast ist für Menschen mit Sehschwäche, Farbenblindheit oder bei Handynutzung in der Sonne schwer zu lesen. Außerdem weisen SEO- und Barrierefreiheits-Tools auf dieses Problem hin.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.