WCAG-Kontrastprüfung
Prüfe das Kontrastverhältnis zwischen Text- und Hintergrundfarbe nach WCAG 2.x. Sieh sofort, ob AA oder AAA für normalen und großen Text erfüllt sind.
Colores a comparar
Relación de contraste
Cumplimiento (WCAG 2.2)
Ejemplo de texto grande
Texto normal de cuerpo con 92% de brillo.
So funktioniert: Kontrast
- 1Gib Textfarbe und Hintergrundfarbe ein.
- 2Wähle, ob es sich um normalen oder großen Text handelt.
- 3Lies das Kontrastverhältnis ab und ob es WCAG AA und AAA erfüllt.
Wofür ist es gut?
- Sicherstellen, dass die Texte deiner Website für alle lesbar sind.
- Buttons und Links vor dem Launch eines Designs prüfen.
- Barrierefreiheitsanforderungen in öffentlichen Projekten erfüllen.
Farbkontrast und Barrierefreiheit (WCAG)
Was das Verhältnis misst
Das Kontrastverhältnis vergleicht die relative Leuchtdichte von Text und Hintergrund und reicht von 1:1 bis 21:1 (Schwarz auf Weiß). Die WCAG-Formel gewichtet Rot, Grün und Blau nach der Empfindlichkeit des Auges.
Stufen AA und AAA
Für AA braucht normaler Text mindestens 4,5:1, großer Text (ab 24 px oder 18,66 px fett) 3:1. AAA verlangt 7:1 beziehungsweise 4,5:1. Bedienelemente wie Rahmen von Eingabefeldern brauchen 3:1.
Warum es zählt
Zu geringer Kontrast trifft Menschen mit Sehschwäche oder Farbfehlsichtigkeit, aber auch alle, die das Handy in der Sonne nutzen. In der EU ist Barrierefreiheit für viele Angebote gesetzlich vorgeschrieben (EN 301 549, Barrierefreiheitsstärkungsgesetz). Verlassen Sie sich nie allein auf Farbe, um Informationen zu vermitteln.
Verwandte Tools
Verwandte Artikel
Häufig gestellte Fragen
Welches Verhältnis brauche ich für WCAG?+
Normaler Text braucht 4,5:1 (AA) und 7:1 (AAA). Großer Text (≥18pt oder ≥14pt fett) braucht 3:1 (AA) und 4,5:1 (AAA).