WCAG-Farbkontrast-Prüfer
Wähle Text- und Hintergrundfarbe und erhalte sofort das Kontrastverhältnis und ob es die Stufen AA und AAA der WCAG-Barrierefreiheitsrichtlinien erfüllt. Besteht es nicht, schlägt das Tool eine ähnliche Farbe vor, die besteht. Alles läuft in deinem Browser.
Zu 100 % in deinem Browser verarbeitet
–
Groß: ab 24 px oder 18,66 px fett.
Beispielüberschrift
So liest sich der Text mit deinen Farben. Guter Kontrast hilft allen, auch beim Lesen in der Sonne oder mit müden Augen.
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Gib Text- und Hintergrundfarbe ein oder wähle sie (Hex, RGB, HSL oder Name).
- 2Sieh dir das Kontrastverhältnis und die Ergebnisse für AA und AAA an.
- 3Prüfe die Vorschau mit deinen Farben.
- 4Besteht es nicht, klicke bei der vorgeschlagenen Alternative auf „Übernehmen“.
Anwendungsfälle
- Prüfen, ob die Texte deiner Website für Menschen mit Sehschwäche lesbar sind.
- Eine Markenpalette vor der Übergabe validieren.
- Barrierefreiheitsanforderungen für öffentliche und kommerzielle Websites erfüllen.
- Eine Buttonfarbe wählen, die sich vom Hintergrund abhebt.
Häufig gestellte Fragen
Welchen Mindestkontrast verlangt WCAG?
Stufe AA: 4,5:1 für normalen Text und 3:1 für großen Text und UI-Komponenten. Stufe AAA: 7:1 für normalen Text und 4,5:1 für großen Text.
Was gilt als großer Text?
Text ab 24 px oder ab 18,66 px in Fett (etwa 18 und 14 Punkt). Dafür ist ein geringerer Kontrast zulässig.
Was, wenn meine Farbe transparent ist?
Das Tool mischt sie zuerst mit dem Hintergrund, um die tatsächlich sichtbare Farbe zu erhalten, und misst dann den Kontrast.
Gibt es Ausnahmen von der Regel?
Ja: Dekorativer Text, Logos und deaktivierte Elemente müssen sie nicht erfüllen, sollten aber trotzdem gut lesbar sein.