Blog

Welche Rolle spielt Kontrast bei der WCAG-Konformität?

Herausgegeben von Decareto

4 Minuten lesen

November 3, 2026

Kontrast ist eine der zentralen Anforderungen der WCAG-Konformität: Ohne ausreichenden Farbkontrast zwischen Text und Hintergrund können Menschen mit Sehbeeinträchtigungen Inhalte nicht zuverlässig wahrnehmen. Die WCAG definiert konkrete Mindestverhältnisse, die je nach Konformitätsstufe und Textgröße variieren. In diesem Artikel beantworten wir die wichtigsten Fragen rund um Kontrastanforderungen, betroffene Nutzergruppen und praktische Prüfmethoden.

Welche Kontrastverhältnisse schreibt die WCAG vor?

Die WCAG schreibt für normalen Text auf Konformitätsstufe AA ein Mindestkontrastverhältnis von 4,5:1 vor. Für großen Text ab 18 Punkt (bzw. 14 Punkt fett) gilt ein reduziertes Mindestmaß von 3:1. Auf der strengeren Stufe AAA erhöhen sich diese Anforderungen auf 7:1 für normalen Text und 4,5:1 für großen Text.

Diese Anforderungen sind in Erfolgskriterium 1.4.3 (Kontrast, Minimum) auf Stufe AA und 1.4.6 (Kontrast, Erweitert) auf Stufe AAA verankert. Das Kontrastverhältnis wird als Zahlenpaar ausgedrückt, zum Beispiel 4,5:1, wobei der erste Wert die hellere Farbe und der zweite die dunklere beschreibt. Ein Verhältnis von 1:1 bedeutet keinen Kontrast, ein Verhältnis von 21:1 steht für den maximalen Kontrast zwischen reinem Schwarz und reinem Weiß.

Für die meisten Websites ist Stufe AA der relevante Maßstab, da das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland auf WCAG 2.1 AA verweist. Wer eine Website auf Barrierefreiheit prüfen möchte, sollte daher die AA-Anforderungen als Mindeststandard behandeln.

Was genau misst das Kontrastverhältnis bei Text und Hintergrund?

Das Kontrastverhältnis misst den Unterschied in der relativen Helligkeit (Luminanz) zwischen zwei Farben. Dabei wird die Helligkeit jeder Farbe nach einer standardisierten Formel berechnet, die berücksichtigt, wie das menschliche Auge Rot-, Grün- und Blauanteile unterschiedlich stark wahrnimmt. Das Ergebnis ist ein Verhältnis, das angibt, wie stark sich Vorder- und Hintergrundfarbe unterscheiden.

Wichtig zu verstehen: Das Kontrastverhältnis misst ausschließlich die Helligkeitsdifferenz, nicht den Farbunterschied. Zwei Farben können sich optisch deutlich unterscheiden, zum Beispiel ein mittleres Rot und ein mittleres Grün, und trotzdem ein unzureichendes Kontrastverhältnis aufweisen, weil ihre relative Helligkeit nahezu identisch ist. Menschen mit Rot-Grün-Sehschwäche können solche Kombinationen kaum unterscheiden, selbst wenn sie für andere Personen kontrastreich wirken.

Die Berechnung basiert auf dem WCAG-Standard für relative Luminanz, der im Dokument der W3C Web Content Accessibility Guidelines (aktuell Version 2.2) beschrieben ist. Maßgeblich sind immer die tatsächlich auf dem Bildschirm dargestellten Farben, also nach Anwendung von CSS-Transparenz, Overlays oder Verläufen.

Welche Elemente sind von den WCAG-Kontrastanforderungen ausgenommen?

Nicht alle Elemente einer Website müssen die Kontrastanforderungen erfüllen. Die WCAG definiert explizite Ausnahmen, die in der Praxis häufig übersehen werden. Zu den ausgenommenen Elementen gehören dekorative Inhalte, inaktive Bedienelemente und Logos.

Im Einzelnen gelten folgende Ausnahmen:

Dekorativer Text: Text, der rein gestalterischen Zwecken dient und keine Information vermittelt, ist ausgenommen, sofern er im Code als dekorativ ausgezeichnet ist.
Inaktive Bedienelemente: Ausgegraute Schaltflächen oder Formularfelder, die nicht bedienbar sind, müssen die Kontrastvorgaben nicht erfüllen.
Logos und Wortmarken: Text, der Teil eines Logos oder einer Markenidentität ist, unterliegt keinen Kontrastanforderungen.
Text in Bildern: Rein dekorative Bilder, die keinen Informationsgehalt haben, sind ebenfalls ausgenommen.

