Color
Contrast

Prüfe den Farbkontrast sofort nach WCAG AA- und AAA-Standards — für Text, Schaltflächen und UI-Komponenten.

WCAG 2.1 Standard4 Kriterien geprüftLive-Vorschau

① Vordergrundfarbe eingeben ② Hintergrundfarbe eingeben ③ WCAG-Kontrastverhältnis prüfen

Vordergrund (Text)

Hintergrund

Presets:

WCAG AA

4.5:1 normal · 3:1 large

WCAG AAA

7:1 normal · 4.5:1 large

Non-text

3:1 UI components (1.4.11)

Was ist WCAG-Farbkontrast und warum ist er wichtig?

Die WCAG (Web Content Accessibility Guidelines) legen Mindestkontrastverhältnisse zwischen Vordergrundtext und Hintergrundfarben fest, um die Lesbarkeit für Menschen mit Sehbehinderungen, einschließlich Farbenblindheit und Sehschwäche, sicherzustellen. WCAG 2.1 Level AA erfordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Level AAA erfordert 7:1 und 4,5:1. Das Verhältnis basiert auf der relativen Luminanz — einem wahrnehmungsbasierten Maß aus der RGB-Linearisierung (0,2126R + 0,7152G + 0,0722B). Frühzeitige Kontrastprüfung sichert die rechtliche Barrierefreiheit (ADA, EN 301 549, AODA).

Häufig gestellte Fragen

WCAG-Farbkontrast ist ein Standard, der das Mindestkontrastverhältnis zwischen Text und Hintergrund definiert, um die Lesbarkeit für Menschen mit Sehbehinderungen sicherzustellen. Er wird vom W3C veröffentlicht und ist Teil der WCAG 2.1.

Das Verhältnis wird mithilfe relativer Luminanzwerte berechnet, die aus den RGB-Komponenten jeder Farbe abgeleitet werden. Die Formel lautet (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Farbe ist.

WCAG AA ist in den meisten rechtlichen Kontexten erforderlich: 4,5:1 für normalen Text, 3:1 für großen Text. WCAG AAA ist das verbesserte Niveau: 7:1 für normalen Text, 4,5:1 für großen Text.

Großer Text ist mindestens 18 Punkt (ca. 24px) normal oder 14 Punkt (ca. 18,67px) fett. Bei diesen Größen werden leicht niedrigere Kontrastverhältnisse akzeptiert.

Nicht unbedingt. Kontrast betrifft Lesbarkeit, aber barrierefreies Design umfasst auch Schriftgröße, Zeichenlesbarkeit, Abstände und Kontext. Kombiniere Kontrastprüfungen mit Usability-Tests.

Füge deine Brand- oder UI-Farb-HEX-Codes in beide Felder ein. Strebe für allen Fließtext mindestens AA an. Nutze die Tauschen-Schaltfläche zum schnellen Testen invertierter Kombinationen.

WCAG 2.1 Erfolgskriterium 1.4.11 (Nicht-Text-Kontrast) erfordert ein Kontrastverhältnis von mindestens 3:1 für UI-Komponenten gegenüber angrenzenden Farben. Text in der Schaltfläche folgt der regulären 4,5:1-Regel.

Was ist WCAG-Farbkontrast und warum ist er wichtig?

Häufig gestellte Fragen

Unser Netzwerk entdecken