WCAG-Farbkontrast: Praxisleitfaden zur Barrierefreiheit
Erfahren Sie, was WCAG-Kontrastverhältnisse sind, warum sie zählen und wie Sie sie für barrierearmes Design prüfen.
Was ist WCAG-Farbkontrast und warum ist er wichtig?
Die WCAG (Web Content Accessibility Guidelines) definieren das Mindestkontrastverhältnis zwischen Text und Hintergrund, das als barrierearm gilt. Die Richtlinien setzen 4,5:1 für normalen Text und 3:1 für großen Text auf AA-Niveau sowie 7:1 und 4,5:1 auf AAA-Niveau.
Barrierearmer Farbkontrast ist nicht nur ein Häkchen auf der Checkliste — er entscheidet direkt darüber, ob Nutzer mit Sehschwäche, Farbblindheit oder beim Lesen in grellem Sonnenlicht Ihre Inhalte lesen können. Wer Kontraste von Anfang an mitdenkt, macht sein Produkt für ein breiteres Publikum nutzbar — und erfüllt in vielen Rechtsräumen gesetzliche Pflichten.
Häufige Anwendungsfälle
- Fließtext und Überschriften: Vorder-/Hintergrundkombinationen im Design prüfen
- Buttons und Links: Sicherstellen, dass CTAs auf ihrem Hintergrund klar lesbar sind
- Formularfelder: Kontrast von Labels und Platzhaltern prüfen
- Diagramme und Grafiken: Datenbeschriftungen aus dem Visual hervorheben
- Mobile UI: Blendung und kleine Displays kompensieren
Methode 1: Den kostenlosen WCAG-Kontrastprüfer von UtilBoxx verwenden (Empfohlen)
Unser WCAG-Farbkontrastprüfer berechnet das Kontrastverhältnis zweier Farben sofort und bewertet es nach AA- und AAA-Schwellen. So verwenden Sie ihn:
- Gehen Sie zu utilboxx.com/de/tools/color/contrast
- Wählen Sie eine Vorder- und Hintergrundfarbe (Hex, RGB oder Farbwähler)
- Sehen Sie das Kontrastverhältnis und den Pass/Fail-Status für AA und AAA
- Probieren Sie vorgeschlagene Anpassungen direkt im Tool
- Kopieren Sie die Werte für Ihr Designsystem
Warum diese Methode funktioniert:
- Live-Aktualisierung beim Anpassen der Farben
- Zeigt AA-, AAA-, AA-Large- und AAA-Large-Status auf einen Blick
- Schlägt barrierearme Alternativen vor, wenn ein Paar scheitert
- Enthält einen Sehsimulation (normal, Sehschwäche, Farbblindheit)
- 100% im Browser, keine Bild-Uploads
Methode 2: Kontrast per Hand berechnen
Die Kontrastverhältnis-Formel ist von WCAG definiert:
- Wandeln Sie jede Farbe in ihre relative Leuchtdichte um
- Berechnen Sie (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist
- Runden Sie auf zwei Dezimalstellen
Beispiel: Schwarz (#000000) auf Weiß (#FFFFFF) ergibt 21:1 — das theoretische Maximum.
Wenn Sie nicht rechnen wollen, ist unser Kontrastprüfer schneller.
Methode 3: Browser-Entwicklertools nutzen
Die meisten modernen Browser enthalten Accessibility-Inspektoren. In Chrome DevTools klicken Sie auf „Inspect" und öffnen im Elements-Panel den Tab „Accessibility", um das Kontrastverhältnis jedes Elements zu sehen. Praktisch für die Fehlersuche in Produktion.
Häufig gestellte Fragen
Was ist ein gutes Kontrastverhältnis?
Für AA mindestens 4,5:1 bei Fließtext und 3:1 bei großem Text. Für AAA 7:1 und 4,5:1. Über 7:1 ist ausgezeichnet.
Was zählt als „großer" Text?
WCAG definiert großen Text als 18pt (24px) regular oder 14pt (18,66px) fett. Großer Text hat einen milderen Schwellenwert, da er bei weniger Kontrast besser lesbar bleibt.
Gilt der Kontrast auch für Nicht-Text-Elemente?
Ja. WCAG 2.1 führt 3:1 als Minimum für UI-Komponenten und grafische Objekte ein. Icons, Formularfeld-Ränder und Diagrammelemente sollten dieses Minimum erfüllen.
Wie prüfe ich Kontrast auf Verläufen und Bildern?
Legen Sie im schlimmsten Fall (hellster Bereich des Hintergrundes) ein einfarbiges Feld unter den Text und prüfen Sie. Bei Bildern erhöhen Sie die Opazität einer Überlagerung oder fügen einen text-shadow hinzu, um die Lesbarkeit zu sichern.
Fazit
Barrierearmer Kontrast ist die Grundlage inklusiven Designs. Der WCAG-Kontrastprüfer von UtilBoxx macht die Prüfung von Farbpaaren schnell, visuell und lehrreich.