Kontrast-Prüfer
Farbkontrast für WCAG prüfen
Wie man Kontrast-Prüfer benutzt
Farbkontrast für WCAG prüfen Kostenloses Online-Tool, ohne Anmeldung, ohne aufdringliche Werbung. Jetzt nutzen.
Warum ist Farbkontrast wichtig?
Etwa 8% der Männer und 0,5% der Frauen haben eine Form von Farbblindhheit. Zudem lesen Menschen unter schwierigen Bedingungen — starkes Sonnenlicht, Bildschirme schlechter Qualität, Müdigkeit oder alternde Augen. Ausreichender Farbkontrast stellt sicher, dass Ihre Inhalte für alle Nutzer lesbar sind, unabhängig von ihren Sehbedingungen.
- Web-Barrierefreiheits-Compliance: Die WCAG 2.1 (Richtlinien für barrierefreie Webinhalte) legen Mindest-Kontrastverhältnisse fest. In Deutschland macht die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) digitale Barrierefreiheit für öffentliche Stellen und viele private Unternehmen verbindlich.
- Design-Review: Überprüfen Sie Text-/Hintergrundfarb-Kombinationen während der Design-Phase, vor der Entwicklung. Kontrastprobleme in Figma zu beheben ist viel kostengünstiger als nach dem Launch.
- Komponentenbibliotheken: Stellen Sie sicher, dass jede Farbkombination in Ihrem Design-System — Text auf Primärfarbe, Text auf Sekundärfarbe, deaktivierte Zustände — die Barrierefreiheitsanforderungen in allen Nutzungskontexten erfüllt.
- Dark Mode: Bei der Implementierung des Dark Mode scheitern Farben, die auf hellen Hintergründen funktionierten, häufig auf dunklen Hintergründen. Jeder Modus benötigt eine unabhängige Kontrastprüfung.
- Datenvisualisierung: Stellen Sie sicher, dass Diagrammfarben für farbenblinde Nutzer unterscheidbar und auf verschiedenen Hintergrundfarben lesbar sind — wichtig für Dashboards und Unternehmensberichte.
WCAG- und BITV-2.0-Niveaus: Niveau A ist das absolute Minimum. Niveau AA (Verhältnis ≥ 4,5:1 für normalen Text, ≥ 3:1 für großen Text) ist der gesetzliche Standard in den meisten Jurisdiktionen und das Ziel der BITV 2.0. Niveau AAA (Verhältnis ≥ 7:1) für höchste Barrierefreiheit.
Frequently Asked Questions
Welches Kontrastverhältnis wird von WCAG AA und BITV 2.0 gefordert?
WCAG AA und BITV 2.0 erfordern ein Mindest-Kontrastverhältnis von 4,5:1 für normalen Text (unter 18pt oder 14pt fett) und 3:1 für großen Text (18pt oder mehr, oder 14pt fett oder mehr). UI-Komponenten und grafische Elemente erfordern 3:1. Dies sind Mindestwerte — höherer Kontrast ist immer besser für die allgemeine Lesbarkeit.
Wie wird das Kontrastverhältnis berechnet?
Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Luminanz der helleren Farbe und L2 die der dunkleren ist. Luminanz wird aus linearen RGB-Werten nach einer spezifischen Formel berechnet. Der maximale Kontrast beträgt 21:1 (Schwarz auf Weiß). Ein Verhältnis von 1:1 bedeutet kein Kontrast.
Gilt das Kontrastverhältnis für farbigen Text auf farbigem Hintergrund?
Ja — die WCAG-Formel vergleicht die relative Luminanz, nicht nur die wahrgenommene Helligkeit. Roter Text auf grünem Hintergrund kann geringen Kontrast haben, auch wenn beide Farben lebhaft sind. Testen Sie immer reale Farbkombinationen — verlassen Sie sich nicht auf visuelle Intuition.
Was ist der Unterschied zwischen Farbkontrast und Farbenblindheit?
Das Kontrastverhältnis misst Luminanzunterschiede — betrifft alle Nutzer, auch jene mit normaler Farbsicht (besonders bei starkem Licht oder auf Bildschirmen schlechter Qualität). Farbenblindheit beeinflusst, wie Farben unterschieden werden, nicht notwendigerweise ihre Luminanz. Ein Design mit hohem Kontrast, das nur Rot und Grün verwendet, besteht den Luminanztest, kann aber für rotgrün-blinde Nutzer nicht unterscheidbar sein.
Beeinflusst die Schriftstärke die Kontrastanforderungen?
Ja. Fetter und großer Text hat niedrigere Mindestanforderungen, da er von Natur aus einfacher zu lesen ist. WCAG AA erfordert 3:1 für Text von 18pt (24px) oder mehr oder 14pt (ca. 18,67px) fett. Für kleineren oder nicht fetten Text gilt die Anforderung von 4,5:1.
Kontrast-Checker vs. Farbenblindheits-Simulator vs. Barrierefreiheits-Audit
Ein Kontrast-Checker überprüft das Luminanzverhältnis zwischen zwei spezifischen Farben. Ein Farbenblindheits-Simulator (Coblis, Chrome DevTools) zeigt, wie ein Design mit verschiedenen Arten von Farbsehschwäche erscheint. Ein vollständiges Barrierefreiheits-Audit (axe, Lighthouse, WAVE) scannt eine gesamte Seite nach allen WCAG- und BITV-Verstößen. Für umfassende Barrierefreiheit: Kontrast in der Design-Phase prüfen, Farbenblindheit vor dem Launch simulieren und automatisierte Audits auf der Produktionssite durchführen.