Web-Accessibility: Farbkontrast verstehen

Farbkontrast ist für Barrierefreiheit unerlässlich und in vielen Ländern gesetzlich vorgeschrieben. Lerne, was WCAG-Richtlinien erfordern und wie du deine Designs prüfst.

Einer von zwölf Männern und eine von zweihundert Frauen hat eine Farbsehschwäche. Ausreichender Farbkontrast stellt sicher, dass deine Website für alle lesbar ist — einschließlich Menschen mit Sehbehinderungen, älteren Nutzern und jedem, der ein Display in hellem Sonnenlicht verwendet.

Der WCAG-Kontraststandard

Die Web Content Accessibility Guidelines (WCAG) definieren Mindest-Kontrastverhältnisse. WCAG Level AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text (18pt oder 14pt fett). Level AAA erfordert 7:1 für normalen Text — der Goldstandard für maximale Barrierefreiheit.

Wie das Kontrastverhältnis berechnet wird

Das Kontrastverhältnis wird aus der relativen Helligkeit zweier Farben abgeleitet. Ein Verhältnis von 1:1 bedeutet kein Kontrast, während 21:1 das theoretische Maximum ist (reines Schwarz auf reinem Weiß). Die Formel berücksichtigt, wie das menschliche Auge Helligkeit wahrnimmt.

Praktische Tipps für besseren Kontrast

Dunkler Text auf hellem Hintergrund übertrifft fast immer hellen Text auf farbigem Hintergrund. Vermeide hellgrauen Text auf Weiß — ein verbreiteter Design-Trend, der Accessibility-Checks nicht besteht. Überprüfe immer den Kontrast, wenn du Markenfarben für Text verwendest.

So verwendest du den Kontrast-Checker

Gib deine Vordergrund- und Hintergrundfarben über den Farbwähler oder Hex-Eingabefelder ein. Das Tool berechnet sofort das Kontrastverhältnis und zeigt, welche WCAG-Level bestanden werden. Die Live-Vorschau zeigt, wie deine Textkombination bei realistischen Größen aussieht.