Farbkontrast und Lesbarkeit — WCAG AA erreichen
Verstehe Kontrastverhältnisse, verwende Contrast Checker Tools und gestalte Designs, die für Menschen mit Sehbehinderungen zugänglich sind.
Warum Farbkontrast so wichtig ist
Etwa 253 Millionen Menschen weltweit haben eine Sehbehinderung. In Deutschland leben über 2 Millionen Menschen mit Seheinschränkungen. Sie’re auf Websites angewiesen, die lesbar sind — nicht optional, sondern notwendig. Farbkontrast ist einer der einfachsten, aber wirkungsvollsten Wege, um Barrierefreiheit zu erreichen.
WCAG 2.1 AA ist der Standard, den große Unternehmen und öffentliche Institutionen erfüllen müssen. Aber hier’s die gute Nachricht: Es ist nicht kompliziert. Mit wenigen Checks und Tools kannst du sicherstellen, dass dein Design für alle lesbar ist.
Die Kontrastverhältnisse verstehen
Farbkontrast wird als Verhältnis gemessen. Das klingt mathematisch, aber es ist eigentlich einfach: Es geht darum, wie sehr sich zwei Farben unterscheiden.
WCAG AA Standard: Normaler Text benötigt mindestens 4,5:1 Kontrast. Großer Text (über 18pt oder 14pt fett) benötigt mindestens 3:1.
Was bedeutet das in der Praxis? Wenn du schwarzen Text (#000000) auf weißem Hintergrund (#ffffff) verwendest, erreichst du 21:1 — deutlich über dem Standard. Aber wenn du dunkelgrauen Text (#555555) auf hellgrauem Hintergrund (#eeeeee) nimmst, bekommst du vielleicht nur 2:1. Das ist zu schwach.
- 4,5:1 für normalen Text und kleine Schrift
- 3:1 für großen Text (mindestens 18pt oder 14pt bold)
- 3:1 für Graphiken und UI-Komponenten
- AAA (noch bessere Barrierefreiheit): 7:1 für normalen Text
Tools zum Überprüfen deiner Farben
Du musst nicht selbst rechnen. Es gibt großartige kostenlose Tools, die deine Kontrastverhältnisse sofort überprüfen.
WebAIM Contrast Checker
Das beliebteste Tool. Du gibst Vorder- und Hintergrundfarbe ein, und es zeigt dir sofort, ob du WCAG AA, AAA erreichst. Einfach, zuverlässig, kostenlos.
Stark — Chrome Extension
Installier diese Extension in Chrome und überprüfe Kontrast direkt auf deiner Website. Markiert Probleme automatisch und zeigt dir, was zu schwach ist.
WAVE Browser Extension
Nicht nur für Kontrast, sondern für alle Barrierefreiheitsprobleme. Gibt dir einen kompletten Überblick über die Zugänglichkeit deiner Seite.
Accessible Colors
Wähle eine Farbe aus und es schlägt dir kompatible Farben vor, die WCAG AA erreichen. Perfekt, wenn du bereits eine Markenfarbe hast.
So implementierst du gute Kontraste
Jetzt weißt du, worauf du achten musst. Hier sind konkrete Schritte für dein nächstes Projekt:
Wähle deine Primärfarben bewusst
Wenn du deine Brand-Farben festlegst, überprüfe sofort, welche Hintergrundfarben damit funktionieren. Ein schönes Blau sieht toll aus, aber wenn es auf dunkelgrauem Hintergrund nur 2:1 Kontrast gibt, ist’s für viele Menschen unlesbar.
Überprüfe jeden Text und Button
Geh dein Design durch. Jeder Text, jeder Button, jedes Label. Nutze WebAIM und überprüfe die Kontraste. Normale Textblöcke brauchen 4,5:1. Große Überschriften können 3:1 sein. Icons und Grenzen auch 3:1.
Teste mit echten Menschen
Tools sind wertvoll, aber sie’re nicht alles. Wenn du kannst, lass Menschen mit Sehbehinderungen deine Website testen. Was das Tool sagt ist mathematisch korrekt, aber die echte Erfahrung kann unterschiedlich sein.
Praktische Best Practices
Dunkel auf Hell, Hell auf Dunkel
Die einfachste Faustregel: Dunkle Texte auf hellen Hintergründen oder helle Texte auf dunklen Hintergründen. Vermeid Farben in der mittleren Tonalität zusammen.
Nicht nur auf Farbe verlassen
Manche Menschen sehen Farben nicht wie andere (Farbblindheit). Verwend nicht nur Rot/Grün zur Unterscheidung. Nutze Symbole, Text oder Muster zusätzlich.
Teste im echten Browser
Design-Tools zeigen Farben manchmal anders als Browser. Überprüfe deine Website auf verschiedenen Monitoren und in echten Browsern.
Grenzen und Umrisse checken
Nicht nur Text. Buttons, Eingabefelder, Icons — sie brauchen auch Kontrast zu ihrem Hintergrund. Das wird oft übersehen.
Mobil testen nicht vergessen
Handy-Bildschirme sind heller und zeigen Farben manchmal anders. Überprüf deine Kontraste auf verschiedenen Geräten.
Kontrast ist auch für Sehende hilfreich
Guter Kontrast hilft nicht nur Menschen mit Sehbehinderungen. Es verbessert die Lesbarkeit für alle — besonders in heller Umgebung oder auf schlechten Bildschirmen.
Farbkontrast ist dein Anfang zur Barrierefreiheit
WCAG AA zu erreichen ist nicht schwer. Es erfordert Aufmerksamkeit und ein paar kostenlose Tools, aber die Arbeit lohnt sich. Du machst deine Website für Millionen Menschen zugänglicher — Menschen, die sie sonst einfach nicht nutzen könnten.
Fang heute an. Überprüf deine aktuelle Website mit WebAIM. Schau, wo die Probleme sind. Und dann fix sie. Es’s ein einfacher erster Schritt in eine inklusivere digitale Welt.
“Barrierefreiheit ist nicht ein Feature. Es ist eine grundlegende Anforderung guter Design.”
Bereit, mehr über Barrierefreiheit zu lernen? Schau dir unsere anderen Guides an — über semantisches HTML, Tastaturnavigation und Screen Readers.
Hinweis
Dieser Artikel ist zu Bildungszwecken gedacht und bietet allgemeine Informationen zu WCAG 2.1 und Farbkontrast. Die spezifischen Anforderungen für dein Projekt können je nach Kontext, Zielgruppe und gesetzlichen Vorgaben variieren. Für rechtliche oder spezifische Implementierungsfragen konsultiere bitte die offizielle WCAG-Dokumentation oder einen Experten für digitale Barrierefreiheit.
