Zum Hauptinhalt springen
Kostenlose Testversion startenTermin vereinbaren
Barrierefreiheitstests · Farbe

Digitale Barrierefreiheit Color Checker

Kontrastarmer Text ist das im Web am häufigsten erkannte Problem der digitalen Barrierefreiheit. Sehen Sie genau, was WCAG 2.2 für Farbe und Kontrast verlangt - und prüfen Sie jede Seite, Domain und PDF-Datei mit den Testtools von EqualWeb.

Kostenlose Prüfung starten Kostenlose Testversion starten
Contrast-Erweiterung herunterladen

Ein Farbprüfer für digitale Barrierefreiheit prüft, ob Text- und Oberflächenfarben die Kontrastanforderungen der WCAG erfüllen - mindestens 4,5:1 für normalen Text gemäß WCAG 2.2 SC 1.4.3. Text mit geringem Kontrast ist das am häufigsten erkannte Barrierefreiheitsproblem im Web und wurde laut dem Bericht WebAIM Million 2026 auf 83,9 % der 1.000.000 meistbesuchten Startseiten gefunden. EqualWeb integriert die Prüfung von Farbkontrasten in alle seine Testwerkzeuge - den kostenlosen Accessibility Checker, den Accessibility Crawler, den Accessibility Monitor und den PDF Checker -, sodass Kontrastfehler bei jedem WCAG 2.2-Scan automatisch erkannt werden.

WCAG-Anforderungen an Farben

Was verlangt WCAG für Farbe und Kontrast?

WCAG 2.2 legt genaue, messbare Schwellenwerte für den Farbkontrast fest. Erfolgskriterium 1.4.3 Kontrast (Minimum), Stufe AA, verlangt zwischen normalem Text und seinem Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 und für großen Text von mindestens 3:1. Großer Text bedeutet mindestens 18 Punkt (etwa 24 px) in Normalschrift oder 14 Punkt (etwa 18,5 px) in Fettschrift. Dieselben Verhältnisse gelten für Bilder von Text, mit Ausnahmen für Logos und rein dekorativen Text.

Auf der strengeren Stufe AAA erhöht Erfolgskriterium 1.4.6 Kontrast (erhöht) die Anforderungen auf 7:1 für normalen Text und 4.5:1 für großen Text. Kontrast betrifft auch nicht nur Text: Erfolgskriterium 1.4.11 Nicht-Text-Kontrast auf Stufe AA verlangt mindestens 3:1 zwischen Komponenten der Benutzeroberfläche - Schaltflächen, Rändern von Formularfeldern, Fokusindikatoren - und angrenzenden Farben sowie dasselbe Verhältnis von 3:1 für die Teile von Grafiken, die zum Verständnis des Inhalts erforderlich sind.

Barrierefreiheit bei Farben geht zudem über die mathematische Berechnung des Kontrasts hinaus. Erfolgskriterium 1.4.1 Verwendung von Farbe, Level A, besagt, dass Farbe nicht das einzige visuelle Mittel zur Vermittlung von Informationen sein darf. Ein Link, der sich vom Fließtext nur durch seine Farbe unterscheidet, oder ein Formularfehler, der nur rot angezeigt wird, erfüllt dieses Kriterium nicht, selbst wenn alle Kontrastverhältnisse den Anforderungen entsprechen.

  • SC 1.4.3 Kontrast (Minimum), Level AA: mindestens 4.5:1 für normalen Text, 3:1 für großen Text
  • Großer Text: mindestens 18 pt (etwa 24 px) oder 14 pt (etwa 18,5 px) bei Fettdruck
  • SC 1.4.6 Kontrast (erhöht), Level AAA: mindestens 7:1 für normalen Text, 4,5:1 für großen Text
  • SC 1.4.11 Nicht-Text-Kontrast, Stufe AA: mindestens 3:1 für Komponenten der Benutzeroberfläche und aussagekräftige Grafiken
  • SC 1.4.1 Verwendung von Farbe, Level A: Farbe ist nie der alleinige Bedeutungsträger
Prüfen Sie Ihre Farben

Wie prüfen Sie die Farben Ihrer Website mit EqualWeb?

Sie benötigen keinen separaten Farbwähler, um eine Live-Website zu auditieren. Die Farbkontrastprüfung ist in jedes Testtool von EqualWeb als Teil eines vollständigen WCAG 2.2-Scans integriert, sodass der Kontrast zusammen mit allem anderen geprüft wird, was WCAG verlangt - auf den Seiten und in den Dokumenten, die Sie tatsächlich veröffentlichen.

