Farbkontrast und Textlesbarkeit nach WCAG-Standards prüfen

Lesbarkeit hängt vom Helligkeitsunterschied zwischen Text- und Hintergrundfarbe ab. Je größer dieser Unterschied, desto leichter ist der Text zu lesen. Zu geringer Kontrast erschwert das Lesen - besonders für Menschen mit Sehbeeinträchtigungen, ältere Personen oder bei schwierigen Lichtverhältnissen.

Laut der Weltgesundheitsorganisation (WHO) haben weltweit etwa 2,2 Milliarden Menschen eine Form von Sehbeeinträchtigung.

Das Kontrastverhältnis wird nach der WCAG 2.1-Formel berechnet. Es beschreibt den Helligkeitsunterschied zwischen zwei Farben auf einer Skala von 1:1 (kein Unterschied) bis 21:1 (maximaler Unterschied).

Das Tool zeigt das Kontrastverhältnis und die Bewertung für drei Inhaltstypen:

• Normaler Text - Standardtext auf der Seite. Minimum: 4,5:1 (AA) oder 7:1 (AAA).
• Großer Text - Text ab 18pt (24px) oder fetter Text ab 14pt (18,5px), etwa große Überschriften. Minimum: 3:1 (AA) oder 4,5:1 (AAA).
• UI-Komponenten und Symbole - Schaltflächen, Formularfelder, Icons. Minimum: 3:1 (AA).

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 – etwa große Überschriften.
• 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 die Stufe, auf die sich viele Barrierefreiheitsvorgaben öffentlicher Einrichtungen beziehen, und damit ein sinnvoller Ausgangspunkt. 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 Schaltfläche Anpassen die nächstliegende Textfarbe vor, die die Anforderung erfüllt. Das Tool ändert dabei nur die Helligkeit und behält Farbton und Sättigung bei.

Unter Anpassungsziel wählen Sie eines von fünf Zielen: normaler Text AA (4,5:1) oder AAA (7:1), großer Text AA (3:1) oder AAA (4,5:1) und Symbol AA (3:1). Den Vorschlag übernehmen Sie mit Festlegen oder kopieren ihn mit Kopieren.

Fehlermeldung zum Farbformat

Überprüfen Sie das Farbformat. Ein HEX-Code hat 3, 4, 6 oder 8 Zeichen, mit oder ohne # (z. B. #fff oder 1B2632). RGB- und HSL-Werte stehen in rgb() oder hsl(), getrennt durch Kommas oder Leerzeichen. CSS-Farbnamen wie navy oder rebeccapurple funktionieren ebenfalls.

Die Schaltfläche Anpassen 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.

Eine Rot-Grün-Sehschwäche betrifft bis zu 8 % der Männer und 0,5 % der Frauen nordeuropäischer Herkunft. Bei der Deuteranomalie sind rote und grüne Töne schwer zu unterscheiden.

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.