Farben Kontrast Check - Farben und Webdesign auf Barrierefreiheit prüfen
Optimiere Deine Farben auf Barrierefreiheit nach WCAG 2.1 & 2.2 (AA/AAA).
Teste Farbkontrastverhältnisse nach den WCAG 2.1- und 2.2-Richtlinien. Du kannst einzelne Farbpaare prüfen oder ganze Seiten scannen, um Kontrastprobleme schnell zu finden.
Farbauswahl
Vordergrundfarbe
Hintergrundfarbe
WCAG-Einstellungen
Ergebnisse
Normaler Text (< 18px)
Bestanden
Erforderlich: 4.5:1
Großer Text (≥ 18px)
Bestanden
Erforderlich: 3:1
Kontrastverhältnis
21.00:1
WCAG AA
Konform
Vorschau
Kontrast geprüft – Deine Besucher werden es Dir danken. Kontrast-Check erfolgreich abgeschlossen.
WCAG-Kontrastanforderungen verstehen
Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastverhältnisse, um sicherzustellen, dass Text für Menschen mit Sehbehinderungen lesbar ist.
WCAG AA (Minimum)
- • Normaler Text: 4,5:1
- • Großer Text (18px+ oder 14px+ fett): 3:1
WCAG AAA (Erweitert)
- • Normaler Text: 7:1
- • Großer Text (18px+ oder 14px+ fett): 4,5:1
WCAG-Versionen
WCAG 2.1 und 2.2 haben dieselben Kontrastanforderungen (Erfolgskriterien 1.4.3 und 1.4.6). Wähle die passende Version für Deine Organisation aus.
Häufig gestellte Fragen
Barrierefreies Webdesign stellt sicher, dass Websites von allen Menschen genutzt werden können – auch von Personen mit Sehschwächen. Ab Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) viele Unternehmen in Deutschland dazu, ihre digitalen Produkte inklusiv zu gestalten. Unser Tool hilft Dir, die gesetzlichen Anforderungen ganz einfach zu überprüfen.
Es gibt keine verbotenen Farben, aber das Verhältnis zwischen Vorder- und Hintergrund ist entscheidend. Barrierefreie Farben müssen laut WCAG 2.1 (Web Content Accessibility Guidelines) einen Mindestkontrast erfüllen: 3:1 für große Texte und Grafiken (AA-Standard) und 4,5:1 für normalen Fließtext (AA-Standard).
Ein Contrast Checker WCAG berechnet die Luminanz-Differenz zwischen zwei Farben. Unser Tool analysiert Deine Hex-Codes automatisch und zeigt Dir sofort an, ob Dein Design die Standards (WCAG AA/AAA) erfüllt. Das hilft Dir dabei, die Usability Deiner Seite zu steigern und Abmahnungen zu vermeiden.
Ein hoher Kontrast in der Barrierefreiheit hilft nicht nur Menschen mit Sehbehinderungen, sondern verbessert die Lesbarkeit für alle Nutzer – etwa bei Sonnenlicht auf dem Smartphone. Guter Kontrast senkt die Absprungrate (Bounce Rate) und ist ein direkter Ranking-Faktor für eine gute User Experience (UX).