Beginnen Sie mit dem kostenlosen Accessibility Checker: Geben Sie eine URL ein und erhalten Sie innerhalb von Sekunden einen Barrierefreiheits-Score von 0 bis 100, bei dem jedes kontrastarme Element gekennzeichnet, dem genauen WCAG-Erfolgskriterium wie 1.4.3 zugeordnet und nach Schweregrad priorisiert wird. Anschließend lässt sich die Testsuite auf jeden erforderlichen Umfang skalieren - eine gesamte Domain, eine Website, die sich täglich ändert, oder eine Dokumentenbibliothek - und alle Ergebnisse fließen in ein EqualWeb-Dashboard ein.

  • Accessibility Checker - kostenloser Sofortscan einer einzelnen URL; kennzeichnet Text unterhalb des erforderlichen Kontrastverhältnisses und nennt für jedes Problem das Kriterium der WCAG 2.2 sowie den Schweregrad
  • Accessibility Crawler - eine cloudbasierte Chrome-Erweiterung, die Ihre gesamte Domain in Echtzeit scannt, einschließlich passwortgeschützter Seiten, Formulare und Medien
  • Accessibility Monitor - kontinuierliche planmäßige Scans mit einer aktuellen Compliance-Bewertung von 0-100, damit neue Kontrastprobleme erkannt werden, die durch Änderungen an Design oder Inhalten entstehen; kostenloser Scan von 100 Seiten zum Einstieg
  • PDF Checker - auditiert PDF-Dokumente in 7 Barrierefreiheitskategorien; Kontrastpunkte, die die KI nicht abschließend prüfen kann, werden als Überprüfung erforderlich markiert, damit ein Mensch sie bestätigen kann
Barrierefreiheits-CheckerBarrierefreiheits-CrawlerBarrierefreiheits-MonitorPDF Checker
Beheben und anpassen

Wie beheben Sie Probleme mit dem Farbkontrast, nachdem Sie sie gefunden haben?

Jedes in einem EqualWeb-Bericht gekennzeichnete Problem enthält klare Hinweise zur erforderlichen Korrektur und das genaue Erfolgskriterium von WCAG 2.2, sodass Designer und Entwickler genau wissen, welche Farbpaare sie wie stark anpassen müssen.

Zur Behebung korrigiert die KI des Barrierefreiheits-Widgets automatisch 80+ häufige Probleme gemäß WCAG 2.2 in Echtzeit über den Browser, ohne Ihren Quellcode zu verändern. Die Automatisierung hat jedoch Grenzen: Entscheidungen zur Markenfarbpalette erfordern oft menschliches Urteilsvermögen, und einige Kriterien können nicht automatisch überprüft werden. Wenn eine vollumfängliche Compliance mit WCAG, ADA und EAA das Ziel ist, ergänzt der Managed Compliance-Service von EqualWeb zertifizierte IAAP/CPWA-Experten, die Ihre Barrierefreiheit durchgängig auditieren, verbessern, überwachen und bescheinigen.

Das Widget unterstützt Besucher auch direkt. Sein Barrierefreiheitsmenü umfasst 9 Profile und 13+ assistive Werkzeuge, darunter zwei Profile speziell für Farbe und Kontrast: Das Profil für Sehbehinderte verstärkt den Kontrast, vergrößert den Text und fügt eine Lupe hinzu, während das Profil für Farbenblinde die Farbpaletten so anpasst, dass die Bedeutung nie allein von Farbe abhängt. Diese nutzerseitigen Anpassungen ergänzen die Einhaltung der WCAG-Kontrastverhältnisse in Ihrem eigenen Design - sie ersetzen sie nicht.

Häufigste Fehler

Was sind die häufigsten Fehler bei der Barrierefreiheit von Farben?

Text mit geringem Kontrast ist der häufigste einzelne Barrierefreiheitsfehler im Web. Der Bericht WebAIM Million 2026, der die 1.000.000 meistbesuchten Startseiten analysiert, fand auf 83,9 % der Startseiten Text unterhalb der Kontrastgrenzwerte von WCAG 2 AA - gegenüber 79,1 % im Jahr 2025 und damit das am häufigsten erkannte Problem überhaupt - mit durchschnittlich 34 einzelnen Fällen von geringem Kontrast pro Seite.

Die meisten dieser Fehler entstehen durch eine Handvoll wiederkehrender Muster: hellgrauer Fließtext und Platzhaltertext auf weißem Hintergrund, Text über Fotos oder Farbverläufen, Links, die sich nur durch ihre Farbe vom umgebenden Text unterscheiden, und Fehlerzustände, die ausschließlich Rot verwenden. Da diese Probleme normalerweise mit jeweils einer Design- oder Inhaltsänderung eingeführt werden, erkennt die kontinuierliche Prüfung mit dem Accessibility Monitor sie deutlich früher als ein einmaliges Audit.

  • Hellgrauer Text und Platzhaltertext in Formularen unter dem Mindestwert von 4,5:1
  • Text über Bildern oder Verläufen ohne ausreichende Kontrastschicht
  • Links, die nur durch Farbe gekennzeichnet sind, ohne Unterstreichung oder anderen Hinweis (SC 1.4.1)
  • Formularfehler, die nur durch Rotfärbung eines Feldes angezeigt werden
  • Schaltflächen, Symbole und Fokusindikatoren unter dem Mindestverhältnis von 3:1 für Nicht-Text-Inhalte (SC 1.4.11)
