Kontrastprüfer

Prüfe, ob zwei Farben den WCAG-Kontrast erfüllen.

🔒 Diese Datei wird in deinem Browser verarbeitet. Sie wird nie hochgeladen.

…

Wofür es gut ist

Der Kontrast zwischen Text und Hintergrund entscheidet, ob er sich bequem lesen lässt. Gemessen wird er als Verhältnis der Helligkeiten beider Farben, von 1:1 bei identischen Farben bis 21:1 bei reinem Schwarz auf reinem Weiß.

Die WCAG-Richtlinien, die internationale Referenz für Barrierefreiheit im Web, legen die Schwellen fest. Für Text in normaler Größe sind 4.5:1 das Minimum der Stufe AA, die üblicherweise verlangt wird und die die Barrierefreiheitsgesetzgebung vieler Länder für öffentliche Websites vorschreibt. Stufe AAA verlangt strenger 7:1.

Das ist nicht bloß Formalität. Das hellgraue Grau auf Weiß, das auf dem Bildschirm des Gestalters so elegant wirkt, wird in der Sonne unlesbar, auf einem dunkel gestellten Handy oder für alle mit müden Augen, und das sind weit mehr Menschen, als man annimmt.

So funktioniert's

Gib die Textfarbe und die Hintergrundfarbe an, die du prüfen möchtest.
Das Werkzeug berechnet sofort das Kontrastverhältnis zwischen beiden.
Prüfe, ob es die Stufen AA und AAA der WCAG-Barrierefreiheitsnormen erfüllt.

Wann man es einsetzt

Einen Webentwurf prüfen

Text- und Hintergrundpaare vor der Umsetzung zu prüfen erspart es, die Palette später neu zu bauen.

Vorgaben erfüllen

Websites der öffentlichen Hand und viele Ausschreibungen verlangen Stufe AA. Die Prüfung belegt die Einhaltung.

Text auf Bildern

Eine Überschrift auf einem Foto muss gegen dessen hellste Stelle geprüft werden.

Praktische Tipps

Große, fette Schrift hat mit 3:1 eine mildere Schwelle, die man aber nicht ausreizen sollte.
Grauer Sekundärtext ist der häufigste Fehler: Er rutscht oft unbemerkt unter 4.5:1.
Prüfe auch Link- und Schaltflächenzustände, nicht nur den Fließtext.
Reicht ein Paar nicht, genügt meist, den Text abzudunkeln, statt den Hintergrund zu ändern.

Häufige Fragen

Welches Verhältnis brauche ich für Barrierefreiheit?

Für normalen Text erfüllt mindestens 4.5:1 die Stufe AA (der übliche Standard) und 7:1 die strengere Stufe AAA.

Warum ist Farbkontrast wichtig?

Geringer Kontrast erschwert Menschen mit Sehschwäche das Lesen und macht deine Website für alle weniger zugänglich und anstrengender – besonders im Freien oder auf schlechten Bildschirmen.