Was gilt als großer Text?

Als groß gilt Text ab 24 CSS-Pixeln oder ab etwa 18,66 CSS-Pixeln bei Fettschrift.

Reicht ein guter Farbkontrast für eine barrierefreie Website?

Nein. Farbkontrast ist nur ein Teil der Barrierefreiheit; Struktur, Bedienung, Alternativtexte, Fokusführung und weitere Anforderungen müssen ebenfalls geprüft werden.

Farbkontrast nach WCAG prüfen

Q: Welcher Kontrast gilt für normalen Text?

Für WCAG AA benötigt normaler Text mindestens 4,5 zu 1. Für AAA sind mindestens 7 zu 1 erforderlich.

Vergleiche Text- und Hintergrundfarbe, lies das genaue Kontrastverhältnis ab und prüfe die Grenzwerte für normalen, großen und besonders gut lesbaren Text.

Direktes ErgebnisDie Berechnung folgt dem Kontrastverfahren der WCAG 2.2.

Textfarbe

Hintergrundfarbe

16,5:1

Sehr hoher Kontrast. Die Kombination erfüllt AA und AAA für alle Textgrößen.

Was das Verhältnis bedeutet

Das Kontrastverhältnis reicht von 1:1 bei zwei gleichen Farben bis 21:1 bei Schwarz auf Weiß. Für normalen Fließtext fordert WCAG 2.2 auf Stufe AA mindestens 4,5:1. Großer oder ausreichend fetter Text darf bei 3:1 liegen, weil seine Zeichenformen leichter zu erkennen sind.

Großer Text ist klar definiert

Als großer Text gilt eine Schrift ab 24 CSS-Pixeln oder eine fette Schrift ab etwa 18,66 CSS-Pixeln. Ein Text wirkt nicht allein deshalb groß, weil er in Versalien gesetzt oder weit auseinandergezogen wurde.

Kontrast ist notwendig, aber nicht alles

Ein bestandenes Ergebnis belegt nur diese Farbkombination. Eine vollständige Prüfung betrachtet zusätzlich Tastaturbedienung, Fokus, Überschriftenstruktur, Formulare, Alternativtexte, Zoom, Fehlermeldungen und weitere Anforderungen.

Häufige Fragen

Welcher Kontrast gilt für normalen Text?

Für WCAG AA sind mindestens 4,5:1 nötig. Für die strengere Stufe AAA braucht normaler Text 7:1.

Gelten die Werte auch für Logos?

Für Text in Logos besteht keine allgemeine Mindestkontrastanforderung. Sobald eine Beschriftung aber der Bedienung oder Information dient, sollte sie nicht wie reine Markenform behandelt werden.

Prüft dieses Werkzeug Transparenz und Hintergrundbilder?

Nein. Es vergleicht zwei vollständig deckende Farben. Bei Transparenz, Verläufen oder Bildern muss die tatsächlich sichtbare Farbkombination an allen relevanten Stellen geprüft werden.

So benutzt du das Werkzeug

Kontrastverhältnis zweier Farben nach WCAG 2.2 beurteilen.

Trage Text- und Hintergrundfarbe ein oder wähle sie mit dem Farbfeld.
Lies Kontrastverhältnis und Ergebnis für normalen sowie großen Text ab.
Nutze bei zu geringem Kontrast den vorgeschlagenen, möglichst ähnlichen Farbwert als Ausgangspunkt.

Begriffe aus diesem Werkzeug

Kontrastverhältnis: Messwert zwischen 1:1 und 21:1 für den Helligkeitsunterschied zweier Farben.
WCAG: Internationale Richtlinien für besser zugängliche Webinhalte.
AA und AAA: Zwei WCAG-Konformitätsstufen. AAA verlangt bei Text einen höheren Kontrast als AA.