FAQ

Barrierefreiheit von Farben - häufig gestellte Fragen

Wie prüfe ich, ob die Farben meiner Website barrierefrei sind?
Führen Sie mit dem Accessibility Checker von EqualWeb eine kostenlose Sofortprüfung durch: Geben Sie Ihre URL ein, und er prüft die Seite anhand von WCAG 2.2, kennzeichnet jedes Element unterhalb des erforderlichen Kontrastverhältnisses, ordnet es dem genauen Erfolgskriterium wie 1.4.3 zu und zeigt eine Bewertung von 0 bis 100 an. Für eine breitere Abdeckung prüft der Accessibility Crawler ganze Domains, und der Accessibility Monitor führt kontinuierlich neue Prüfungen durch, wenn sich Ihre Website ändert.
Welches Kontrastverhältnis verlangt WCAG?
WCAG 2.2 Level AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 zwischen normalem Text und seinem Hintergrund sowie mindestens 3:1 für großen Text, der als 18 pt oder 14 pt fett definiert ist (SC 1.4.3). Nicht-Text-Elemente wie Schaltflächen, Formularrahmen und aussagekräftige Symbole benötigen gemäß SC 1.4.11 mindestens 3:1. Beim strengeren Level AAA erhöht SC 1.4.6 die Anforderungen an Text auf 7:1 für normalen Text und 4,5:1 für großen Text.
Bietet EqualWeb eine Prüfung des Farbkontrasts?
Ja - die Kontrastprüfung ist in jedes Testtool von EqualWeb integriert und wird nicht als separate Auswahlfunktion angeboten. Der kostenlose Accessibility Checker kennzeichnet kontrastarmen Text auf jeder URL innerhalb von Sekunden, der Accessibility Crawler prüft den Kontrast in Ihrer gesamten Domain einschließlich geschützter Seiten, der Accessibility Monitor prüft ihn kontinuierlich erneut und der PDF Checker deckt Dokumente ab. Jeder Fehler wird dem genauen Kriterium der WCAG 2.2 zugeordnet und mit Hinweisen zur Behebung versehen.
Was ist der häufigste Fehler bei der Barrierefreiheit von Farben?
Text mit geringem Kontrast. Der Bericht WebAIM Million 2026 stellte auf 83,9 % der 1.000.000 meistbesuchten Startseiten Text unterhalb der Kontrastgrenzwerte von WCAG 2 AA fest; damit war dies das am häufigsten erkannte Problem der Barrierefreiheit, mit durchschnittlich 34 unterschiedlichen Vorkommen pro Seite. Typische Ursachen sind hellgrauer Text, Platzhaltertext und Text über Bildern. Ein automatisierter Scan wie der kostenlose Accessibility Checker von EqualWeb findet diese in wenigen Sekunden.
Kann das Widget von EqualWeb Probleme mit dem Farbkontrast beheben?
Teilweise. Die KI-gestützte Behebung des Barrierefreiheits-Widgets behebt automatisch 80+ häufige WCAG 2.2-Probleme über den Browser, und das Menü bietet Besuchern eigene Farboptionen: Das Profil für Sehbehinderte verstärkt den Kontrast und vergrößert den Text, und das Profil für Farbenblinde passt Farbpaletten so an, dass Bedeutung niemals allein durch Farbe vermittelt wird. Farbentscheidungen auf Markenebene und Probleme, die durch Automatisierung nicht überprüft werden können, erfordern weiterhin menschliche Arbeit, die zertifizierte IAAP/CPWA-Experten im Rahmen des Managed Compliance-Service von EqualWeb übernehmen.
Erlaubt WCAG, Links oder Fehler allein durch Farbe zu kennzeichnen?
Nein. SC 1.4.1 Verwendung von Farbe, Stufe A, verlangt, dass Farbe niemals das einzige visuelle Mittel zur Vermittlung von Informationen ist. Ein Link, der sich nur durch seine Farbe vom Fließtext unterscheidet, oder ein Formularfehler, der nur durch die Rotfärbung eines Feldes angezeigt wird, erfüllt die Anforderung nicht, selbst wenn die Kontrastverhältnisse ausreichen. Fügen Sie einen zweiten Hinweis hinzu, etwa eine Unterstreichung, ein Symbol oder eine Textbeschriftung. Die Testtools von EqualWeb kennzeichnen farbbezogene Fehler bei jedem WCAG 2.2-Scan.
Prüfen Sie Ihre Farben

Sehen Sie jedes Kontrastproblem auf Ihrer Website

Prüfen Sie jede beliebige Seite sofort und kostenlos - einschließlich Farbkontrast - oder scannen Sie Ihre gesamte Domain mit Crawler und Monitor.

Termin vereinbaren Kostenlose Testversion starten

Zuletzt aktualisiert

Mit einem Spezialisten sprechenTermin vereinbaren