Farbkontrast und Barrierefreiheit: Ein praktischer Leitfaden

Du wählst eine Farbe, die auf deinem Monitor toll aussieht. Veröffentlichst sie. Dann sagt dir jemand, dass er den Text nicht lesen kann.

Das passiert öfter, als du denkst. Etwa 1 von 12 Männern und 1 von 200 Frauen hat irgendeine Form von Farbsehschwäche. Addiere kontrastarme Bildschirme, helles Sonnenlicht und alternde Augen, und plötzlich betreffen deine Farbentscheidungen viele Menschen.

Die gute Nachricht: Es gibt klare Regeln dafür. Sie heißen WCAG-Kontrastanforderungen und sind einfacher, als sie klingen.

Was ist ein Kontrastverhältnis?

Ein Kontrastverhältnis ist eine Zahl, die beschreibt, wie stark sich zwei Farben in der Helligkeit unterscheiden. Es reicht von 1:1 (kein Kontrast — gleiche Farbe) bis 21:1 (maximaler Kontrast — Schwarz auf Weiß).

Deine Augen sehen nicht alle Farbunterschiede gleich. Ein Kontrastverhältnis berücksichtigt, wie die menschliche Wahrnehmung Helligkeit tatsächlich wahrnimmt, nicht nur den mathematischen Farbunterschied.

Schnelle Referenz:

| Kontrastverhältnis | Wie es aussieht | Besteht? | |---|---|---| | 1:1 – 2:1 | Fast unsichtbar | Nein | | 3:1 | Lesbar aber anstrengend | AA nur für großen Text | | 4.5:1 | Komfortables Lesen | AA für normalen Text | | 7:1 | Sehr klar | AAA für normalen Text | | 21:1 | Maximum (Schwarz auf Weiß) | Alles |

AA vs. AAA: Was ist der Unterschied?

WCAG definiert zwei Konformitätsstufen, die für Farbe wichtig sind:

Stufe AA (der Standard, den die meisten Seiten anstreben):

• Normaler Text (unter 18pt): braucht 4.5:1 Kontrastverhältnis
• Großer Text (18pt+ oder 14pt+ fett): braucht 3:1 Kontrastverhältnis
• UI-Komponenten und grafische Objekte: braucht 3:1 Kontrastverhältnis

Stufe AAA (der Goldstandard):

• Normaler Text: braucht 7:1 Kontrastverhältnis
• Großer Text: braucht 4.5:1 Kontrastverhältnis

Die meisten Organisationen zielen auf AA. AAA ist ideal, kann aber designtechnisch einschränkend sein — nicht viele Farbkombinationen erreichen 7:1 und sehen trotzdem gut aus.

Häufige Kontrast-Fehler

Diese tauchen ständig in echten Projekten auf:

Hellgrauer Text auf weißem Hintergrund: Der subtile, "elegante" graue Text? Scheitert oft am Kontrast. #999999 auf Weiß ist nur 2.85:1 — scheitert sogar für großen Text.

Farbiger Text auf farbigen Hintergründen: Blau auf Lila, Grün auf Blau, Rot auf Dunkelgrau. Sie mögen für dich unterscheidbar aussehen, erreichen aber nicht die Kontrastverhältnisse.

Platzhaltertext in Formularen: Hellgrauer Platzhaltertext ist im Webdesign fast universal, und scheitert fast immer an den Kontrastanforderungen. Nutzer mit Sehbehinderung können nicht lesen, was im Feld erwartet wird.

Text über Bildern: Ohne dunkles Overlay oder Textschatten erfüllt Text auf Fotos selten konsistent die Kontraststandards.

Farbsehschwäche berücksichtigen

Kontrastverhältnisse helfen, lösen aber nicht alles. Farbsehschwäche bedeutet, dass manche Nutzer bestimmte Farbpaare buchstäblich nicht unterscheiden können.

Verlasse dich nicht allein auf Farbe, um Informationen zu vermitteln:

• Rot/Grün für Fehler/Erfolg? Füge auch Icons oder Text-Labels hinzu
• Farbkodierte Diagramme? Füge Muster, Beschriftungen oder verschiedene Formen hinzu
• Pflichtfelder nur in Rot markiert? Füge ein Sternchen oder "(Pflichtfeld)" hinzu

Die häufigsten Typen:

• Deuteranopie (Rot-Grün, ~6% der Männer): Rot und Grün sehen ähnlich aus
• Protanopie (Rot-Grün, ~2% der Männer): Rot erscheint dunkel/bräunlich
• Tritanopie (Blau-Gelb, selten): Blau und Gelb sind schwer zu unterscheiden

Praktische Schritte zur Farbkorrektur

Schritt 1: Konvertiere deine Markenfarben mit einem Farbkonverter in Hex. Du brauchst exakte Werte, um den Kontrast zu prüfen.

Schritt 2: Teste jede Text/Hintergrund-Kombination. Prüfe nicht nur deinen Haupttext — prüfe Buttons, Links, Bildunterschriften, Formular-Labels, Fehlermeldungen.

Schritt 3: Korrigiere Fehler durch Helligkeitsanpassung. Normalerweise kannst du den gleichen Farbton und die Sättigung beibehalten und durch Aufhellen oder Abdunkeln das Verhältnis erreichen.

Schritt 4: Teste mit Simulatoren. Chrome DevTools hat einen eingebauten Simulator für Sehbehinderungen (Rendering-Panel > Sehbehinderungen emulieren).

Schritt 5: Prüfe auch deine SVG-Grafiken und Bilder. Icons mit schlechtem Kontrast sind genauso problematisch wie Text.

Schnelle Erfolge

Wenn du es eilig hast, diese sicheren Kombinationen bestehen immer AA:

• Schwarz (#000000) + Weiß (#FFFFFF) — 21:1
• Dunkelgrau (#333333) + Weiß — 12.6:1
• Weißer Text + Dunkelblau (#003366) — 9.9:1
• Schwarzer Text + Hellgelb (#FFF9C4) — 18.1:1
• Dunkelgrün (#2E7D32) + Weiß — 5.1:1

Und diese scheitern häufig:

• Mittelgrau (#808080) + Weiß — 3.9:1 (AA normaler Text scheitert)
• Rot (#FF0000) + Schwarz — 5.25:1 (besteht AA, scheitert AAA)
• Orange (#FF8C00) + Weiß — 3.0:1 (AA normaler Text scheitert)

---

Barrierefreiheit ist nicht nur Compliance — es geht darum sicherzustellen, dass jeder das, was du baust, tatsächlich nutzen kann. Beginne mit der Überprüfung deiner Text-Kontrastverhältnisse. Korrigiere die offensichtlichen Fehler zuerst. Dann arbeite dich durch Buttons, Icons und sekundären Text. Kleine Änderungen, große Wirkung.