Farbkontrast-Prüfer (WCAG)

Prüfe den Kontrast zwischen Text- und Hintergrundfarbe nach den WCAG-Regeln AA und AAA und erhalte mit einem Klick die nächstliegende korrigierte Farbe.

Kostenlos
Ohne Anmeldung
Kein Datei-Upload
Windows, Mac, Android, iPhone

Werkzeug wird geladen…

Über dieses Werkzeug

Prüfe, ob ein Text auf seinem Hintergrund nach den Barrierefreiheitsregeln WCAG 2 gut lesbar ist: Kontrastverhältnis, Kriterien AA und AAA für Fließtext, großen Text und Bedienelemente, echte Vorschau. Ist der Kontrast zu gering, schlägt das Werkzeug die nächstliegende Text- oder Hintergrundfarbe vor, die besteht.

Wann es hilft

Eine Markenpalette prüfen

Prüfe vor der Festlegung der Farben einer Website jedes Text-Hintergrund-Paar: Trendige Hellgrautöne fallen oft durch.

Ein Barrierefreiheits-Audit umsetzen

Ein WCAG-Audit bemängelt zu geringen Kontrast: Die automatische Korrektur liefert den bestandenen Farbton, der dem Original am nächsten ist.

Buttons und Icons

Feldränder, Icons und Buttons müssen gegenüber dem Hintergrund 3:1 erreichen, um wahrgenommen zu werden.

So funktioniert's

Wähle Textfarbe und Hintergrundfarbe.
Lies das Kontrastverhältnis und die erfüllten WCAG-Kriterien ab.
Übernimm eine korrigierte Farbe, wenn der Kontrast zu gering ist.

So funktioniert es

Das Kontrastverhältnis nutzt die WCAG-Formel: relative Leuchtdichte jeder Farbe (nach Umrechnung von sRGB in lineares Licht), dann (L1 + 0,05) / (L2 + 0,05). Es reicht von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß).

Die Korrektur durchläuft die Helligkeit der Farbe in Richtung heller und dunkler und behält den Wert, der die Schwelle mit der kleinsten Änderung erreicht: Die Farbe bleibt erkennbar.

Tipps für beste Ergebnisse

Ziele bei jedem Text unter 24 px auf 4,5:1, auch bei rechtlichen Hinweisen.
Text auf einem Foto muss gegen die hellste Stelle des Fotos geprüft werden.
Kontrast allein reicht nicht: Vermittle Informationen nie nur über Farbe.
Teste deine Farben auch mit dem Farbenblindheit-Simulator.

Häufige Probleme und Lösungen

Es wird keine korrigierte Farbe vorgeschlagen

Selbst Schwarz oder Weiß erreicht auf diesem Hintergrund die Schwelle nicht (etwa bei mittlerem Grau). Ändere die Hintergrundfarbe.

Das Ergebnis weicht von einem anderen Tool ab

Die Rundung variiert leicht; ein Verhältnis knapp unter der Schwelle (4,49) fällt überall durch.

Mein Text nutzt eine transparente Farbe

Die Berechnung nutzt deckende Farben: Gib die tatsächlich sichtbare Farbe an (mit dem Hintergrund gemischt).

Häufige Fragen

Wie viel Kontrast ist nötig?

WCAG AA verlangt 4,5:1 für Fließtext und 3:1 für großen Text und Bedienelemente. AAA verlangt 7:1 und 4,5:1.

Was gilt als großer Text?

Mindestens 24 px (18 pt) oder 18,5 px (14 pt) fett. Darunter gilt der Schwellenwert für Fließtext.

Wie werden die korrigierten Farben berechnet?

Das Werkzeug behält Farbton und Sättigung deiner Farbe und passt nur die Helligkeit an – so wenig wie möglich, bis die Schwelle AA oder AAA erreicht ist.

Ist Kontrast Pflicht?

Für öffentliche Websites wird in vielen Ländern Stufe AA erwartet (in Deutschland etwa durch BITV und Barrierefreiheitsstärkungsgesetz). Vor allem geht es um Lesbarkeit für alle, in der Sonne oder mit müden Augen.

Immer noch ein Problem?

Frag im Forum: Kategorie, Werkzeug, Datenblatt deines Geräts und Testergebnis werden automatisch ausgefüllt.