In diesem Artikel
Was ist Farbkontrast und warum ist er wichtig?
Farbkontrast ist der Unterschied in der Leuchtdichte zwischen zwei Farben, typischerweise zwischen Vordergrundtext und seinem Hintergrund. Ausreichender Kontrast stellt sicher, dass Text für alle lesbar ist, auch für Menschen mit Sehschwäche oder Farbenblindheit. Schlechter Kontrast macht Inhalte schwer oder unmöglich lesbar und schließt Millionen von Nutzern aus.
Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastverhältnisse, die die Lesbarkeit über ein breites Spektrum an Sehfähigkeiten hinweg gewährleisten. Diese Standards zu erfüllen ist nicht nur gute Praxis – es ist in vielen Rechtsordnungen eine gesetzliche Anforderung unter Barrierefreiheitsgesetzen wie ADA, EAA und EN 301 549.
Wie WCAG-Kontrastverhältnisse funktionieren
WCAG nutzt die relative Leuchtdichte, um Kontrastverhältnisse zwischen zwei Farben zu berechnen. Die Formel liefert ein Verhältnis von 1:1 (kein Kontrast, identische Farben) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß).
- Die relative Leuchtdichte wird aus linearisierten sRGB-Werten mit der Formel berechnet: L = 0.2126R + 0.7152G + 0.0722B
- Das Kontrastverhältnis ist (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere und L2 die dunklere Farbe ist
- Normaler Text (unter 18pt oder 14pt fett) erfordert mindestens 4,5:1 für AA und 7:1 für AAA-Konformität
Kostenlos testen – keine Registrierung erforderlich
Farbkontrast prüfen →WCAG AA vs. AAA-Konformitätsstufen verstehen
WCAG definiert zwei Konformitätsstufen für Farbkontrast. Stufe AA ist der Mindeststandard, den die meisten Barrierefreiheitsvorschriften verlangen, während AAA erweiterte Barrierefreiheit für Nutzer mit stärkeren Sehbeeinträchtigungen bietet.
- AA normaler Text – erfordert ein Kontrastverhältnis von mindestens 4,5:1 für Text kleiner als 18pt (oder 14pt fett)
- AA großer Text – erfordert mindestens 3:1 für Text ab 18pt (oder ab 14pt fett)
- AAA normaler Text – erfordert mindestens 7:1 für die höchste Lesbarkeitsstufe
- AAA großer Text – erfordert mindestens 4,5:1 für großen Text auf der erweiterten Stufe
- Nicht-Text-Kontrast – UI-Komponenten und grafische Objekte erfordern mindestens 3:1 gegenüber angrenzenden Farben
Tipps für barrierefreies Farbdesign
Barrierefrei zu gestalten bedeutet nicht, auf Ästhetik zu verzichten. Diese praktischen Tipps helfen dir, schöne Designs zu erstellen, die jeder nutzen kann.
- Beginne mit dem Kontrast – wähle zuerst deine Text- und Hintergrundfarben und baue dann deine Palette darum herum auf
- Verlasse dich nie allein auf Farbe – verwende Symbole, Muster oder Beschriftungen zusätzlich zur Farbe, um Bedeutung zu vermitteln
- Teste mit echten Inhalten – Platzhaltertext mag gut aussehen, aber echte Inhalte in unterschiedlichen Längen können Kontrastprobleme aufdecken
- Betrachte den Dark Mode separat – Farben, die im hellen Modus bestehen, können im dunklen Modus durchfallen und umgekehrt
- Verwende ein Kontrastprüfungs-Tool – automatisierte Werkzeuge erkennen Probleme schneller als eine manuelle Prüfung und verhindern Regressionen
Häufig gestellte Fragen
Was ist das Mindestkontrastverhältnis für WCAG-Konformität?
Für WCAG 2.1 Stufe AA erfordert normaler Text ein Kontrastverhältnis von mindestens 4,5:1, und großer Text (18pt oder 14pt fett) erfordert mindestens 3:1. Stufe AAA erhöht diese Werte auf 7:1 bzw. 4,5:1. Die meisten Barrierefreiheitsgesetze verweisen auf Stufe AA als Mindeststandard.
Ist Farbkontrast auch für Bilder und Symbole relevant?
Ja. Das WCAG-2.1-Erfolgskriterium 1.4.11 verlangt, dass UI-Komponenten und grafische Objekte mindestens 3:1 Kontrast gegenüber angrenzenden Farben aufweisen. Dazu gehören Symbole, Rahmen von Formularfeldern, Fokusindikatoren und Diagrammelemente. Dekorative Bilder sind ausgenommen.
Wie behebe ich niedrigen Kontrast, ohne meine Markenfarben zu ändern?
Du kannst die Helligkeit deiner Markenfarben anpassen und dabei denselben Farbton und dieselbe Sättigung beibehalten. Dunkle zum Beispiel ein helles Blau für Text ab oder helle einen dunklen Hintergrund auf. Ein anderer Ansatz ist, deine Markenfarben für große dekorative Elemente zu verwenden, wo die Kontrastanforderungen niedriger sind, und für den Fließtext kontraststarke Neutraltöne einzusetzen.