Warum Farbkontrast wichtig ist
Etwa 8 % der Manner und 0,5 % der Frauen haben eine Form von Farbsehschwache. Millionen weitere erleben eine verminderte Kontrastempfindlichkeit durch Alterung, Katarakt oder Sehbedingungen (helles Sonnenlicht, alte Monitore). Kontrarmarmer Text ist keine kleine Unannehmlichkeit, er macht Inhalte fur einen erheblichen Teil Ihres Publikums unlesbar.
WCAG (Web Content Accessibility Guidelines) bietet den internationalen Standard fur barrierefreien Farbkontrast und wird in Barrierefreiheitsgesetzen weltweit referenziert.
Was ist Kontrastverhaltnis?
Das Kontrastverhaltnis misst den Luminanzunterschied zwischen zwei Farben. Es wird als Verhaltnis von 1:1 (identische Farben, kein Kontrast) bis 21:1 (schwarzer Text auf weissem Hintergrund, maximaler Kontrast) ausgedruckt.
Die Formel vergleicht die relative Luminanz der Vordergrundfarbe mit der Hintergrundfarbe:
Kontrastverhaltnis = (L1 + 0,05) / (L2 + 0,05)
Dabei ist L1 die Luminanz der helleren Farbe und L2 die der dunkleren. Sie mussen das nicht manuell berechnen, Kontrastprufprogramme tun es fur Sie.
WCAG 2.1-Anforderungen
WCAG definiert zwei Konformitatsebenen fur Kontrast:
Ebene AA (Standardanforderung)
| Inhaltstyp | Minimales Kontrastverhaltnis |
|---|---|
| Normaler Text (< 18pt / 14pt fett) | 4,5:1 |
| Grosser Text (ab 18pt oder ab 14pt fett) | 3:1 |
| UI-Komponenten und grafische Elemente | 3:1 |
Ebene AAA (verbessert)
| Inhaltstyp | Minimales Kontrastverhaltnis |
|---|---|
| Normaler Text | 7:1 |
| Grosser Text | 4,5:1 |
Was von Kontrastanforderungen ausgenommen ist
- Dekorativer Text (reine visuelle Dekoration ohne Informationswert)
- Text in Logos und Markennamen
- Deaktivierte/inaktive UI-Elemente
Wie man Kontrast pruft
Im Browser-Entwicklerwerkzeug
Chrome und Firefox haben integrierte Kontrastprufung. In DevTools ein Textelement auswahlen, den Barrierefreiheits-Reiter ansehen, das Kontrastverhaltnis wird zusammen mit Bestehen/Nicht-Bestehen-Anzeigen angezeigt.
Entwurfswerkzeuge
Figma, Sketch und Adobe XD haben Barrierefreiheits-Plugins, die Kontrastverhaltnisse beim Entwurf prufen.
Dedizierter Prufer
Der Farbkontrast-Prufer auf dieser Seite erlaubt es, beliebige Vordergrund- und Hintergrundfarben einzugeben und zeigt sofort das Kontrastverhaltnis, WCAG AA/AAA Bestehen/Nicht-Bestehen-Status und eine Textvorschau in mehreren Grossen.
Haufige Fehler und Korrekturen
Hellgrauer Text auf weissem Hintergrund, extrem haufig, besteht fast nie. Text dunkler machen oder Hintergrund heller machen.
Weisser Text auf einer mittelgesattigten Farbe, besteht oft nicht bei kleineren Textgrossen, obwohl er bei grossen Grossen in Ordnung aussieht. Bei der tatsachlichen Schriftgrosse prufen.
Platzhaltertext, die Standard-Platzhalterfarbe des Browsers ist typischerweise sehr hell und besteht WCAG AA fast universell nicht. color: #767676 oder dunkler fur Platzhaltertext verwenden.
Symbol-nur-UI, ein Symbol ohne Textbeschriftung ist ein grafisches Element und muss das 3:1-Verhaltnis gegenuber seinem Hintergrund erfullen.
Nur-Farbe-Information, Informationen nie nur durch Farbe vermitteln (z. B. "Fehler werden in Rot angezeigt"). Das versagt WCAG 1.4.1, selbst wenn der Kontrast in Ordnung ist.
WCAG 3.0 und APCA
WCAG 3.0 (in Entwicklung) fuhrt APCA (Advanced Perceptual Contrast Algorithm) ein, der Schriftstarke, Grosse und Sehkontext berucksichtigt. Der aktuelle 2.1-Standard bleibt die gesetzliche Grundlage.
Kurz zusammengefasst
WCAG 2.1 erfordert mindestens ein Kontrastverhaltnis von 4,5:1 fur normalen Text und 3:1 fur grossen Text und UI-Komponenten (Ebene AA). Fruh im Entwurfsprozess testen, Farbentscheidungen nachtraglich anzupassen ist erheblich schwieriger als sie von Anfang an richtig zu machen.