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.
Was ist Farbkontrast und warum ist er wichtig?
Farbkontrast beschreibt den Helligkeitsunterschied zwischen Vordergrund- und Hintergrundfarbe. Ein ausreichender Kontrast ist entscheidend für die Lesbarkeit und Barrierefreiheit deiner Website. Menschen mit Sehbeeinträchtigungen, Farbsehschwächen oder auch bei schlechten Lichtverhältnissen profitieren von guten Kontrasten.
Was bedeuten die WCAG-Richtlinien AA und AAA?
Die Web Content Accessibility Guidelines (WCAG) definieren drei Konformitätsstufen: A, AA und AAA. Für normale Texte erfordert AA ein Kontrastverhältnis von mindestens 4,5:1, AAA erfordert 7:1. Für große Texte (ab 18pt oder 14pt fett) sind die Anforderungen geringer: AA erfordert 3:1, AAA erfordert 4,5:1.
Wie wird das Kontrastverhältnis berechnet?
Das Kontrastverhältnis wird nach der WCAG-Formel berechnet: (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren Farbe und L2 die der dunkleren ist. Das Ergebnis liegt zwischen 1:1 (kein Kontrast) und 21:1 (maximaler Kontrast zwischen Schwarz und Weiß).
Ab wann gilt Text als 'großer Text'?
Laut WCAG gilt Text als 'groß', wenn er mindestens 18pt (ca. 24px) oder 14pt (ca. 18,5px) fett ist. Große Texte haben geringere Kontrastanforderungen, da sie aufgrund ihrer Größe leichter zu lesen sind.
Was sind UI-Komponenten im Kontext von Barrierefreiheit?
UI-Komponenten umfassen interaktive Elemente wie Buttons, Formularfelder, Icons und Fokus-Indikatoren. Diese müssen nach WCAG 2.1 ein Kontrastverhältnis von mindestens 3:1 zu angrenzenden Farben haben, damit Benutzer sie erkennen und bedienen können.
Ist der Kontrast-Test kostenlos?
Ja, unser Kontrast-Test ist komplett kostenlos und ohne Anmeldung nutzbar. Du kannst beliebige Farbkombinationen prüfen und erhältst sofort Feedback zur WCAG-Konformität.
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