1.4.3 Kontrast (Minimum)

Was bedeutet das?

Hellgraue Schrift auf weißem Grund sieht elegant aus, ist für viele Menschen aber kaum lesbar. Das Kontrastverhältnis wird aus der Helligkeit von Schrift- und Hintergrundfarbe berechnet und reicht von 1:1 (keine Unterscheidung) bis 21:1 (Schwarz auf Weiß). Normaler Text braucht mindestens 4,5:1.

Große Schrift braucht mindestens 3:1. Als groß gilt Text ab 18 Punkt (etwa 24 CSS-Pixel) oder ab 14 Punkt fett (etwa 18,7 CSS-Pixel). Das gilt auch für Text auf Bildern, Platzhalter und Hover- oder Fokuszustände. Ausgenommen sind Logos, rein dekorativer Text, Text in inaktiven Bedienelementen und Text, der zufällig in einem Foto vorkommt.

Wem hilft das?

• Menschen mit Sehbehinderung
• Ältere Menschen, deren Kontrastwahrnehmung nachlässt
• Menschen mit Farbsehschwäche
• Alle, die bei Sonnenlicht auf dem Smartphone lesen

Typische Fehler

• Hellgrauer Fließtext oder Platzhalter, etwa #999999 auf Weiß (2,85:1)
• Weiße Schrift auf hellem Orange oder Gelb in Buttons
• Text direkt auf Fotos ohne abdunkelnde Fläche
• Hover-Zustand, in dem der Kontrast deutlich schwächer wird

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.

Prüffrage: Textkontrast mindestens 4,5:1 (große Schrift 3:1). Auch Text auf Bildern und Hover-/Fokus-Zustände prüfen.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

.hint   { color: #999999; background: #ffffff; } /* 2,85:1 */
.button { color: #ffffff; background: #f5a623; } /* 2,03:1 */

.hint   { color: #767676; background: #ffffff; } /* 4,54:1 */
.button { color: #1a1a1a; background: #f5a623; } /* 8,59:1 */

Hinweistext erreicht jetzt 4,54:1 und Button-Text 8,59:1; beide liegen über dem Mindestwert von 4,5:1.

Praxistipps

• Legen Sie Ihre Markenfarben einmal mit geprüften Kontrastwerten fest, dann muss die Redaktion nicht jedes Mal rechnen.
• Mit unserem kostenlosen Kontrastrechner prüfen Sie Farbpaare schnell selbst.

Ratgeber und Muster dazu

• Kontraste, die jeder lesen kannBlasse graue Schrift sieht elegant aus, ist aber für viele Menschen schwer zu lesen, bei Sonne auf dem Smartphone für alle. Hier stehen die Werte, die WCAG 2.2 verlangt, und wie Sie sie dauerhaft im Design verankern.
• BFSG-Prüfung: So lassen Sie Ihre Website auf Barrierefreiheit prüfenDas BFSG verlangt barrierefreie Angebote, aber kein bestimmtes Prüfverfahren. Hier steht, welche Prüfung was leistet, wie ein Audit abläuft, was es bei uns kostet und was Sie danach in der Hand haben.
• BFSG für kleine Unternehmen: Wann die Ausnahme greift und wann nichtKleinstunternehmen mit Dienstleistungen sind vom BFSG ausgenommen. Doch die Ausnahme hat klare Grenzen, und wer wächst, verlässt sie schneller als gedacht.
• Cookie-Banner, die niemanden aussperrenDer Cookie-Banner ist oft das Erste, was Besucher sehen, und für manche das Letzte: Wer ihn mit Tastatur oder Screenreader nicht bedienen kann, kommt nicht weiter. So machen Sie ihn für alle bedienbar.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.4.3 Contrast (Minimum)

Passendes Tool: Kontrast-Checker