Design-Tool
Kontrast-Test
Prüfe Farbkombinationen auf WCAG-Konformität und sorge für eine barrierefreie, gut lesbare Website.
Farben auswählen
Wähle Vordergrund- und Hintergrundfarbe für den Kontrasttest.
RGB: 26, 26, 26|HSL: 0°, 0 %, 10 %
RGB: 255, 255, 255|HSL: 0°, 0 %, 100 %
Kontrast-Ergebnis
17.40:1
Kontrastverhältnis
Normaler Text
< 18pt oder < 14pt fett
AAA
Großer Text
≥ 18pt oder ≥ 14pt fett
AAA
UI-Komponenten
Buttons, Icons, Fokus-Indikatoren
AA
AA = Mindestanforderung. AAA = optimale Barrierefreiheit. Für UI-Komponenten gilt in WCAG 2.1 nur die 3:1-AA-Anforderung.
Live-Vorschau
So sieht die Farbkombination in verschiedenen Textgrößen aus
Beispiel-Überschrift (24px)
Großer Text (18px): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Normaler Text (16px): Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Kleiner Text (14px): Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
WCAG 2.1 Kontrastanforderungen
Übersicht der minimalen Kontrastverhältnisse für verschiedene Elemente
| Element | AA (Minimum) | AAA (Optimal) |
|---|---|---|
| Normaler Text (< 18pt) | 4,5:1 | 7:1 |
| Großer Text (≥ 18pt oder ≥ 14pt fett) | 3:1 | 4,5:1 |
| UI-Komponenten & Grafiken | 3:1 | – |
| Fokus-Indikatoren | 3:1 | – |
Häufig gestellte Fragen
Alles über Farbkontraste und WCAG-Richtlinien.
Changelog
Die neuesten Updates und Verbesserungen unseres Kontrast-Test
v1.0.08. Dezember 2025
Offizieller Launch
- • Echtzeit-Kontrastberechnung nach WCAG 2.1
- • Prüfung für normale und große Texte
- • AA und AAA Konformitäts-Anzeige
- • Hex-, RGB- und HSL-Farbformate
- • Live-Vorschau mit Beispieltexten
- • Color-Picker für einfache Farbauswahl