Farbkontraste prüfen: WCAG-Werte 4,5:1 und 3:1 erklärt

Warum das wichtig ist

Hellgraue Schrift auf Weiß ist seit Jahren ein Designtrend. Am großen Monitor im abgedunkelten Büro sieht das edel aus. Auf dem Handy in der Mittagssonne liest es keiner mehr, und für Menschen mit Sehschwäche, Grauem Star oder Farbsehschwäche ist zu wenig Kontrast eine echte Barriere.

Die Grenzwerte stammen aus den WCAG. Erfolgskriterium 1.4.3 Kontrast (Minimum) legt die oben genannten Werte für Text fest. Erfolgskriterium 1.4.11 verlangt zusätzlich 3 zu 1 für Bedienelemente und wichtige Grafiken, etwa den Rahmen eines Eingabefelds oder ein Symbol ohne Text. Beides ist Stufe AA, also der Maßstab hinter EN 301 549.

So prüfst du es selbst

Für einzelne Farbpaare reicht ein Kontrastrechner, etwa der Contrast Checker von WebAIM oder der kostenlose Colour Contrast Analyser, mit dem du Farben direkt vom Bildschirm abgreifst. In Chrome zeigen die Entwicklertools den Wert ebenfalls: Element markieren, im Bereich Styles auf das Farbquadrat neben color klicken, dort steht das Kontrastverhältnis samt Grenzlinien für AA und AAA.

Für die ganze Seite listen Lighthouse, axe DevTools und WAVE alle Textstellen mit zu wenig Kontrast auf.

checkfrei misst die Kontraste im kostenlosen Check über Google Lighthouse. Erfüllen alle Texte das Kontrastverhältnis von 4,5 zu 1 (große Schrift 3 zu 1), ist alles in Ordnung, sonst gibt es einen Fehler.

Die Grenzen der Messung solltest du kennen. Text auf Fotos, Verläufen oder Videos kann Lighthouse nicht zuverlässig bewerten, und Hover- oder Fokuszustände misst es gar nicht. Ein gutes Ergebnis heißt also nicht, dass jede Stelle lesbar ist. Schau dir Startbilder mit Text und Buttons im Hover-Zustand selbst an.

Werte zum Merken

• ·#767676 auf Weiß: 4,54 zu 1. Das hellste reine Grau, das für normalen Text gerade noch reicht.
• ·#777777 auf Weiß: 4,48 zu 1. Eine Stufe heller, und es fällt schon durch.
• ·#999999 auf Weiß: 2,85 zu 1. Nicht einmal für große Schrift genug.
• ·Weiße Schrift auf dem verbreiteten Material-Grün #4CAF50: 2,78 zu 1. Ein dunkleres Grün wie #2E7D32 schafft 5,13 zu 1.
• ·#595959 auf Weiß: genau 7 zu 1, die Grenze für die strengere Stufe AAA.

So behebst du es

Meist reicht es, den Text eine oder zwei Stufen nachzudunkeln. Das fällt optisch kaum auf, die Lesbarkeit steigt deutlich. Wenn deine Markenfarbe als Textfarbe nicht reicht, nimm sie für Flächen, Rahmen oder große Überschriften und setz Fließtext und Links in eine dunklere Variante.

:root {
  --text: #333333;        /* 12,63 zu 1 auf Weiß */
  --text-leise: #666666;  /* 5,74 zu 1, statt #999999 */
  --hintergrund: #ffffff;
}

body {
  color: var(--text);
  background: var(--hintergrund);
}

.hinweis {
  color: var(--text-leise);
}

Typische Fehler

• ·Placeholder-Text in Formularfeldern in Hellgrau. Trägt er eine Information, gilt für ihn dieselbe Regel.
• ·Weiße Schrift auf einem Foto ohne Abdunklung. Leg eine halbtransparente dunkle Fläche zwischen Bild und Text.
• ·Links, die sich nur durch die Farbe vom Fließtext unterscheiden. Lass die Unterstreichung drin, sie hilft allen, die Farben schlecht unterscheiden.
• ·Ein Kontrast-Umschalter in einem Overlay-Widget als Lösung. Wer schlecht sieht, sucht nicht erst nach einem Symbol, um die Seite lesbar zu machen. Die Grundeinstellung muss passen.