AA: Elemente müssen einen ausreichenden Farbkontrast haben (WCAG 1.4.3)

Das bedeutet

Texte, Symbole und Bedienelemente müssen sich deutlich vom Hintergrund abheben. Der Farbkontrast zwischen Vordergrund und Hintergrund muss groß genug sein, damit Inhalte auch von Menschen mit eingeschränktem Sehvermögen, Farbfehlsichtigkeit oder in heller Umgebung gut lesbar sind.

Nach WCAG 1.4.3 (AA) gilt:

• Normale Texte: mindestens 4,5:1 Kontrastverhältnis

• Große Texte (ab 18 pt oder 14 pt fett): mindestens 3:1

• Nicht-Text-Elemente (Symbole, Icons): sollten ebenfalls klar erkennbar sein

Auswirkung

Ist der Kontrast zu gering, sind Inhalte schwer oder gar nicht lesbar. Nutzer und Nutzerinnen übersehen wichtige Informationen, Navigationen oder Buttons.
Das beeinträchtigt sowohl die Zugänglichkeit als auch die Conversion und verstößt gegen WCAG 1.4.3 (AA) Kontrast (Minimum).

Empfehlung

• Prüfen Sie Farbkontraste regelmäßig mit unserem Contrast Checker.

• Erhöhen Sie bei Bedarf die Textfarbe (dunkler) oder den Hintergrund (heller), bis das Verhältnis mindestens 4,5:1 erreicht.

• Vermeiden Sie helle Grautöne auf weißem oder pastelligen Hintergrund.

• Stellen Sie sicher, dass Links, Buttons und Icons sich nicht nur farblich, sondern auch stilistisch vom Rest des Inhalts unterscheiden.

• Verwenden Sie keine halbtransparenten Farben oder Überlagerungen, die den Kontrast verschlechtern.

Beispiele

Problematisch:

 

<p style="color:#dcdbdb; background:#EBF5FF;">
Dieser Text ist schwer lesbar.
</p>

 

Hellgrauer Text auf weißem Hintergrund unterschreitet den erforderlichen Kontrastwert.

Besser:

Ein dunkler Grauton sorgt für deutlich besseren Kontrast und Lesbarkeit.

Alternativ:

Hinweis

Ein ausreichender Farbkontrast ist einer der wichtigsten Faktoren visueller Barrierefreiheit. Er verbessert nicht nur die Zugänglichkeit, sondern auch die Nutzererfahrung auf mobilen Geräten und in hellen Umgebungen.

Verknüpftes WCAG-Kriterium:
WCAG 1.4.3 – Kontrast (Minimum)
Zur offiziellen WCAG-Dokumentation →