Kontrast-Prüfer (WCAG-Konformitätsprüfung)
Geben Sie zwei Farben ein, um das WCAG-Kontrastverhältnis (Web Content Accessibility Guidelines) zu berechnen und die Konformität mit den Stufen AA und AAA zu prüfen.
Überblick über die WCAG-Kontrastanforderungen
| Stufe | Zielelement | Erforderliches Kontrastverhältnis |
|---|---|---|
| AA (Minimum) | Normaler Text | mindestens 4,5:1 |
| AA (Minimum) | Großer Text (ab 18pt oder ab 14pt fett) | mindestens 3:1 |
| AA (Minimum) | UI-Komponenten und grafische Objekte | mindestens 3:1 |
| AAA (Erweitert) | Normaler Text | mindestens 7:1 |
| AAA (Erweitert) | Großer Text | mindestens 4,5:1 |
Nutzungstipps
- Text- und Hintergrundfarbe lassen sich entweder über den Farbwähler auswählen oder direkt als Hex-Code eingeben (sowohl `#RRGGBB` als auch `#RGB` werden unterstützt).
- Mit der Schaltfläche "Farben tauschen" lassen sich Text- und Hintergrundfarbe schnell vertauschen und vergleichen, was praktisch ist, wenn Sie mehrere Farbvarianten für ein Logo oder Icon prüfen möchten.
- Stufe AAA ist strenger als Stufe AA. Die Erfüllung von AA gilt allgemein als empfohlene Mindestanforderung für Websites, während bei Inhalten mit besonders hohem Anspruch an die Lesbarkeit Stufe AAA angestrebt werden sollte.
- Die Anforderung von mindestens 3:1 für UI-Komponenten und grafische Objekte, etwa Schaltflächenrahmen und Icons, entspricht dem mit WCAG 2.1 neu eingeführten Erfolgskriterium 1.4.11.
Häufig gestellte Fragen
Übrigens – Die Entstehung der Barrierefreiheitsstandards
Die WCAG (Web Content Accessibility Guidelines) sind eine internationale Richtlinie, die maßgeblich vom W3C (World Wide Web Consortium) entwickelt wurde. Die erste Version, WCAG 1.0, wurde 1999 veröffentlicht. Schon damals galt es als große Herausforderung, die Hürden zu verringern, denen sehbehinderte Nutzer beim Umgang mit dem Web über assistive Technologien wie Screenreader begegneten.
Kontrastanforderungen gewannen aus mehreren Gründen an Bedeutung, die mit der Vielfalt des menschlichen Sehvermögens zusammenhängen: Eine Farbsehschwäche betrifft einen relevanten Bevölkerungsanteil (bei Männern schätzungsweise etwa jeden zwanzigsten), mit zunehmendem Alter vergilbt die Augenlinse und die Kontrastempfindlichkeit nimmt ab, und Smartphone-Displays werden im direkten Sonnenlicht im Freien schwer erkennbar. Durch die Festlegung numerischer Kriterien konnten Designer die Barrierefreiheit objektiv überprüfen, statt sich allein auf ein subjektives Empfinden von guter Lesbarkeit zu verlassen.
Heute ist Barrierefreiheit im Web in vielen Ländern gesetzlich vorgeschrieben. In Japan etwa wurde Unternehmen durch die Novelle des Gesetzes zur Beseitigung der Diskriminierung von Menschen mit Behinderung im April 2024 die Bereitstellung angemessener Vorkehrungen verpflichtend auferlegt. Die Prüfung des Kontrastverhältnisses ist damit zu einer grundlegenden Qualitätsprüfung geworden, an der Unternehmen bei der Gestaltung ihrer Website nicht mehr vorbeikommen.