Kontrast-Ratio
Die Kontrast-Ratio ist das Helligkeits-Verhältnis zwischen Vorder- und Hintergrund-Farbe – die zentrale Messgröße für visuelle Lesbarkeit nach den Web Content Accessibility Guidelines (WCAG).
Die Kontrast-Ratio ist die wichtigste objektive Mess-Größe für die Lesbarkeit einer Website. Sie ist in den WCAG ab Version 2.0 normiert und wird im Rahmen des deutschen Barrierefreiheitsstärkungsgesetzes (BFSG) seit Mitte 2025 für viele B2C-Anbieter zur verbindlichen Anforderung.
In einfachen Worten
Schwarzer Text auf weißem Grund hat ein Kontrast-Verhältnis von 21:1 – den theoretischen Höchstwert. Hellgrauer Text auf weißem Grund kommt schnell auf 2:1 und ist für Menschen mit eingeschränkter Sehkraft nicht mehr lesbar. Die WCAG legen verbindlich fest, ab welchem Verhältnis ein Text als barrierefrei lesbar gilt: mindestens 4,5:1 für normalen Text auf der Stufe AA, mindestens 3:1 für großen Text (ab 18 Punkt Normal-Schnitt oder 14 Punkt Fett-Schnitt) sowie für grafische Bedien-Elemente wie Icons, Schaltflächen-Umrandungen, Fokus-Indikatoren oder Diagramm-Linien. Auf der höheren Stufe AAA gelten strengere Werte (7:1 für normalen Text, 4,5:1 für großen Text). Geprüft wird die Kontrast-Ratio mathematisch über die relative Leuchtdichte beider Farben.
Wozu brauche ich das?
Pflicht-Prüfung bei jeder neuen Website und bei jeder Re-Design-Iteration. Besonders relevant für Marken-Farbsysteme, in denen ein Akzent-Ton vorgegeben ist, der gegen die Kontrast-Anforderungen geprüft werden muss. Nach der Implementierung eines Dunkel-Modus ist die Prüfung doppelt durchzuführen – die helle Variante kann konform sein, die dunkle Variante nicht (und umgekehrt). Auch bei eingebetteten Drittinhalten (Werbe-Banner, Einbettungs-Elemente) sollte der Kontrast geprüft werden, weil sie das visuelle System der Website unterlaufen können.
Beispiel aus der Praxis
Ein typischer Befund in Mittelstands-Auftritten: Die sekundäre Marken-Farbe – etwa ein freundliches Hellgrau für Subtext, Bildunterschriften oder Fußzeilen-Texte – ist auf weißem Hintergrund nur mit einem Verhältnis um 3:1 kontrastiert. Damit fällt jeder dieser Texte durch die Prüfung auf der WCAG-Stufe AA. Die Korrektur besteht meist in einer Anpassung des Grau-Werts um zwei bis drei Helligkeits-Stufen nach dunkel – die Farb-Wirkung des Auftritts bleibt erhalten, der Kontrast erreicht 4,5:1 oder besser. Der Aufwand ist überschaubar; der Wert besteht in formaler Erfüllung der WCAG-Anforderungen plus spürbar besserer Lesbarkeit für alle Besucher mit nachlassender Sehkraft.
Wirtschaftlicher Nutzen
Eine Kontrast-Prüfung des Farbsystems gehört zu den schnellsten und günstigsten Maßnahmen, mit denen sich Barrierefreiheit messbar verbessern lässt. Der Aufwand bleibt überschaubar, die Wirkung umfasst nicht nur die formale WCAG-Konformität, sondern eine bessere Lesbarkeit für alle Besucher mit nachlassender Sehkraft oder eingeschränkter Farbwahrnehmung – eine wachsende Zielgruppe im B2B-Mittelstand. Browser-Entwickler-Werkzeuge zeigen die Kontrast-Ratio beim Untersuchen eines Elements automatisch an, sodass eine erste Prüfung auch ohne externe Werkzeuge möglich ist.
Typische Fehler
- Sekundäre Marken-Farbe nur am Logo geprüft, nicht im Fließtext-Einsatz – Subtext, Bildunterschriften und Footer-Inhalte fallen durch.
- Inaktive Elemente (Disabled-States) in zu hellem Grau gehalten – formal „inaktiv", für viele Besucher aber schlicht unlesbar.
- Platzhalter-Text in Formularen mit zu wenig Kontrast – gilt als Standard-Verletzung, weil Platzhalter häufig als Beschriftung missverstanden werden.
- Nur im hellen Modus geprüft – die Farb-Paarungen im dunklen Modus werden übersehen.
- Bei Text-Überlagerungen auf Bildern ohne Schutz-Mechanismus gearbeitet – der Kontrast sinkt je nach Bildausschnitt unkontrolliert.
Worauf achten?
- WCAG-Stufe AA als Minimum: 4,5:1 für normalen Text, 3:1 für großen Text und grafische Bedien-Elemente.
- Browser-Entwickler-Werkzeuge zeigen die Kontrast-Ratio pro Element direkt an – ein erster Prüfschritt ohne zusätzliche Software.
- Heller und dunkler Modus (prefers-color-scheme) separat prüfen, niemals nur einen der beiden.
- Das Marken-Farbsystem ist kein Argument für niedrigeren Kontrast – die Farbe lässt sich in den meisten Fällen um Nuancen anpassen, ohne ihre Wirkung zu verlieren.
- Bei Bildern mit Text-Überlagerung Schutz-Mechanismen einsetzen – Text-Schatten, halbtransparente Hintergrund-Fläche oder gezielter Bildausschnitt sichern den Mindest-Kontrast.
Häufig gestellte Fragen
Was ist die Kontrast-Ratio?
Das mathematische Helligkeits-Verhältnis zwischen Vorder- und Hintergrund-Farbe. Sie reicht von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß) und ist die zentrale Mess-Größe für die Lesbarkeit nach den Web Content Accessibility Guidelines.
Welche Werte fordern die WCAG?
Auf der Stufe AA: 4,5:1 für normalen Text, 3:1 für großen Text (ab 18 Punkt Normal-Schnitt oder 14 Punkt Fett-Schnitt) sowie für grafische Bedien-Elemente. Auf der strengeren Stufe AAA: 7:1 für normalen Text und 4,5:1 für großen Text.
Wie wird die Kontrast-Ratio gemessen?
Mathematisch über die relative Leuchtdichte beider Farben nach der in den WCAG definierten Formel. In der Praxis übernehmen das die Entwickler-Werkzeuge moderner Browser oder spezialisierte Kontrast-Prüf-Werkzeuge automatisch – manuelle Berechnung ist nicht erforderlich.
Gilt der Kontrast auch für Icons und Diagramme?
Ja. Für grafische Bedien-Elemente wie Icons, Schaltflächen-Umrandungen, Diagramm-Linien und Status-Indikatoren gilt mindestens 3:1 auf der Stufe AA. Diese Anforderung wird häufig übersehen, weil sie sich auf nicht-textliche Elemente bezieht.
Wie wirkt sich das BFSG aus?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet ab dem 28. Juni 2025 viele B2C-Anbieter (E-Commerce, Banking, Personenverkehr, E-Books, Telekommunikation) auf Barrierefreiheit nach EN 301 549. Die Kontrast-Ratio ist dabei eine der zentralen messbaren Anforderungen.