Aktualisiert: März 2026 · Lesezeit: 10 Min.
Ich habe letztens ein Redesign-Projekt übernommen. Schicke neue Markenfarben, minimalistisches Design, der Kunde war begeistert. Dann habe ich die Kontraste geprüft. Von 14 Farbkombinationen auf der Website bestanden genau 3 die WCAG-Anforderungen. Die restlichen 11 waren zu kontrastarm — teilweise drastisch. Der hellgraue Text auf weißem Hintergrund hatte ein Kontrastverhältnis von 1,9:1. Gefordert sind 4,5:1.
Das ist keine Ausnahme. In meinen Audits scheitern rund zwei Drittel aller Websites am Farbkontrast. Es ist der häufigste einzelne WCAG-Verstoß — und einer der am einfachsten zu behebenden.
Zwei Kriterien sind relevant. Die werden oft verwechselt, deshalb hier klar getrennt:
Gilt für: Text und Bilder von Text
| Textgröße | Mindestkontrast | Definition |
|---|---|---|
| Normaler Text | 4,5:1 | Unter 18pt (24px) regulär oder unter 14pt (18,66px) fett |
| Großer Text | 3:1 | Ab 18pt (24px) regulär oder ab 14pt (18,66px) fett |
Ausnahmen: Logos, Markennamen, deaktivierte UI-Elemente und rein dekorativer Text.
Gilt für: UI-Komponenten und grafische Objekte
Mindestkontrast: 3:1 gegen den angrenzenden Hintergrund. Das betrifft:
Dieses Kriterium wird gerne übersehen. Ein weißer Button mit hellgrauem Rahmen auf weißem Hintergrund? Sieht schick aus, ist aber ein Verstoß, wenn der Rahmen den Button visuell definiert und der Kontrast unter 3:1 liegt.
Falls Sie sich fragen, woher diese Zahlen kommen: Das Kontrastverhältnis wird nach einer Formel berechnet, die auf der relativen Luminanz der beiden Farben basiert. Die Formel ist:
(L1 + 0,05) / (L2 + 0,05) wobei L1 = hellere Farbe, L2 = dunklere Farbe Relative Luminanz berechnet aus linearisierten RGB-Werten
Sie müssen das nicht von Hand rechnen. Aber es hilft zu verstehen, dass es nicht einfach um „hell vs. dunkel" geht. Gelb auf Weiß hat zum Beispiel einen miseralen Kontrast, obwohl es gefühlt „anders" aussieht — weil beide Farben eine hohe Luminanz haben.
/* Standard-Placeholder in den meisten Browsern */
::placeholder {
color: #c0c0c0; /* Kontrast auf Weiß: 1,6:1 — DURCHGEFALLEN */
}
/* Zugänglich */
::placeholder {
color: #767676; /* Kontrast auf Weiß: 4,5:1 — BESTANDEN */
}
Ja, ich weiß — #767676 sieht nicht mehr so dezent aus wie #c0c0c0. Aber Placeholder-Text soll lesbar sein, nicht verschwinden. Außerdem: Placeholder ist ohnehin kein Ersatz für ein Label.
Links müssen sich nicht nur farblich vom umgebenden Text unterscheiden (oder unterstrichen sein), die Linkfarbe muss auch gegen den Hintergrund einen ausreichenden Kontrast haben.
/* Häufig: Hellblau auf Weiß */
a { color: #60a5fa; } /* Kontrast: 2,4:1 — DURCHGEFALLEN */
/* Besser: Dunkleres Blau */
a { color: #1a56db; } /* Kontrast: 6,2:1 — BESTANDEN */
Hier gibt es einen Sonderfall: WCAG 1.4.3 nimmt deaktivierte UI-Elemente explizit aus. Ein ausgegrauter Button muss also keinen Mindestkontrast erfüllen. Aber — und das ist mein persönlicher Standpunkt — er sollte trotzdem erkennbar sein. Wenn ein Nutzer nicht sieht, dass ein Button existiert, ist das eine Barriere, auch wenn die WCAG es technisch erlaubt.
Text, der direkt auf einem Foto liegt, ist ein Albtraum für Kontraste. Der Hintergrund variiert je nach Bildbereich. Die Lösung:
/* Text auf Bild mit semi-transparentem Overlay */
.hero-text {
position: relative;
z-index: 1;
}
.hero-text::before {
content: '';
position: absolute;
inset: -1rem;
background: rgba(0, 0, 0, 0.6);
z-index: -1;
border-radius: 8px;
}
Hellgrauer Text auf dunkelgrauem Hintergrund im Footer. Oft werden Copyright-Hinweise, Links und Kontaktdaten so kontrastarm dargestellt, als wollte man sie verstecken. Wenn die Information dort steht, soll sie auch lesbar sein.
Der eigentliche Hebel liegt nicht im Nachprüfen, sondern im Vorher. Wenn der Designer eine Farbe wählt und erst der Entwickler feststellt, dass sie nicht WCAG-konform ist, haben Sie ein teures Nacharbeitsproblem.
Was ich empfehle:
Persönlich finde ich es übrigens nicht so schwer, ästhetisch ansprechende Designs mit guten Kontrasten zu erstellen. Man muss nur bereit sein, vom gewohnten „Grau auf Grau"-Trend abzuweichen. Lesbarkeit ist kein Designopfer — sie ist ein Designmerkmal.