Diese Ausnahmen bedeuten jedoch nicht, dass man sie großzügig anwenden sollte. Aus Sicht der Nutzerfreundlichkeit ist ein guter Kontrast grundsätzlich vorteilhaft, auch dort, wo die WCAG keine Pflicht vorschreibt. Navigationselemente, Schaltflächen und alle inhaltlich relevanten Texte fallen dagegen eindeutig unter die Anforderungen und müssen die jeweiligen Mindestwerte einhalten.

Wie wirkt sich schlechter Kontrast auf verschiedene Nutzergruppen aus?

Schlechter Farbkontrast beeinträchtigt primär Menschen mit Sehbeeinträchtigungen, trifft aber in bestimmten Situationen nahezu alle Nutzerinnen und Nutzer. Menschen mit Grauem Star, altersbedingtem Sehverlust oder Farbsehschwächen sind besonders stark betroffen, da sie auf ausreichende Helligkeitsunterschiede angewiesen sind, um Text überhaupt wahrnehmen zu können.

Folgende Gruppen sind besonders vulnerabel:

Menschen mit Farbsehschwäche: Etwa 8 % der Männer und 0,5 % der Frauen sind von einer Form der Farbenblindheit betroffen. Für sie ist der Helligkeitskontrast oft der einzige verlässliche Unterschied zwischen zwei Farben.
Ältere Nutzerinnen und Nutzer: Die Sehschärfe nimmt mit dem Alter ab, und die Fähigkeit, geringe Kontraste wahrzunehmen, verschlechtert sich deutlich. Websites, die für jüngere Augen gut lesbar wirken, können für ältere Menschen unleserlich sein.
Menschen mit Grauem Star oder Glaukom: Diese Erkrankungen reduzieren die Kontrastempfindlichkeit erheblich, selbst wenn die Sehschärfe noch relativ gut ist.
Situationsbedingte Einschränkungen: Wer in hellem Sonnenlicht auf ein Smartphone schaut oder ein Display mit schlechter Kalibrierung nutzt, erlebt ebenfalls reduzierte Kontrastwahrnehmung.

Schlechter Kontrast wirkt sich auch auf die Lesbarkeit für Screenreader-Nutzerinnen und -Nutzer aus, wenn Texte als Bilder eingebettet sind und kein ausreichend kontrastreicher Alternativtext vorhanden ist. Die Auswirkungen sind damit breiter als oft angenommen.

Wie lässt sich das Kontrastverhältnis einer Website zuverlässig prüfen?

Das Kontrastverhältnis einer Website lässt sich mit automatisierten Tools, Browser-Erweiterungen und manuellen Farbanalysewerkzeugen prüfen. Für eine systematische und skalierbare Prüfung empfiehlt sich ein automatisierter Barrierefreiheitstest, der alle Unterseiten einer Website analysiert und Kontrastprobleme nach Schweregrad priorisiert.

Automatisierte Prüfwerkzeuge

Automatisierte Accessibility-Scanner prüfen den HTML- und CSS-Code einer Seite und berechnen die Kontrastverhältnisse aller Text-Hintergrund-Kombinationen. Tools auf Basis der Open-Source-Bibliothek axe-core identifizieren dabei zuverlässig Kontrastverstöße gegen WCAG 2.1 und 2.2. Der Vorteil: Eine gesamte Website mit vielen Unterseiten lässt sich in kurzer Zeit analysieren, und die Ergebnisse sind reproduzierbar und dokumentierbar.

Manuelle Prüfung mit Farbpipetten-Tools

Für einzelne Elemente oder Grenzfälle eignen sich manuelle Kontrast-Checker, bei denen Sie die Hex-Farbwerte von Text und Hintergrund eingeben und das berechnete Verhältnis sofort ablesen. Diese Methode ist sinnvoll, wenn automatisierte Tools Schwierigkeiten haben, zum Beispiel bei Texten auf Verlaufshintergründen oder bei dynamisch geladenen Inhalten. Wichtig: Prüfen Sie immer die tatsächlich gerenderten Farben, nicht die im Design-Tool hinterlegten Werte, da CSS-Transparenz und Überlagerungen das Ergebnis verändern können.

