Farbkontrast und WCAG: Was ist die Anforderung und wie messen Sie ihn?

Kurze Antwort. WCAG Stufe AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text und Hintergrund für normalen Text und 3:1 für großen Text und grafische Elemente (Icons, Eingabefeld-Ränder). Zu wenig Kontrast ist mit Abstand der häufigste Barrierefreiheitsfehler in Onlineshops — und glücklicherweise oft in einem Zug themenweit zu beheben. Er ist zudem zu 100 % exakt mit Software messbar, es gibt also nichts zu diskutieren.

Warum ist Kontrast so wichtig?

Hellgrauer Text auf Weiß sieht auf Ihrem Bildschirm schick aus, ist aber für sehbehinderte Menschen, für ältere Besucher und für jeden, der bei hellem Sonnenlicht auf das Smartphone schaut, schwer lesbar. Ein großer Teil Ihrer Kunden fällt in mindestens eine dieser Gruppen. Schlechter Kontrast kostet Sie also buchstäblich Lesbarkeit — und damit Umsatz.

Was sind die genauen WCAG-Kontrastanforderungen?

Die Norm unterscheidet nach Textgröße und Elementtyp. Je kleiner die Buchstaben, desto schärfer muss der Kontrast sein:

• Normaler Text (kleiner als 24px oder 18,66px fettgedruckt): mindestens 4,5:1.
• Großer Text (ab 24px oder 18,66px fettgedruckt — also 18pt / 14pt bold): mindestens 3:1.
• Grafische Komponenten (Icons, Eingabefeld-Ränder, aktive Schaltflächenränder): mindestens 3:1 gegenüber den angrenzenden Farben (WCAG 1.4.11).

Kontrast wird als Verhältnis ausgedrückt: 1:1 ist kein Kontrast, 21:1 ist reines Schwarz auf Weiß. Ein paar häufige Kombinationen:

Wie messen Sie den Kontrast selbst?

Sie müssen nicht raten und nicht selbst mit Formeln hantieren. Es gibt drei zuverlässige Wege:

1. Ein automatisierter Scan (empfohlen). Tools wie Seviranta berechnen den Kontrastwert jedes Textelements auf der Seite in einem Zug und markieren die exakte Codezeile der Verstöße — inklusive des gemessenen Werts neben dem geforderten.
2. Die Entwicklertools Ihres Browsers. Klicken Sie in Chrome oder Edge mit der rechten Maustaste auf Text → "Untersuchen"; die Farbauswahl zeigt oft direkt das Kontrastverhältnis und den WCAG-Status.
3. Ein manueller Kontrast-Checker. Geben Sie die zwei Hex-Codes ein und Sie erhalten das Verhältnis. Praktisch in der Designphase, aber zeitaufwändig für eine ganze Live-Website.

Wie beheben Sie Kontrastfehler effizient?

Das Schöne an Kontrastfehlern: Sie sind fast immer zentral gesteuert. In Shopify, WooCommerce oder Magento sind die Farben an globale Variablen in Ihrem Theme gekoppelt. Machen Sie die Text- oder Hintergrundfarbe einen Ton dunkler oder heller, bis das Verhältnis stimmt, und Sie erfüllen die Kontrastanforderung in einem Zug für Ihren gesamten Onlineshop.

Beginnen Sie bei Ihrem Conversion-Trichter: dem Text auf den "In den Warenkorb"- und "Zur Kasse"-Schaltflächen, Ihren Preisangaben, Menüpunkten und den Warnhinweisen beim Checkout. Dort liegt der größte Gewinn. Das ist übrigens einer der 10 häufigsten Barrierefreiheitsfehler.

Warum behebt ein Barrierefreiheits-Widget das nicht?

Viele Unternehmer hoffen, Kontrast mit einem Overlay-Widget und seinem "Hoher- Kontrast-Knopf" zu beheben. Das ist technisch und rechtlich unzureichend: Aufsichtsbehörden und KI-Scraper prüfen den Standardzustand Ihres Quellcodes. Erfüllt Ihr CSS nicht 4,5:1, dann erfüllen Sie es nicht — eine vorübergehende JavaScript-Schicht ändert das nicht. Warum ein Overlay-Widget Sie nicht schützt geht hier tiefer darauf ein. Der einzig haltbare Weg ist, die Farben in Ihrem eigenen Theme anzupassen.

Was ändert sich mit WCAG 3.0 (APCA)?

In den kommenden WCAG-3.0-Richtlinien wird die aktuelle mathematische Kontrastformel durch APCA (Advanced Perceptual Contrast Algorithm) ersetzt. APCA bildet besser ab, wie das menschliche Auge Kontrast tatsächlich wahrnimmt — es berücksichtigt Schriftart, Stärke und Kontext statt rein die Helligkeit zweier Farben. Stellen Sie Ihre Website jetzt sauber auf die 4,5:1-Anforderung von WCAG 2.1/2.2 ein, dann sind Sie auch bei diesem Übergang gut vorbereitet.

Sehen Sie, wo Ihre Website steht

Neugierig, welche Farben auf Ihrer Website noch nicht erfüllen? Scannen Sie eine Seite gratis. Sie sehen pro Stelle das gemessene Kontrastverhältnis neben dem geforderten, mit den echten Farben Ihrer Website — in weniger als 60 Sekunden, ohne Konto.