Warum du dich um Farbkontrast kümmern solltest (Spoiler: Es geht nicht nur um Barrierefreiheit)
Klar, als Designer bist du kreativ, nicht bürokratisch. Aber ein optimaler Farbkontrast ist weit mehr als eine WCAGWCAG Web Content Accessibility Guidelines, internationale Richtlinien für barrierefreie Websites.-Anforderung. Er ist schlichtweg gutes Design.
Stell dir vor:
- Deine User sind draußen in der Sonne und versuchen, deine Website auf dem Smartphone zu lesen.
- Jemand hat eine leichte Sehschwäche, die gar nicht unbedingt als „Behinderung“ wahrgenommen wird, aber die Augen schnell ermüden lässt.
- Deine Zielgruppe ist über 50 – und ja, die Augen werden im Alter nun mal nicht besser.
In all diesen Fällen sorgt ein mangelnder Kontrast dafür, dass deine wunderschön gestalteten Inhalte unleserlich werden. Und was passiert, wenn Inhalte unleserlich sind? User springen ab, Frust macht sich breit, und dein Design verfehlt seinen Zweck.
Das KontrastverhältnisKontrastverhältnis Verhältnis zwischen Textfarbe und Hintergrundfarbe – wichtig für Lesbarkeit, z. B. für Menschen mit Sehbehinderungen. ist hier dein bester Freund. Es ist ein Wert, der angibt, wie hell oder dunkel ein Vordergrundelement (z.B. Text) im Vergleich zu seinem Hintergrund ist. Gemessen wird es von 1:1 (kein Kontrast, z.B. weißer Text auf weißem Hintergrund) bis 21:1 (maximaler Kontrast, z.B. schwarzer Text auf weißem Hintergrund).
WCAG-Vorgaben
Damit dein Text barrierefrei ist, fordert die WCAG 2.2 folgende Mindestwerte:
| Texttyp | Mindest-Kontrastverhältnis |
|---|---|
| Fließtext (normal) | 4.5:1 |
| Großer Text* | 3:1 |
| Deko-Text** | Kein Mindestwert |
* Großer Text = mindestens 18pt normal oder 14pt fett.
** Text, der keine Information trägt (z. B. dekorative Headlines im Bild), ist ausgenommen – aber: trotzdem lesbar machen, bitte!
Quelle: W3C WCAG Contrast Requirements
Warum das wichtig ist – nicht nur rechtlich
Barrierefreiheit heißt nicht „Design-Bremse“, sondern Design, das funktioniert.
Ein paar Zahlen:
- 1 von 12 Männern hat eine Form von Rot-Grün-Sehschwäche (Quelle: Color Blind Awareness)
- Rund 8 Millionen Menschen in Deutschland leben mit einer Sehbeeinträchtigung (Quelle: Statistisches Bundesamt, 2022)
- Viele mobile Nutzer*innen haben ihre Displays auf geringe Helligkeit gestellt – Kontrast hilft auch ihnen.
Typische Design-Probleme
- Hellgrau auf Weiß
Sieht clean aus, ist aber kaum lesbar. Besonders auf mobilen Geräten oder bei Sonnenlicht.
✔ Lösung: #333 oder dunkler statt #999 verwenden. Teste den Kontrast! - Farben als einzige Informationsquelle
Grün = gut, Rot = schlecht? Für Farbenblinde: nichtssagend.
✔ Lösung: Nutze zusätzlich Icons, Muster oder Labels. - Text über Bildhintergründen
Weiße Schrift über einem Sonnenuntergang: Drama pur, aber unlesbar.
✔ Lösung: Hintergrund abdunkeln oder Text in ein semi-transparentes Overlay setzen.
Tools
- WebAIM Contrast Checker
- Color Review – mit Live-Vorschau
- Sim Daltonism (Mac-App zur Simulation von Farbenblindheit)
- Figma Plugin: Able, Contrast oder Stark
Fazit: Guter Kontrast ist gutes Design
Farbkontrast ist kein „Nice-to-have“ – er ist essentiell für Lesbarkeit. Denn Design ist nicht nur für schöne Augen da – sondern auch für weniger gute.