Eine wichtige Einschränkung gilt für beide Methoden: Automatisierte Tests decken typischerweise zwischen 30 % und 50 % aller Barrierefreiheitsprobleme ab. Ein gutes Testergebnis bedeutet daher nicht, dass keine weiteren Barrieren vorhanden sind. Ergänzende manuelle Prüfungen bleiben notwendig, um ein vollständiges Bild zu erhalten.

Was passiert, wenn Kontrastanforderungen im Rahmen des BFSG nicht erfüllt werden?

Wenn Websites, die unter das Barrierefreiheitsstärkungsgesetz (BFSG) fallen, die WCAG-Kontrastanforderungen nicht erfüllen, liegt ein Verstoß gegen die gesetzlichen Anforderungen vor. Das BFSG, das die EU-Richtlinie zum European Accessibility Act in deutsches Recht umsetzt, gilt seit Juni 2025 für viele Unternehmen, die digitale Produkte und Dienstleistungen anbieten.

Zu den möglichen Konsequenzen gehören:

Marktaufsichtliche Maßnahmen: Zuständige Behörden können bei festgestellten Verstößen Maßnahmen einleiten und die Beseitigung der Barrieren verlangen.
Beschwerden über Schlichtungsstellen: Betroffene Nutzerinnen und Nutzer können sich an die zuständige Schlichtungsstelle wenden, wenn barrierefreie Zugänglichkeit nicht gewährleistet ist.
Reputationsrisiken: Öffentlich zugängliche Berichte über mangelnde Barrierefreiheit können das Ansehen eines Unternehmens beeinträchtigen.

Es ist wichtig zu betonen, dass das Nichterfüllen von Kontrastanforderungen kein isoliertes technisches Problem ist, sondern Teil eines umfassenderen Compliance-Rahmens. Unternehmen sind gut beraten, ihre Websites regelmäßig zu prüfen und identifizierte Probleme systematisch zu beheben. Eine rechtliche Beratung durch qualifizierte Fachleute bleibt dabei unersetzlich, da ein automatisierter Scan die rechtliche Bewertung im Einzelfall nicht ersetzen kann.

Wie decareto bei der Prüfung von Kontrastproblemen unterstützt

Wir bei decareto haben eine SaaS-Plattform entwickelt, die Websites automatisiert auf Barrierefreiheitsprobleme nach WCAG, BITV und BFSG scannt, darunter auch Kontrastprobleme. Konkret unterstützen wir Sie dabei:

Automatische Kontrastprüfung: Unser Scanner analysiert alle Unterseiten Ihrer Website und identifiziert Kontrastverstöße, zeigt die betroffenen Farbkombinationen mit Ist- und Sollwerten an und gibt konkrete Hinweise zur Behebung.
Priorisierung nach Schweregrad: Gefundene Probleme werden nach Kritikalität eingestuft, sodass Sie wissen, wo dringender Handlungsbedarf besteht.
Dauerhaftes Monitoring: Hunderte von Websites lassen sich kontinuierlich überwachen, und bei Änderungen erhalten Sie automatische Benachrichtigungen, bevor neue Barrieren unentdeckt bleiben.
Teilbare Reports: Barrierefreiheits-Reports können direkt mit Kunden oder Entwicklungsteams geteilt werden, auf Wunsch auch unter eigenem Logo via Whitelabel-Funktion.
Manuelle Ergänzungen möglich: Da automatisierte Tests nicht alle Barrieren erkennen, können manuell geprüfte Probleme direkt im Report erfasst und dokumentiert werden.

Bitte beachten Sie: Ein positives Scannergebnis bedeutet nicht, dass eine Website vollständig WCAG-konform ist. Unser Tool unterstützt Ihre Compliance-Arbeit und hilft dabei, typische Schwachstellen effizient zu identifizieren, ersetzt aber keine rechtliche Prüfung oder ein qualifiziertes manuelles Audit. Testen Sie unsere Plattform und erhalten Sie in wenigen Minuten einen strukturierten Überblick über die Barrierefreiheit Ihrer Website. Jetzt kostenlos starten und Ihre erste Website scannen.

Dieser Text wurde mit Hilfe von KI erstellt und könnte Fehler beinhalten.