WCAG 1.4.3 Kontrast (Minimum)

Das Erfolgskriterium 1.4.3 sorgt dafür, dass Text auch für Menschen lesbar ist, die Kontraste schlechter wahrnehmen: ältere Besucher, Menschen mit Sehbehinderung oder Farbsehschwäche und alle, die bei Sonnenlicht auf ihr Smartphone schauen. Es gehört zur Konformitätsstufe AA und damit zu den Anforderungen, auf die sich EN 301 549 und der European Accessibility Act stützen (Abschnitt 9.1.4.3). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Das Kontrastverhältnis zwischen Text und Hintergrund muss mindestens betragen:

• 4,5:1 für normalen Text;
• 3:1 für großen Text — mindestens 18 pt (24 CSS-px) in normaler Schriftstärke oder 14 pt (etwa 18,66 CSS-px) fett.

Das Verhältnis wird aus der relativen Leuchtdichte der beiden Farben berechnet und reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß). Die Regel gilt auch für Bilder von Text, etwa ein Banner, in dessen Bild ein Slogan fest eingebettet ist.

Ausnahmen:

• Text in einem Logo oder Markennamen;
• Text inaktiver Bedienelemente, etwa eines deaktivierten Buttons;
• dekorativer Text, den niemand lesen muss, und Text, der Teil eines Fotos mit anderen wesentlichen Inhalten ist.

Typische Fehler in Onlineshops

• hellgrauer Platzhalter- oder Hilfetext in Formularen (zum Beispiel #aaa auf Weiß ergibt etwa 2,3:1);
• der alte Preis, „Ausverkauft“-Hinweise und Kleingedrucktes unter dem Button „In den Warenkorb“;
• weißer Text auf einem Foto-Banner, bei dem ein Teil des Fotos hell ist;
• eine Markenfarbe für Links oder Buttons, die auf einem großen Bildschirm gut aussieht, aber unter 4,5:1 liegt;
• Text, der erst bei Hover oder Fokus einen zu geringen Kontrast bekommt.

So prüfen Sie es

Automatisch: Unser Checker misst den Kontrast jedes sichtbaren Textelements (Regel Farbkontrast) und zeigt die gefundenen Farben und das Verhältnis an. Text über Bildern oder Farbverläufen kann er nicht immer beurteilen — solche Ergebnisse werden zur manuellen Prüfung markiert.

Manuell: Prüfen Sie bei Text über Fotos den hellsten Teil des Bildes hinter dem Text. Prüfen Sie auch die Zustände Hover, Fokus und Fehler, nicht nur den Standardzustand. Ein Kontrast-Checker liefert Ihnen das genaue Verhältnis für zwei Farben.

So beheben Sie es

• Dunkeln Sie den Text ab oder hellen Sie den Hintergrund auf, bis das Verhältnis mindestens 4,5:1 beträgt; meist genügt eine kleine Änderung der Helligkeit.
• Legen Sie Text auf Bildern auf eine einfarbige oder halbtransparente Hintergrundfläche.
• Verwenden Sie Platzhaltertext nicht als einzige Beschriftung; wenn Sie ihn behalten, machen Sie auch ihn gut lesbar.
• Korrigieren Sie die Farbe einmal in den Theme-Einstellungen oder CSS-Variablen statt Seite für Seite.

Verwandte Kriterien

• 1.4.11 Nicht-Text-Kontrast — Icons, Feldrahmen und Fokusindikatoren (3:1).
• 1.4.1 Benutzung von Farbe — Farbe darf nicht das einzige Mittel sein, um Informationen darzustellen.
• 1.4.4 Textgröße ändern — Text muss bei 200 % Zoom nutzbar bleiben.

Häufige Fragen

Welches Kontrastverhältnis verlangt WCAG AA?

Mindestens 4,5:1 zwischen Text und Hintergrund und mindestens 3:1 für großen Text. Stufe AAA (1.4.6) verlangt 7:1 bzw. 4,5:1.

Was gilt in den WCAG als großer Text?

Text mit mindestens 18 Punkt (24 CSS-Pixel) in normaler Schriftstärke oder mindestens 14 Punkt (etwa 18,66 CSS-Pixel) in Fettschrift.

Gilt 1.4.3 für Logos und deaktivierte Buttons?

Nein. Text, der Teil eines Logos oder Markennamens ist, Text inaktiver (deaktivierter) Bedienelemente und rein dekorativer Text sind ausgenommen.

Gilt 1.4.3 auch für Icons und Rahmen von Eingabefeldern?

Nein, 1.4.3 betrifft nur Text und Bilder von Text. Icons, Fokusrahmen und die Rahmen von Formularfeldern fallen unter 1.4.11 Nicht-Text-Kontrast, das 3:1 verlangt.