Color Contrast Checker

WCAG 2.1 Konformität für Barrierefreiheit prüfen

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

Wofür braucht man Kontrast-Prüfungen?

Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbsehschwäche. Niedriger Kontrast macht Text schwer lesbar — besonders bei kleinen Schriften, schlechten Bildschirmen und für Nutzer mit Sehbehinderung. Die WCAG-Standards (Web Content Accessibility Guidelines) definieren Mindestwerte, die in vielen Ländern gesetzlich vorgeschrieben sind (EU EN 301 549, US ADA, BITV).

WCAG 2.1 Schwellwerte

Level AA verlangt 4,5:1 für normalen Text (unter 24 px bzw. 18,66 px Bold) und 3:1 für großen Text. Level AAA verlangt 7:1 für normalen Text und 4,5:1 für großen Text. UI-Komponenten und Grafiken brauchen mindestens 3:1. Diese Werte basieren auf der relativen Luminanz nach der WCAG-Formel — Hue (Farbton) spielt keine Rolle.