WCAG Farbkontrast - Warum #999 auf Weiß nicht reicht

Hellgrauer Text auf weißem Hintergrund. Dezente Platzhalter in Formularen. Subtile Links, die sich kaum vom Fließtext abheben. Was Designern als "clean" und "modern" gilt, ist für Millionen Menschen nicht lesbar.

Mangelnder Farbkontrast ist der zweithäufigste Accessibility-Fehler im Web. Er betrifft nicht nur blinde Menschen - auch Menschen mit Sehschwäche, Farbenblindheit oder die einfach ihr Handy in der Sonne benutzen.

Die WCAG-Regeln für Farbkontrast

Level AA (gesetzlich gefordert)

Textart	Mindestkontrast	Beispiel
Normaler Text (<18px)	4.5:1	Fließtext, Labels, Buttons
Großer Text (>=18px oder >=14px bold)	3:1	Überschriften
UI-Komponenten	3:1	Button-Ränder, Form-Ränder, Icons

Level AAA (optional, empfohlen)

Textart	Mindestkontrast
Normaler Text	7:1
Großer Text	4.5:1

Häufige Fehler

Grauer Text auf Weiß

/* Kontrast 2.8:1 - DURCHGEFALLEN */
.text-light { color: #aaaaaa; background: #ffffff; }

/* Kontrast 4.6:1 - BESTANDEN (AA) */
.text-light { color: #767676; background: #ffffff; }

/* Kontrast 7.0:1 - BESTANDEN (AAA) */
.text-light { color: #595959; background: #ffffff; }

Merke: #767676 ist das hellste Grau, das auf Weiß noch AA besteht.

Platzhalter-Text

/* Standard-Platzhalter sind oft zu hell */
::placeholder { color: #c0c0c0; } /* Kontrast 1.6:1 - DURCHGEFALLEN */

/* Besser */
::placeholder { color: #767676; } /* Kontrast 4.6:1 - BESTANDEN */

Farbige Buttons

/* Weißer Text auf hellem Blau */
.btn { color: #ffffff; background: #5b9bd5; } /* Kontrast 2.4:1 - DURCHGEFALLEN */

/* Besser: Dunkleres Blau */
.btn { color: #ffffff; background: #2563eb; } /* Kontrast 4.6:1 - BESTANDEN */

Links im Fließtext

/* Links müssen sich nicht nur durch Farbe unterscheiden */
/* Schlecht - nur Farbunterschied */
a { color: #2563eb; text-decoration: none; }

/* Gut - Farbe + Unterstreichung */
a { color: #2563eb; text-decoration: underline; }

Barrierefreie Farbpaletten

Graustufen auf Weiß (#ffffff)

Hex	Kontrast	Level
#000000	21:1	AAA
#333333	12.6:1	AAA
#555555	7.5:1	AAA
#595959	7.0:1	AAA
#767676	4.6:1	AA
#949494	3.0:1	Nur großer Text
#aaaaaa	2.3:1	Durchgefallen

Beliebte Farben auf Weiß

Farbe	Hex	Kontrast	Level
Dunkelblau	#1e40af	8.5:1	AAA
Blau	#2563eb	4.6:1	AA
Dunkelgrün	#166534	7.1:1	AAA
Grün	#16a34a	3.2:1	Nur großer Text
Dunkelrot	#991b1b	7.8:1	AAA
Rot	#dc2626	4.0:1	Nur großer Text
Orange	#ea580c	3.4:1	Nur großer Text

Tipps für Designer

Testen Sie JEDE Farbkombination bevor Sie sie verwenden
Vermeiden Sie Rot/Grün-Kombinationen - 8% der Männer sind rot-grün-blind
Nutzen Sie nie nur Farbe um Informationen zu vermitteln (z.B. "rote Fehlermeldungen" brauchen auch ein Icon oder Text)
Dark Mode separat prüfen - was auf Weiß funktioniert, funktioniert nicht automatisch auf Schwarz

Tools zum Prüfen

Im Browser

Chrome DevTools - Element inspizieren > Farbkontrast-Ratio wird angezeigt
Firefox Accessibility Inspector - Eingebauter Kontrast-Checker

Online

WebAIM Contrast Checker - Zwei Farben eingeben, Ratio sehen
Coolors Contrast Checker - Mit Vorschau

Automatisch

ScanClusive - Findet alle Kontrast-Violations automatisch
axe DevTools - Browser-Extension
Lighthouse - In Chrome integriert

CSS-Tipps für guten Kontrast

Custom Properties für konsistente Farben

:root {
  --text-primary: #1f2937;    /* 15.4:1 auf Weiß */
  --text-secondary: #4b5563;  /* 7.5:1 auf Weiß */
  --text-muted: #6b7280;      /* 5.0:1 auf Weiß */
  --text-on-brand: #ffffff;   /* Für dunkle Hintergründe */
}

Dark Mode berücksichtigen

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb;    /* Auf dunklem Hintergrund */
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --bg-primary: #111827;
  }
}

Fazit

Farbkontrast ist eines der einfachsten Accessibility-Probleme zu beheben. In den meisten Fällen reicht es, Grau etwas dunkler und Akzentfarben etwas kräftiger zu machen. Das Ergebnis: Ihre Website wird nicht nur barrierefrei, sondern auch besser lesbar für alle Nutzer.

Finden Sie alle Kontrast-Probleme auf Ihrer Website - automatisch mit ScanClusive.