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

Was ist das Kontrastverhältnis?

Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen Textfarbe und Hintergrundfarbe als Zahl zwischen 1:1 (kein Unterschied) und 21:1 (die größtmögliche Differenz, Schwarz auf Weiß). Je höher der Wert, desto leichter lässt sich Text lesen. Die WCAG (Web Content Accessibility Guidelines) legen auf Grundlage dieser Zahl zwei Konformitätsstufen fest, AA und AAA. Dieses Tool berechnet aus zwei eingegebenen Farbcodes automatisch das Verhältnis und zeigt auf einen Blick, welche von fünf Anforderungen erfüllt sind.

Grundlage der Berechnung ist die sogenannte "relative Leuchtdichte" (relative luminance). Anders als eine einfache Helligkeitsangabe, etwa der L-Wert im HSL-Modell, wird hierbei zunächst die Gammakorrektur aus den sRGB-Werten entfernt und anschließend die unterschiedliche Empfindlichkeit des menschlichen Auges für Rot, Grün und Blau gewichtet aufsummiert. Das Ergebnis kommt dem tatsächlichen visuellen Helligkeitseindruck näher als eine rein rechnerische Helligkeit. Ähnliche Farbtöne führen dabei fast immer zu einem niedrigen Kontrastverhältnis: Ein "Nicht bestanden" bedeutet also nicht, dass die gewählten Farben grundsätzlich falsch sind, sondern lediglich, dass der Helligkeitsabstand zwischen ihnen vergrößert werden sollte.

So verwenden Sie den Kontrast-Prüfer

Textfarbe eingeben Wählen Sie die Farbe über den Farbwähler oder geben Sie direkt einen Hex-Code ein. Der Standardwert ist ein dunkles Grau (#333333).
Hintergrundfarbe eingeben Gehen Sie ebenso mit dem Farbwähler oder per Hex-Code vor. Der Standardwert ist Weiß (#ffffff).
Ergebnis prüfen Sobald Sie Werte eingeben, werden das Kontrastverhältnis sowie Bestanden-/Nicht-bestanden-Kennzeichnungen für die Stufen AA und AAA in Echtzeit angezeigt.
Bei Bedarf Farben tauschen Mit der Schaltfläche "Farben tauschen" kehren Sie Text- und Hintergrundfarbe um, um ein Farbschema auch in umgekehrter Anordnung zu vergleichen.

Tipps für die Nutzung

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.

So wird der Kontrast-Prüfer eingesetzt

Farbprüfung für Schaltflächen und Links

Geben Sie die Text- und Hintergrundfarbe der wichtigsten Aktionsschaltflächen oder Textlinks Ihrer Website ein, um zu prüfen, ob die Stufe AA (mindestens 4,5:1) erreicht wird.

Abgleich von Logo- und Bannerfarben

So lässt sich vorab prüfen, ob die Farbe eines Logos oder der Text auf einem Werbebanner vor der jeweiligen Hintergrundfarbe ausreichend gut erkennbar bleibt.

Audit der Farbpalette eines Designsystems

Prüfen Sie Kombination für Kombination, ob bestehende Marken- und Textfarben die Barrierefreiheitsanforderungen der gesamten Benutzeroberfläche erfüllen, und dokumentieren Sie das Ergebnis systematisch.

Kontrollieren des Dark-Mode-Farbschemas

Damit lässt sich gezielt nachprüfen, ob ein für den Dark Mode invertiertes Farbschema die Kontrastanforderungen ebenso erfüllt wie das Farbschema des hellen Modus.

Glossar

Relative Leuchtdichte (relative luminance): Ein Helligkeitsmaß, das nach Entfernen der Gammakorrektur aus den sRGB-Werten die unterschiedliche Augenempfindlichkeit für Rot, Grün und Blau gewichtet zusammenfasst. Sie bildet die Grundlage der Kontrastberechnung.
Kontrastverhältnis: Ein aus der relativen Leuchtdichte von heller und dunkler Farbe berechneter Wert zwischen 1:1 und 21:1. Je höher der Wert, desto größer der Helligkeitsunterschied zwischen beiden Farben und desto leichter lesbar der Text.
WCAG: Abkürzung für Web Content Accessibility Guidelines, die internationale Richtlinie des W3C für Barrierefreiheit im Web. Auch die Anforderungen an das Kontrastverhältnis sind darin festgelegt.
Stufe AA: Die zweithöchste Konformitätsstufe der WCAG. Normaler Text muss ein Kontrastverhältnis von mindestens 4,5:1 erreichen. Sie gilt als der Mindeststandard, auf den sich viele Gesetze und Richtlinien beziehen.
Stufe AAA: Die höchste Konformitätsstufe der WCAG. Normaler Text muss ein Kontrastverhältnis von mindestens 7:1 erreichen. Nicht verpflichtend, aber empfehlenswert, wenn die Lesbarkeit besonders wichtig ist.
Großer Text: Eine von den WCAG definierte Kategorie: normaler Text ab 18 Punkt (rund 24 px) oder fetter Text ab 14 Punkt (rund 18,66 px). Für diese Kategorie gilt eine mildere Anforderung als für normalen Text.
UI-Komponente: Visuelle Elemente, die eine Bedienmöglichkeit anzeigen, etwa Schaltflächenrahmen, Umrandungen von Eingabefeldern oder Icons. Mit WCAG 2.1 wurde dafür eine neue Anforderung von mindestens 3:1 eingeführt.

Häufig gestellte Fragen

Die WCAG (Web Content Accessibility Guidelines) sind internationale Richtlinien, die Webinhalte für mehr Menschen zugänglich machen sollen. Das Kontrastverhältnis drückt den Helligkeitsunterschied zwischen Text- und Hintergrundfarbe als Zahl zwischen 1:1 (kein Unterschied) und 21:1 (maximaler Unterschied zwischen Schwarz und Weiß) aus. Es dient als objektives Maß für die Lesbarkeit von Text unter unterschiedlichen Bedingungen, etwa für Menschen mit Sehbehinderung, ältere Nutzer oder beim Betrachten eines Smartphone-Displays im hellen Sonnenlicht im Freien.

Je größer ein Zeichen ist, desto leichter lässt sich seine Form erkennen, sodass es auch bei etwas geringerem Kontrast noch gut lesbar bleibt. Die WCAG definieren normalen Text ab 18pt (ca. 24px) oder fetten Text ab 14pt (ca. 18,66px) als "großen Text" und wenden darauf eine mildere Anforderung an (mindestens 3:1 bei Stufe AA) als bei normalem Text.

Stufe AA von WCAG 2.1 gilt als der Mindeststandard, auf den sich die Gesetze und Richtlinien vieler Länder beziehen, zum Beispiel der ADA in den USA oder die Web Accessibility Directive der EU. Stufe AAA ist anspruchsvoller und nicht verpflichtend, wird aber gelegentlich für Inhalte empfohlen, bei denen Lesbarkeit besonders wichtig ist, etwa auf Websites öffentlicher Einrichtungen.

WCAG 2.x berechnet zunächst für jede Farbe die "relative Leuchtdichte" (relative luminance), indem die Gammakorrektur aus den sRGB-Werten entfernt wird. Anschließend wird das Kontrastverhältnis mit der Formel (L1+0,05)/(L2+0,05) berechnet, wobei L1 die Leuchtdichte der helleren und L2 die der dunkleren Farbe ist. Diese Berechnungsmethode ist als technische Spezifikation des W3C veröffentlicht.

Ü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.

Alle Wissenstexte ansehen