Ausreichender Farbkontrast: WCAG-Grenzwerte richtig einhalten
Text-Farbkontrast nach WCAG 2.2 AA: 4,5:1 für Fließtext, 3:1 für große Schrift. So finden und beheben Sie zu schwache Kontraste am Design-Token, nicht per Override.
Inhaltsverzeichnis
Text mit zu schwachem Farbkontrast zum Hintergrund ist für viele Menschen kaum lesbar — besonders bei eingeschränktem Sehen oder auf dem Smartphone in praller Sonne. WCAG 2.2 AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für große Schrift; EverAudit misst das automatisiert und meldet jede Unterschreitung als konkreten Befund.
Was ist das Problem?#
Farbkontrast beschreibt den messbaren Helligkeitsunterschied zwischen Textfarbe und Hintergrundfarbe. Ist er zu gering — etwa hellgraue Schrift auf weißem Grund oder ein Marken-Blau auf dunklem Blau — verschwimmt der Text für einen erheblichen Teil der Besucher. Betroffen sind nicht nur Menschen mit diagnostizierter Sehbehinderung: Auch altersbedingt nachlassende Sehschärfe, Blendung durch Umgebungslicht oder ein schlecht kalibriertes Display senken die effektive Lesbarkeit.
axe-core misst dafür das relative Luminanzverhältnis von Vorder- und Hintergrundfarbe an jeder Textstelle und vergleicht es mit dem WCAG-Grenzwert für die jeweilige Schriftgröße.
Warum prüft EverAudit das?#
Farbkontrast ist einer der axe-Regeln mit der höchsten Trefferzahl auf realen Websites — häufig, weil ein Design-Token (etwa eine sekundäre Textfarbe oder ein Platzhalter) nachträglich abgeschwächt wurde, ohne den Kontrast erneut zu prüfen. Weil der Fehler eine ganze Komponente betreffen kann — nicht nur einen einzelnen Textblock — stuft EverAudit ihn als prio1-Befund (kritisch/schwerwiegend) ein: Er kann eine Funktion für einen relevanten Teil der Besucher unbenutzbar machen.
Welche Auswirkung hat das?#
Schlecht lesbare Inhalte schließen Besucher faktisch aus — sie können Ihr Angebot nicht vollständig erfassen und wenden sich ab. Das betrifft besonders Formulare, Preisangaben und Call-to-Action-Texte: Wer den Button-Text nicht lesen kann, klickt ihn auch nicht. Da Kontrastfehler häufig in wiederverwendeten Komponenten stecken, wirkt ein einzelner Fehler oft auf sehr vielen Seiten gleichzeitig.
Barrierefreiheit ist für viele private B2C-Anbieter seit dem 28.06.2025 durch das Barrierefreiheitsstärkungsgesetz (BFSG) relevant geworden — ob und wie das konkret für Ihr Angebot gilt, sollten Sie im Zweifel juristisch prüfen lassen.
Wie beheben Sie zu schwachen Kontrast?#
Passen Sie die betroffene Farbe am Design-Token an, nicht per einzelnem Komponenten-Override — sonst taucht derselbe Fehler an anderer Stelle wieder auf. Prüfen Sie den neuen Wert vorab mit einem Kontrastrechner:
/* vorher: 2,8:1 — unter dem AA-Grenzwert */
:root {
--color-text-secondary: #9ca3af; /* auf #ffffff */
}
/* nachher: 4,6:1 — erfüllt 4,5:1 für Fließtext */
:root {
--color-text-secondary: #6b7280;
}Konkretes Vorgehen:
- Grenzwert bestimmen — 4,5:1 für Fließtext, 3:1 ab 24 px bzw. 18,66 px fett.
- Betroffene Elemente identifizieren — EverAudit nennt Selektor und gemessenen Wert je Fundstelle.
- Am Token korrigieren — Farbvariable, nicht Inline-Style, damit die Änderung überall greift, wo der Token verwendet wird.
- Zustände mitprüfen — Hover, Fokus, Disabled sowie Text auf Bildern oder Verläufen haben oft einen anderen effektiven Kontrast als der Grundzustand.
- Nachmessen — nach der Anpassung erneut mit einem Kontrastrechner oder einem erneuten Audit verifizieren.
Wenn das Marken-Design den nötigen Kontrast nicht hergibt, prüfen Sie, ob eine dunklere/hellere Variante der Markenfarbe (statt eines völlig anderen Farbtons) das Problem löst — das erhält die Wiedererkennbarkeit.
Selbst ausprobieren#
Farbkontrast prüfen
Welche Farbkombination erfüllt die WCAG-Kontrastanforderungen? Probieren Sie es aus.
Beispieltext in normaler Größe (16px).
Große Überschrift (24px)
Fazit#
Farbkontrast ist einer der am einfachsten zu behebenden Barrierefreiheits-Fehler: Ein korrigierter Design-Token löst das Problem meist überall, wo er verwendet wird. Prüfen Sie systematisch gegen die WCAG-Grenzwerte 4,5:1 (Fließtext) und 3:1 (große Schrift) und vergessen Sie dabei Hover-, Fokus- und Bild-Overlay-Zustände nicht.
Häufige Fragen
Welcher Kontrastwert gilt für normalen Fließtext?
Für normalen Fließtext verlangt WCAG 2.2 AA (Kriterium 1.4.3) ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text- und Hintergrundfarbe. Das gilt für die allermeisten Textelemente auf einer Website — Absätze, Listen, Formularbeschriftungen.
Gilt für große Schrift ein anderer Grenzwert?
Ja. Für großen Text — ab 24 px bzw. ab 18,66 px in Fett — reicht ein Kontrastverhältnis von 3:1. Große Überschriften dürfen also einen etwas schwächeren Kontrast haben als kleiner Fließtext, weil sie durch ihre Größe leichter lesbar bleiben.
Was ist der Unterschied zwischen color-contrast und color-contrast-enhanced?
color-contrast prüft gegen die AA-Mindestwerte (4,5:1 / 3:1). color-contrast-enhanced prüft gegen die strengere AAA-Stufe (7:1 / 4,5:1) — ein optionales, höheres Ziel, das über die gesetzlich relevante Mindestanforderung hinausgeht.
Reicht es, nur die Textfarbe anzupassen?
Meist ja, aber prüfen Sie auch Hover- und Fokus-Zustände sowie Text auf Bildern oder Farbverläufen — dort ändert sich der effektive Kontrast oft unbemerkt. Ein einmal korrigierter Basiszustand schützt nicht automatisch alle Varianten.
EverAudit Redaktion
Fachredaktion für Web-Qualität, Barrierefreiheit und DSGVO. Wir prüfen jeden Ratgeber gegen die Kriterien unserer Audit-Engine.