Kontrast-Prüfer (WCAG 2.1)
Prüfen Sie das Kontrastverhältnis zwischen Text- und Hintergrundfarbe nach WCAG 2.1. Zeigt Bewertung für AA und AAA sowie Bestehen/Nichtbestehen.
- Kostenlos, ohne Anmeldung
- Keine Daten gespeichert
- Geprüft 2026-01-15
Ihre Angaben
Ergebnisse
- Aa normal
- ✓ Pass
- Aa large
- ✓ Pass
- Aaa normal
- ✓ Pass
- Aaa large
- ✓ Pass
- Ui components
- ✓ Pass
4.5:1
3:1
7:1
4.5:1
3:1
- Fails wcag
- AA Large text
- AA
- AAA
Preview
Preview text
Preview small
CSS
:root {
--text: #0D1420;
--background: #FFFFFF;
}Suggestions
| Option | Colour | Contrast ratio |
|---|---|---|
| #000000 On background | #FFFFFF | 21,00:1 |
| #FFFFFF On background | #FFFFFF | 1,00:1 |
Contrast note
Über den Kontrast-Prüfer
Testen Sie, ob Ihre Farbkombination aus Text und Hintergrund die Anforderungen der Web Content Accessibility Guidelines (WCAG 2.1) erfüllt. Der Prüfer berechnet das Kontrastverhältnis und zeigt, ob die Stufen AA (mindestens 4,5:1 für normalen Text, 3:1 für großen Text) und AAA (7:1 bzw. 4,5:1) bestanden werden.
Barrierefreies Webdesign ist in Deutschland durch die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) für öffentliche Stellen verpflichtend und wird seit dem Barrierefreiheitsstärkungsgesetz (BFSG, ab Juni 2025) auch für private Unternehmen relevant. Prüfen Sie Ihre Farbkombinationen frühzeitig im Designprozess.
Geben Sie Vordergrund- und Hintergrundfarbe als HEX, RGB oder HSL ein. Der Prüfer zeigt eine Live-Vorschau des Textes auf dem Hintergrund und kennzeichnet deutlich, welche WCAG-Level bestanden werden.
So verwenden Sie den Kontrast-Prüfer
- Geben Sie die Textfarbe (Vordergrund) ein.
- Geben Sie die Hintergrundfarbe ein.
- Optional: Stellen Sie Schriftgröße und Schriftstärke ein.
- Prüfen Sie das Kontrastverhältnis und die WCAG-Bewertung.
- Passen Sie die Farben an, bis mindestens WCAG AA erreicht ist.
Häufig gestellte Fragen
Welches Kontrastverhältnis brauche ich?
WCAG AA: mindestens 4,5:1 für normalen Text (<18px) und 3:1 für großen Text (≥18px bold oder ≥24px). WCAG AAA: 7:1 bzw. 4,5:1. Für die meisten Websites ist AA der Mindeststandard.
Was gilt als „großer Text"?
Text ab 18pt (24px) oder fetter Text ab 14pt (ca. 18,67px). Großer Text darf ein niedrigeres Kontrastverhältnis haben, weil er leichter lesbar ist.
Muss ich WCAG in Deutschland einhalten?
Öffentliche Stellen sind durch die BITV 2.0 verpflichtet. Ab dem 28. Juni 2025 müssen durch das BFSG auch viele private Unternehmen digitale Barrierefreiheit gewährleisten. WCAG 2.1 Level AA ist der Referenzstandard.
Was bedeutet ein Verhältnis von 1:1?
Kein Kontrast — Vordergrund und Hintergrund sind identisch. Das Maximum ist 21:1 (Schwarz auf Weiß). Je höher das Verhältnis, desto besser die Lesbarkeit.
Quellen
Die Ergebnisse sind Schätzungen und dienen nur zur Orientierung. Bestätigen Sie wichtige Angaben immer mit der offiziellen Quelle oder einem qualifizierten Fachmann.