Contrast Checker: Farbkontrast nach WCAG prüfen

Der Contrast Checker ist kostenlos und ohne Anmeldung nutzbar. Das Kontrastverhältnis wird direkt in deinem Browser berechnet, deine Farben werden nicht an einen Server gesendet.

Das Tool berechnet nach der WCAG-2.x-Formel zuerst die relative Leuchtdichte (L) beider Farben und teilt dann L der helleren Farbe plus 0.05 durch L der dunkleren Farbe plus 0.05. Das Ergebnis liegt zwischen 1:1 (identische Farben) und 21:1 (Schwarz auf Weiß), die Reihenfolge der Farben spielt keine Rolle. Je höher der Wert, desto leichter lässt sich Text vor dem Hintergrund lesen.

Für Stufe AA braucht normaler Text mindestens 4.5:1 und großer Text 3:1. Die strengere Stufe AAA verlangt 7:1 für normalen und 4.5:1 für großen Text. UI-Komponenten und Grafiken wie Rahmen von Eingabefeldern oder Icons brauchen 3:1. Auf AA beziehen sich die meisten gesetzlichen Vorgaben, AAA ist eine freiwillige, strengere Stufe.

Als groß gilt Text ab 18pt (24px), oder ab 14pt (18.66px), wenn er zusätzlich fett ist. Für großen Text gelten niedrigere Mindestkontraste (3:1 statt 4.5:1 für AA), weil größere Schrift auch bei geringerem Kontrast noch gut lesbar bleibt.

Hex-Werte mit oder ohne #, drei- oder sechsstellig (#fff oder #ffffff), rgb() und rgba() sowie einfache Werte wie 34, 34, 34. Zusätzlich kannst du jede Farbe im Farbwähler auswählen. Bei rgba() wird der Alpha-Wert ignoriert, das Tool rechnet mit der deckenden Farbe. Eine ungültige Eingabe markiert das Feld, bis der Wert wieder passt.

Erreicht deine Kombination AA für normalen Text (4.5:1) nicht, schlägt das Tool auf Klick die nächste Farbe vor, die diesen Wert schafft. Dafür ändert es nur die Helligkeit der Text- oder der Hintergrundfarbe, je nachdem, welche weniger Anpassung braucht. Mit „Übernehmen“ setzt du den Vorschlag ein. Beispiel: #777777 auf #ffffff kommt auf 4.48:1, der Vorschlag #767676 erreicht 4.54:1.

Ja. Der Contrast Checker schreibt die aktuelle Vorder- und Hintergrundfarbe automatisch in die URL. Kopierst du den Link aus der Adresszeile, öffnet er dieselbe Kombination. Über die Links unter der Vorschau gibst du die Vordergrundfarbe außerdem an den Farbenblindheits-Simulator oder den Farbschema-Generator weiter.

Gesetze wie der European Accessibility Act (EAA) mit seinen nationalen Umsetzungen oder in den USA der ADA verpflichten viele Websites und Apps zu einem Mindestmaß an Barrierefreiheit und verweisen dabei in der Regel auf die WCAG. Ausreichender Textkontrast ist einer der am häufigsten geprüften Punkte. Dieses Tool ersetzt keine Rechtsberatung, hilft dir aber, die technischen WCAG-Kontrastwerte selbst zu prüfen.