Tutorial
So behebst du zu geringen Farbkontrast
Kurz gesagt
Normaler Text braucht ein Kontrastverhältnis von mindestens 4.5:1 zum Hintergrund, grosser Text (ab 24px, oder 18.66px fett) mindestens 3:1. Grafische Elemente und Bedien-Zustände (Ränder, Icons, Fokus) brauchen mindestens 3:1. Miss das Verhältnis mit einem Kontrast-Checker und dunkle die Farbe ab, bis der Wert passt.
In Kürze
Verhältnis messen
Prüfe Vorder- und Hintergrundfarbe mit einem Kontrast-Checker und lies das Verhältnis ab.
Schwelle bestimmen
4.5:1 für normalen Text, 3:1 für grossen Text (ab 24px oder 18.66px fett).
Farbe anpassen
Dunkle den Text ab oder verstärke die Hintergrundfarbe, bis der Wert die Schwelle erreicht.
UI-Elemente prüfen
Auch Ränder, Icons und Fokus-Indikatoren brauchen mindestens 3:1 (1.4.11).
Zu geringer Kontrast ist der mit Abstand häufigste automatisch messbare Fehler. Er trifft nicht nur blinde Nutzer: Auch bei Sonnenlicht, auf billigen Displays oder mit altersbedingter Sehschwäche wird hellgrauer Text auf Weiss unlesbar. Gut: Kontrast ist ein hartes, deterministisch messbares Kriterium.
Die Schwellen
| Inhalt | Minimum (AA) |
|---|---|
| Normaler Text (< 24px, bzw. < 18.66px fett) | 4.5:1 |
| Grosser Text (ab 24px, oder ab 18.66px fett) | 3:1 |
| Grafik- und Bedienelemente (Ränder, Icons, Fokus) | 3:1 |
Das Problem
/* #999999 auf #ffffff = 2.85:1 -> faellt durch (Minimum 4.5:1) */
.text {
color: #999999;
background: #ffffff;
}
/* Button-Rand kaum sichtbar: #e2e2e2 auf #ffffff = 1.2:1 */
.btn {
color: #ffffff;
background: #ffffff;
border: 1px solid #e2e2e2;
}#999999 auf Weiss ergibt nur 2.85:1, deutlich unter 4.5:1. Der Button hat zwar einen Rand, aber mit 1.2:1 ist er praktisch unsichtbar: Er verletzt 1.4.11 (Kontrast von Nicht-Text).
Die Lösung
/* #595959 auf #ffffff = 7:1 -> besteht deutlich */
.text {
color: #595959;
background: #ffffff;
}
/* Fuellung UND Rand tragen jetzt Kontrast:
Text #ffffff auf #1d4ed8 = 6.3:1, Rand vs. Umgebung >= 3:1 (1.4.11) */
.btn {
color: #ffffff;
background: #1d4ed8;
border: 1px solid #1d4ed8;
}#595959 auf Weiss ergibt 7:1, also weit über der Schwelle. Der Button trägt jetzt eine kontraststarke Füllung, sodass sowohl Text als auch die Fläche selbst erkennbar sind.
Richtig messen
- Miss die tatsächlich gerenderten Farben, nicht die Design-Tokens: Transparenz und überlagerte Ebenen verändern das Ergebnis.
- Text über einem Bild ist der Sonderfall: Der Kontrast schwankt je nach Bildstelle. Lege eine deckende Fläche oder einen Verlauf unter den Text.
- Dünne Schrift (font-weight 300) wirkt kontrastärmer, als der reine Zahlenwert vermuten lässt: im Zweifel abdunkeln.
Percelia misst den Kontrast auf dem gerenderten DOM inklusive CSS, meldet jeden Unterschreiter mit exakter Farbe und Verhältnis und kann den knappen Grenzfall über einem Bild zur menschlichen Prüfung geben.
Zugehörige WCAG-Kriterien
Häufige Fragen
- Was zählt als grosser Text?
- Ab 24px normaler Schnitt oder ab 18.66px (14pt) fett. Für grossen Text genügt 3:1 statt 4.5:1.
- Gilt der Kontrast auch für deaktivierte Elemente?
- Nein. Text in inaktiven (disabled) Bedienelementen ist von 1.4.3 ausgenommen. Aktive Buttons, Links und normaler Text müssen die Schwelle aber erfüllen.
- Reicht es, wenn das Verhältnis genau 4.5:1 ist?
- Ja, genau 4.5:1 besteht. Wir empfehlen trotzdem etwas Puffer, weil gerenderte Farben durch Antialiasing und Displays leicht abweichen können.
Kostenlosen Scan anfragen
Sagen Sie uns Ihre Domain — wir führen einen kostenlosen Erst-Scan durch und zeigen Ihnen die wichtigsten Barrieren.