Kontrastprüfer – WCAG-Kontrastverhältnis

Farbkontrast für Barrierefreiheit prüfen

Farbkontrast ist entscheidend für die Lesbarkeit. Wenn Vordergrundtext nicht genug Kontrast zum Hintergrund hat, wird er schwer lesbar – besonders für Menschen mit Sehbeeinträchtigungen oder Farbfehlsichtigkeit.

Dieser Kontrastprüfer berechnet das Kontrastverhältnis zwischen zwei beliebigen Farben und bewertet es anhand der WCAG-2.1-Erfolgskriterien. Geben Sie Farben im HEX-, RGB- oder HSL-Format ein und erhalten Sie sofort Ergebnisse.

WCAG-Kontraststufen verstehen

Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastverhältnisse für die Lesbarkeit von Text. Es gibt zwei Konformitätsstufen:

• WCAG AA Normaler Text — erfordert ein Kontrastverhältnis von mindestens 4,5:1
• WCAG AA Großer Text — erfordert ein Kontrastverhältnis von mindestens 3:1 (großer Text ist 18pt+ oder 14pt+ fett)
• WCAG AAA Normaler Text — erfordert ein Kontrastverhältnis von mindestens 7:1
• WCAG AAA Großer Text — erfordert ein Kontrastverhältnis von mindestens 4,5:1

AA ist die Standardstufe, die die meisten Websites und Apps anstreben. AAA ist die erweiterte Stufe, empfohlen für maximale Lesbarkeit.

So verwenden Sie den Kontrastprüfer

1. Geben Sie eine Vordergrundfarbe (Textfarbe) ein – HEX, RGB oder HSL
2. Geben Sie eine Hintergrundfarbe in einem unterstützten Format ein
3. Sehen Sie das Kontrastverhältnis und eine Live-Vorschau des Texts auf dem Hintergrund
4. Prüfen Sie die Bestanden/Nicht-bestanden-Ergebnisse für WCAG AA und AAA
5. Nutzen Sie die Tauschtaste, um Vordergrund- und Hintergrundfarbe schnell zu wechseln

Wann den Farbkontrast prüfen

• Bei der Auswahl von Text- und Hintergrundfarben für eine Website oder App
• Zur Überprüfung, ob ein Design-System Barrierefreiheitsanforderungen erfüllt
• Beim Testen von Button-, Link- oder Icon-Farben gegen ihre Hintergründe
• Bei der Prüfung von Farbkombinationen im Dark Mode
• Zur Erfüllung gesetzlicher Barrierefreiheitsstandards (ADA, EAA, Section 508)

Präzise, sofort und kostenlos

Dieses Tool berechnet das WCAG-2.1-Kontrastverhältnis mit der Standard-Formel für relative Luminanz. Ergebnisse werden sofort in Ihrem Browser berechnet – es werden keine Daten an einen Server gesendet.

Sie müssen zuerst eine Farbe finden oder umrechnen? Nutzen Sie den Farbwähler, um Farben aus einem Bild zu extrahieren, oder den Farbumrechner, um zwischen HEX, RGB und HSL zu wechseln.

Häufig gestellte Fragen

Was ist ein gutes Kontrastverhältnis für Text?

Für normalen Fließtext ist ein Kontrastverhältnis von mindestens 4,5:1 erforderlich, um WCAG AA zu erfüllen. Für großen Text (18pt oder 14pt fett und größer) beträgt das Minimum 3:1. Für das höchste Barrierefreiheitsniveau (WCAG AAA) benötigt normaler Text mindestens 7:1.

Was ist der Unterschied zwischen WCAG AA und AAA?

AA ist die Standard-Konformitätsstufe, die die meisten Websites und Apps erfüllen sollten. AAA ist die erweiterte Stufe mit strengeren Kontrastanforderungen, empfohlen für Inhalte, bei denen maximale Lesbarkeit entscheidend ist, z. B. Behörden- oder Gesundheitswebsites.

Was gilt in WCAG als großer Text?

Großer Text ist definiert als 18 Punkt (24px) oder größer bei normalem Schriftgewicht, oder 14 Punkt (ca. 18,66px) oder größer bei Fettschrift. Großer Text hat niedrigere Kontrastanforderungen, da seine Größe das Lesen erleichtert.

Welche Farbformate unterstützt dieser Prüfer?

Sie können Farben in HEX (z. B. #1E293B), RGB (z. B. rgb(30, 41, 59)) oder HSL (z. B. hsl(222, 33%, 17%)) eingeben. Das Tool erkennt das Format automatisch.

Wie wird das Kontrastverhältnis berechnet?

Das Kontrastverhältnis wird mit der WCAG-2.1-Formel berechnet: (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Luminanz der helleren Farbe und L2 die relative Luminanz der dunkleren Farbe ist. Das Ergebnis reicht von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß).

Funktioniert dieses Tool auf Mobilgeräten?

Ja. Der Kontrastprüfer funktioniert auf jedem Gerät mit einem modernen Browser – Desktop, Tablet oder Smartphone.

Ist dieses Tool kostenlos?

Ja. ColourPicker.app ist komplett kostenlos nutzbar, ohne Registrierung.

Kann ich den Kontrast auch für UI-Komponenten prüfen, nicht nur für Text?

WCAG 2.1 fordert auch ein Mindestkontrastverhältnis von 3:1 für bedeutungsvolle UI-Komponenten und grafische Objekte (Erfolgskriterium 1.4.11). Sie können diesen Prüfer verwenden, um auch diese Kombinationen zu überprüfen – die Berechnung des Verhältnisses ist identisch.