Farbkontrast und Textlesbarkeit nach WCAG-Standards prüfen

Das Tool zeigt das Kontrastverhältnis auf einer Skala von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast – Schwarz auf Weiß). Das Ergebnis wird mit den im WCAG-Standard definierten Schwellenwerten verglichen:

• Normaler Text – erfordert mindestens 4,5:1 für Level AA (Mindeststandard) oder 7:1 für Level AAA (erweiterter Standard). Gilt für Text unter 18pt (24px) oder unter 14pt (18,5px) fett.
• Großer / fetter Text – erfordert mindestens 3:1 für Level AA oder 4,5:1 für Level AAA. Gilt für Text ab 18pt (24px) oder ab 14pt (18,5px) fett – Überschriften, Buttons, Hervorhebungen.
• Symbole und UI-Elemente – erfordern mindestens 3:1 für Level AA. Gilt für Icons, Buttons, Formularfelder und andere Oberflächenelemente, die Informationen vermitteln.

Level AA ist das Minimum, das von den Barrierefreiheitsvorschriften in vielen Ländern verlangt wird, einschließlich der EU-Richtlinie über die Barrierefreiheit von Websites. Level AAA bietet bessere Lesbarkeit, ist aber nicht immer für alle Elemente praktisch umsetzbar.

Wenn die gewählte Farbkombination den Kontrastschwellenwert nicht erfüllt, schlägt die Match-Funktion automatisch die nächstliegende Textfarbe vor, die die Anforderung erfüllt. Die vorgeschlagene Farbe bleibt so nah wie möglich am Original.

Sie können den Schwellenwert zwischen AA (4,5:1) und AAA (7:1) umschalten, und die Match-Funktion passt die Vorschläge entsprechend an. Dies erleichtert die Suche nach barrierefreien Farbkombinationen, ohne den gewünschten Farbton komplett aufgeben zu müssen.

Fehlermeldung zum Farbformat

Überprüfen Sie das Farbformat. Ein HEX-Code muss mit # beginnen und 3 oder 6 Zeichen enthalten (z. B. #fff oder #ffffff). Beim RGB-Format müssen die Werte durch Kommas getrennt sein und im Bereich 0–255 liegen.

Die Match-Funktion findet keine passende Farbe

Wenn Hintergrund und Text eine ähnliche Helligkeit im gleichen Farbton haben, kann der Algorithmus möglicherweise keine Variante finden, die die Anforderungen erfüllt, ohne den Farbton zu ändern. In diesem Fall sollten Sie die Hintergrundfarbe ändern oder eine ganz andere Textfarbe wählen.

Farbe im Farbwähler stimmt nicht mit dem eingegebenen Code überein

Der Farbwähler des Browsers unterstützt nur das HEX-Format ohne Transparenz. Wenn Sie eine Farbe im RGBA- oder HSLA-Format mit Transparenz eingeben, zeigt der Farbwähler nur den Farbanteil (ohne Alpha). Die Kontrastberechnung berücksichtigt die Transparenz weiterhin.

Etwa 8 % der Männer und 0,5 % der Frauen haben eine Farbsehschwäche. Die häufigste Form ist die Rot-Grün-Schwäche (Deuteranomalie), bei der rote und grüne Töne schwer zu unterscheiden sind.

Der WCAG-Kontrasttest prüft nur den Helligkeitsunterschied, nicht die Farbunterscheidung. Beachten Sie daher zusätzlich: Verwenden Sie nie nur Farbe allein, um Informationen zu vermitteln (z. B. "rote Felder sind Pflichtfelder"). Ergänzen Sie Farbe stets durch Beschriftungen, Muster oder Symbole.

In Deutschland ist Farbkontrast nicht nur eine Empfehlung - es ist eine gesetzliche Pflicht, die sich ab 2025 deutlich verschärft.

BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung)

Verpflichtet alle Bundesbehörden zur Einhaltung von WCAG 2.1 Level AA. Das bedeutet ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text und UI-Elemente. Die Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik prüft die Einhaltung.

BFSG (Barrierefreiheitsstärkungsgesetz)

Ab dem 28. Juni 2025 müssen auch private Unternehmen digitale Produkte und Dienstleistungen barrierefrei gestalten. Das BFSG setzt den Europäischen Barrierefreiheitsakt (EAA) in deutsches Recht um. Betroffen sind Webshops, Banking-Apps, E-Books, Ticketsysteme und Selbstbedienungsterminals. Verstöße können Bußgelder nach sich ziehen.

BGG (Behindertengleichstellungsgesetz)

Sichert die digitale Barrierefreiheit für Menschen mit Behinderungen im öffentlichen Sektor. Zusammen mit der BITV bildet es die Grundlage der deutschen Barrierefreiheitsanforderungen.

DACH-Region: Österreich und Schweiz

In Österreich gilt das Web-Zugänglichkeits-Gesetz (WZG), das ebenfalls WCAG 2.1 AA vorschreibt. Die Schweiz setzt auf die eCH-Standards und das Behindertengleichstellungsgesetz (BehiG). Für Unternehmen im DACH-Raum bedeutet dies: WCAG 2.1 AA ist in allen drei Ländern der verbindliche Mindeststandard.