Start
Tools
Kontrast-Checker (WCAG)

Kostenloses Tool · Farben & Design

Kontrast-Checker (WCAG)

Prüfe ob deine Farbkombinationen den WCAG-Richtlinien für Barrierefreiheit entsprechen.

Läuft komplett in Ihrem Browser. Ihre Eingaben werden nicht an einen Server gesendet.

Beispieltext

So sieht deine Farbkombination aus

Textfarbe (Vordergrund)

Hintergrundfarbe

21:1

Kontrastverhältnis

WCAG AA (Normal) ✓ Bestanden

WCAG AA (Groß) ✓ Bestanden

WCAG AAA (Normal) ✓ Bestanden

WCAG AAA (Groß) ✓ Bestanden

Barrierefreiheit deiner Farben prüfen

Guter Farbkontrast ist wichtig für die Lesbarkeit und Barrierefreiheit. Der Checker prüft deine Farbkombinationen nach den WCAG-Richtlinien – für AA und AAA Konformität.

Was sind die WCAG-Richtlinien?

Die Web Content Accessibility Guidelines (WCAG) definieren Standards für barrierefreie Websites. Für Farben ist das Kontrastverhältnis zwischen Text und Hintergrund entscheidend.

WCAG Level erklärt

Level AA: Mindestkontast 4.5:1 für normalen Text, 3:1 für großen Text. Level AAA: Kontrast 7:1 für normalen Text, 4.5:1 für großen Text. AA ist der empfohlene Mindeststandard.

Warum Barrierefreiheit wichtig ist

8 % der Männer haben eine Farbsehschwäche. Guter Kontrast hilft allen bei schlechten Lichtverhältnissen. In vielen Ländern ist Barrierefreiheit für bestimmte Websites Pflicht.

BFSG 2025 – was du wissen musst

Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele digitale Produkte und Dienstleistungen. Online-Shops und bestimmte Dienstleistungsanbieter müssen ihre Websites barrierefrei gestalten. Farbkontraste nach WCAG AA sind dabei eine der Grundanforderungen. Erste Abmahnwellen wurden bereits beobachtet.

Schnell-Check: Diese Kontraste prüfen

Prüfe mindestens: Fließtext gegen Hintergrund (braucht 4.5:1), Navigation und Links (4.5:1), Buttons und CTAs (3:1 für großen Text), Placeholder-Texte in Formularfeldern (oft zu hell!), und Footer-Texte (häufig zu geringer Kontrast). Grau auf Weiß ist der häufigste Kontrastfehler im Webdesign.

Fragen & Antworten Häufig gestellte Fragen.

Welches Kontrastverhältnis brauche ich?

Für WCAG AA: Mindestens 4.5:1 für normalen Text, 3:1 für großen Text (ab 18pt oder 14pt fett). Für AAA: 7:1 bzw. 4.5:1.

Was gilt als "großer Text"?

Nach WCAG: Text ab 18 Punkt (24px) oder fetter Text ab 14 Punkt (18.5px). Für großen Text gelten niedrigere Kontrastanforderungen.

Ist Barrierefreiheit Pflicht?

In der EU müssen öffentliche Stellen barrierefrei sein (BFSG). Ab 2025 gilt das EU-Barrierefreiheitsgesetz auch für viele private Unternehmen.

Was tun bei zu geringem Kontrast?

Dunkle die dunklere Farbe ab oder helle die hellere auf. Oft reicht eine kleine Anpassung. Das Tool zeigt dir, welches Verhältnis du hast.