Farbkontrast zu gering (color-contrast)

Die Regel color-contrast meldet Text, der sich nicht deutlich genug von seinem Hintergrund abhebt. Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1, großer Text 3:1. Meist genügt es, die Text- oder Hintergrundfarbe um einige Stufen dunkler oder heller zu setzen.

Was die Regel bedeutet

Das Kontrastverhältnis vergleicht die relative Helligkeit zweier Farben. Die Skala reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). WCAG 1.4.3 verlangt:

• 4,5:1 für normalen Text,
• 3:1 für großen Text – ab 24 px (18 pt) normaler Schrift oder ab 18,66 px (14 pt) fetter Schrift.

Ausgenommen sind Logos und Markennamen, Text in deaktivierten Bedienelementen, rein dekorativer Text und Text, der Teil eines Fotos mit anderem wichtigem Bildinhalt ist.

Wen es betrifft

Menschen mit Sehbehinderung, Menschen mit Farbsehschwäche und ältere Menschen, deren Kontrastempfinden nachlässt. Dazu kommen alle, die ihr Smartphone in der Sonne benutzen oder einen schwachen Bildschirm haben. Zu geringer Kontrast ist der häufigste Fehler im Web: Die WebAIM Million 2026 fand ihn auf 83,9 % der eine Million meistbesuchten Startseiten ^[4].

Warum die Prüfung anschlägt

• Hellgrauer Text für Hinweise, Datumsangaben, Breadcrumbs oder Footer-Links.
• Weiße Schrift auf hellen Markenfarben wie Orange, Hellblau oder Grün – besonders auf Buttons und Badges.
• Transparenz: opacity oder halbtransparente Textfarben senken den Kontrast unbemerkt.
• Themes und Baukästen mit Standardfarben, die niemand nachgemessen hat.
• Platzhaltertext in Formularfeldern, der als einzige Beschriftung dient.

So beheben Sie es

1. Messen Sie die gemeldete Kombination nach – der Farbwähler in den Entwicklertools Ihres Browsers zeigt das Verhältnis an.
2. Passen Sie die Farbe im Design-Token oder der CSS-Variable an, nicht am einzelnen Element – dann ist das Problem auf allen Seiten gelöst.
3. Prüfen Sie jede Kombination Ihrer Palette einmal und dokumentieren Sie die erlaubten Paare.

/* Vorher – nicht erfüllt */
.hinweis     { color: #999999; background: #ffffff; } /* 2,85:1 */
.btn-primary { color: #ffffff; background: #f59e0b; } /* 2,15:1 */

/* Nachher – erfüllt */
.hinweis     { color: #767676; background: #ffffff; } /* 4,54:1 */
.btn-primary { color: #ffffff; background: #b45309; } /* 5,02:1 */

Text auf Fotos bekommt eine eigene, deckende Fläche. Dann stimmt der Kontrast auch über dem hellsten Bildbereich:

.hero__titel { color: #ffffff; background: rgb(0 0 0 / 0.7); padding: .25em .5em; }

So prüfen Sie es von Hand

1. Öffnen Sie die Entwicklertools (F12) und wählen Sie das Element. Der Farbwähler in Chrome, Edge und Firefox zeigt das Kontrastverhältnis direkt an.
2. Bei Text auf Bildern und Verläufen: Messen Sie mit einer Pipette, etwa im kostenlosen Colour Contrast Analyser, an der hellsten Stelle hinter dem Text.
3. Prüfen Sie Zustände: Hover, Fokus, besuchte Links, Fehlermeldungen.
4. Wiederholen Sie das in der Mobilansicht. Dort liegt Text oft über Bildern, die am Desktop daneben stehen.

Zugehöriges WCAG-Kriterium

1.4.3 Kontrast (Minimum), Stufe AA. Verwandt: 1.4.11 Nicht-Text-Kontrast für Rahmen von Eingabefeldern, Icons und Fokusrahmen (3:1) und 1.4.1 Benutzung von Farbe für Links, die sich nur durch Farbe abheben.

So meldet Reviseberg diese Regel

Reviseberg führt color-contrast auf jeder gecrawlten Seite zweimal aus – bei 1280 px und noch einmal bei 360 px, weil ein schmales Layout Text oft auf einen anderen Hintergrund setzt. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterium, der Zahl der betroffenen Elemente und Seiten und den Punkten, die ein Fix zurückbringt. Kontrastfehler stecken oft in einer gemeinsamen CSS-Klasse. Eine Änderung behebt dann Dutzende Seiten, und das zeigt die Priorisierung. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt und alle betroffenen Seiten.

Wo axe-core den Hintergrund nicht sicher bestimmen kann – bei Bildern, Verläufen oder überlappenden Elementen –, landet der Fall in der Warteschlange „Mögliche Probleme“. Dort entscheidet ein Mensch; Reviseberg zählt ihn nicht stillschweigend als bestanden. Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren. Jede Entscheidung wird protokolliert.

Verwandte Regeln

• undefined – Links, die sich nur durch ihre Farbe vom umgebenden Text abheben.
• undefined – ein Fokusrahmen, der ganz fehlt.

Kontraste auf Ihrer ganzen Website prüfen – kostenloser Scan