Farbkontrast-Prüfer

Kontrastverhältnis zweier Farben nach WCAG berechnen: AA und AAA für normalen und großen Text sowie UI-Elemente prüfen.

Der Farbkontrast-Prüfer berechnet das Kontrastverhältnis zweier Farben nach WCAG 2.2 und zeigt, ob Text- und Hintergrundfarbe die Stufen AA und AAA für normalen und großen Text sowie für UI-Komponenten erfüllen. Dazu gibt es eine Live-Vorschau und Vorschläge, wie du eine Farbe minimal anpasst, um das Ziel zu erreichen.

Textfarbe (Vordergrund)

Hintergrundfarbe

Kontrastverhältnis

14,67 : 1

AA – normaler Text (4,5 : 1) Bestanden
AA – große Schrift (3 : 1) Bestanden
AAA – normaler Text (7 : 1) Bestanden
AAA – große Schrift (4,5 : 1) Bestanden
UI-Komponenten und Grafiken (3 : 1) Bestanden

Normaler Text mit 16 px: Die schnelle braune Füchsin springt über den faulen Hund.

Große Schrift, 24 px fett

UI-Element

Was ist das Kontrastverhältnis?

Das Kontrastverhältnis vergleicht die Helligkeit von Text und Hintergrund. Es reicht von 1 : 1 (gleiche Farbe) bis 21 : 1 (Schwarz auf Weiß). Die Web Content Accessibility Guidelines (WCAG) legen Mindestwerte fest, damit Inhalte auch bei schwächerem Sehvermögen lesbar bleiben.

Grenzwerte nach WCAG 2.2

Element	AA	AAA
Normaler Text	4,5 : 1	7 : 1
Große Schrift (ab 24 px oder 18,7 px fett)	3 : 1	4,5 : 1
UI-Komponenten und Grafiken	3 : 1	–

So gehst du vor

Textfarbe und Hintergrund eintragen.
Prüfen, welche Stufen bestanden sind.
Bei Bedarf Vorschlag übernehmen. Ganze Paletten prüfst du in der barrierefreien Farbpalette, wie Farben bei Sehschwäche wirken im Farbenblindheit-Simulator.

Beispiel

Grauer Text #94a3b8 auf Weiß erreicht nur etwa 2,6 : 1 und besteht keine Stufe. Mit #64748b sind es rund 4,8 : 1, damit besteht normaler Text die Stufe AA. Farben in andere Formate wandelt der Farbumrechner um.

Häufige Fragen

Welches Kontrastverhältnis braucht normaler Text?

Nach WCAG Stufe AA mindestens 4,5 : 1, für Stufe AAA 7 : 1. Große Schrift darf mit 3 : 1 (AA) bzw. 4,5 : 1 (AAA) etwas niedriger liegen.

Was gilt als große Schrift?

Mindestens 24 px in normaler Stärke (18 pt) oder mindestens etwa 18,7 px (14 pt) in fetter Schrift. Alles darunter zählt als normaler Text.

Gilt der Kontrast auch für Buttons und Icons?

Ja. Das Erfolgskriterium 1.4.11 verlangt mindestens 3 : 1 für Bedienelemente und aussagekräftige Grafiken gegenüber ihrem Umfeld, etwa Rahmen von Eingabefeldern oder Icons ohne Text.

Wie wird das Kontrastverhältnis berechnet?

Aus der relativen Helligkeit beider Farben: (hellere + 0,05) geteilt durch (dunklere + 0,05). Schwarz auf Weiß ergibt 21 : 1, gleiche Farben ergeben 1 : 1. Das Ergebnis wird nicht aufgerundet, 4,49 besteht also die 4,5 nicht.

Reicht dieses Tool für die Barrierefreiheitsprüfung?

Es prüft nur den Farbkontrast. Für Barrierefreiheit gehören weitere Punkte dazu, etwa Tastaturbedienung, Alternativtexte und Struktur. Kontrast spielt auch beim Barrierefreiheitsstärkungsgesetz (BFSG) eine Rolle. Das Tool ersetzt keine vollständige Prüfung und keine Rechtsberatung.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.