WCAG-Kontrastprüfung
Farbkontrastverhältnisse auf Einhaltung der Barrierefreiheitsstandards WCAG AA und AAA prüfen
Eingabe und Optionen
Schnellvorgaben und Beispiele
Läuft in Ihrem Browser. Ihre Eingaben bleiben auf diesem Gerät.
Ergebnisse
Geben Sie Ihre Werte ein, um das Ergebnis zu sehen.
Über die WCAG-Kontrastprüfung
Unsere kostenlose Online-WCAG-Kontrastprüfung hilft Designern, Entwicklern und Barrierefreiheitsexperten zu prüfen, ob Kombinationen aus Text- und Hintergrundfarbe die Kontrastanforderungen der Web Content Accessibility Guidelines (WCAG) 2.1 erfüllen. Barrierefreier Farbkontrast stellt sicher, dass alle Nutzer, auch solche mit Sehschwäche oder Farbsehschwäche, Ihre Webinhalte lesen und nutzen können.
Das Tool berechnet das Kontrastverhältnis zwischen zwei beliebigen Farben mit der offiziellen W3C-Formel für die relative Luminanz und zeigt sofort an, ob die Kombination die Konformitätsstufen WCAG AA und WCAG AAA für normalen und großen Text besteht oder nicht. Alle Berechnungen erfolgen in Echtzeit direkt in Ihrem Browser, ohne dass Daten an einen Server gesendet werden.
Ob Sie ein Barrierefreiheits-Audit durchführen, eine neue Oberfläche gestalten oder bestehende Inhalte auf Konformität prüfen: Diese Kontrastprüfung liefert Ihnen präzise, normgerechte Ergebnisse samt Live-Textvorschau und umsetzbaren Vorschlägen zur Korrektur durchfallender Farbkombinationen.
Die WCAG-Kontrastanforderungen verstehen
Die Web Content Accessibility Guidelines (WCAG) sind der international anerkannte Standard für Barrierefreiheit im Web, herausgegeben vom World Wide Web Consortium (W3C). Die WCAG legen konkrete Schwellenwerte für das Kontrastverhältnis fest, damit Text auch für Nutzer mit unterschiedlicher Sehfähigkeit lesbar bleibt.
- WCAG-Stufe AA (normaler Text): Erforderlich ist ein Kontrastverhältnis von mindestens 4.5:1. Das gilt für Fließtext, Absätze und jeden Text, der kleiner ist als 18pt (24px) oder 14pt fett (18.66px fett).
- WCAG-Stufe AA (großer Text): Erforderlich ist ein Kontrastverhältnis von mindestens 3:1. Als großer Text gilt Text mit mindestens 18pt (24px) oder 14pt fett (18.66px fett).
- WCAG-Stufe AAA (normaler Text): Erforderlich ist ein Kontrastverhältnis von mindestens 7:1. Das ist die höchste Konformitätsstufe für Barrierefreiheit bei normal großem Text.
- WCAG-Stufe AAA (großer Text): Für großen Text ist auf der Konformitätsstufe AAA ein Kontrastverhältnis von mindestens 4.5:1 erforderlich.
Die Erfüllung von mindestens WCAG AA gilt als Basisstandard für barrierefreies Webdesign und wird von vielen rechtlichen Rahmenwerken weltweit gefordert, darunter der Americans with Disabilities Act (ADA), der European Accessibility Act und Section 508 des Rehabilitation Act. WCAG AAA bietet ein höheres Maß an Barrierefreiheit und wird empfohlen, wo immer es machbar ist.
So wird das Kontrastverhältnis berechnet
Das Kontrastverhältnis zwischen zwei Farben wird anhand der relativen Luminanz jeder Farbe bestimmt, wie in der Spezifikation WCAG 2.1 definiert. Die relative Luminanz misst die wahrgenommene Helligkeit einer Farbe auf einer Skala von 0 (dunkelstes Schwarz) bis 1 (hellstes Weiß).
Die Berechnung umfasst drei Schritte. Zuerst wird jeder Farbkanal (Rot, Grün, Blau) durch Division durch 255 von seinem 8-Bit-sRGB-Wert (0-255) in einen normalisierten sRGB-Wert (0-1) umgerechnet. Danach erfolgt für jeden normalisierten Wert eine Gammakorrektur: Ist der Wert 0.04045 oder kleiner, wird er durch 12.92 geteilt, andernfalls wird er mit der Formel ((value + 0.055) / 1.055) ^ 2.4 umgerechnet. Zuletzt werden die linearisierten Kanalwerte mit gewichteten Koeffizienten kombiniert: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
Das endgültige Kontrastverhältnis ergibt sich aus (L1 + 0.05) / (L2 + 0.05), wobei L1 die relative Luminanz der helleren und L2 die relative Luminanz der dunkleren Farbe ist. Das Ergebnis liegt zwischen 1:1 (kein Kontrast, identische Farben) und 21:1 (maximaler Kontrast, reines Schwarz auf reinem Weiß).
Hauptfunktionen
- Berechnung des Kontrastverhältnisses in Echtzeit mit der offiziellen W3C-Luminanzformel der WCAG 2.1
- Anzeigen für „bestanden/nicht bestanden“ für die Konformitätsstufen WCAG AA und AAA bei normalem und großem Text
- Interaktive Farbauswahl und Hex-Eingabe für Vordergrund- und Hintergrundfarbe
- Farben mit einem Klick tauschen, um umgekehrte Farbkombinationen zu testen
- Zehn schnelle Voreinstellungen für Farbkombinationen, darunter gängige barrierefreie Paarungen
- Live-Textvorschau, die zeigt, wie Ihre Farben bei normaler und großer Textgröße wirken
- Automatischer Vorschlag der nächstliegenden bestehenden Vordergrundfarbe, wenn die aktuelle Kombination durchfällt
- Technische Luminanzdetails für Vordergrund- und Hintergrundfarbe
- Vollständiger Dunkelmodus für angenehmes Arbeiten in jeder Umgebung
- Die gesamte Verarbeitung läuft lokal im Browser, ohne dass Daten an externe Server übertragen werden
So verwenden Sie die WCAG-Kontrastprüfung
- Vordergrundfarbe festlegen: Klicken Sie auf das Farbquadrat der Farbauswahl oder geben Sie einen Hex-Wert (z. B. #1A1A2E) in das Textfeld ein, um Ihre Text- bzw. Vordergrundfarbe festzulegen.
- Hintergrundfarbe festlegen: Legen Sie die Hintergrundfarbe hinter dem Text ebenso über die Farbauswahl oder die Hex-Eingabe fest.
- Ergebnisse prüfen: Das Kontrastverhältnis und die Ergebnisse „bestanden/nicht bestanden“ für alle vier WCAG-Stufen werden sofort angezeigt, sobald Sie die Farben ändern.
- Live-Vorschau ansehen: Scrollen Sie nach unten, um echten Text mit Ihrer gewählten Farbkombination in normaler und großer Größe zu sehen.
- Vorschläge übernehmen: Besteht die Kombination WCAG AA nicht, wird eine vorgeschlagene Vordergrundfarbe angezeigt. Klicken Sie auf „Übernehmen“, um sie zu verwenden.
- Voreinstellungen ausprobieren: Testen Sie mit den Schnellvoreinstellungen bekannte barrierefreie oder nicht barrierefreie Farbkombinationen.
- Farben tauschen: Klicken Sie auf die Schaltfläche „Farben tauschen“, um Ihre Vordergrund- und Hintergrundauswahl umzukehren.
Warum Farbkontrast für die Barrierefreiheit wichtig ist
Weltweit haben etwa 1 von 12 Männern und 1 von 200 Frauen eine Form von Farbsehschwäche. Hinzu kommen Millionen Menschen mit Sehschwäche, altersbedingten Veränderungen des Sehens oder situativen Einschränkungen wie Spiegelungen auf dem Bildschirm. Ausreichender Farbkontrast ist eine der wirkungsvollsten und einfachsten Möglichkeiten, Webinhalte für all diese Nutzer zugänglich zu machen.
Schlechter Kontrast zwischen Text und Hintergrund gehört zu den häufigsten Problemen der Barrierefreiheit, die bei Web-Audits gefunden werden. Mit einer WCAG-Kontrastprüfung während Design und Entwicklung können Teams Kontrastprobleme erkennen und beheben, bevor sie in Produktion gehen, senken die Nachbesserungskosten und stellen von Anfang an die Einhaltung der Barrierefreiheitsvorschriften sicher.
Guter Farbkontrast nützt auch Nutzern ohne Behinderung. Er verbessert die Lesbarkeit bei hellem Sonnenlicht, auf Displays geringer Qualität und in Umgebungen mit vielen Ablenkungen. Barrierefreies Design ist inklusives Design, das für alle ein besseres Erlebnis schafft.
Häufig gestellte Fragen
Was ist der Unterschied zwischen WCAG AA und AAA?
WCAG AA ist die Standardstufe der Konformität, die für die meisten Websites und Anwendungen empfohlen wird. Sie verlangt ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text. WCAG AAA ist eine strengere Stufe, die 7:1 für normalen Text und 4.5:1 für großen Text verlangt. AAA ist nicht für alle Inhalte erreichbar, wird aber für wichtige Textelemente und überall dort empfohlen, wo maximale Lesbarkeit gefragt ist.
Was gilt in den WCAG als großer Text?
Laut WCAG 2.1 gilt als großer Text Text mit mindestens 18 Punkt (etwa 24 CSS-Pixel) oder, wenn er fett ist, mit mindestens 14 Punkt (etwa 18.66 CSS-Pixel). Für großen Text gelten niedrigere Kontrastanforderungen, weil er schon durch seine Größe leichter lesbar ist.
Unterstützt dieses Tool Transparenz oder Alphakanäle?
Dieses Tool arbeitet mit deckenden Hex-Farben (6-stellige Hex-Codes). Bei Farben mit Transparenz hängt der tatsächliche Kontrast vom Hintergrund hinter der transparenten Ebene ab, der auf der Seite variieren kann. Um halbtransparenten Text zu prüfen, berechnen Sie zuerst die resultierende effektive Volltonfarbe aus der transparenten Überlagerung auf dem tatsächlichen Hintergrund und testen dann diese Farbe hier.
Ist die Einhaltung der WCAG gesetzlich vorgeschrieben?
In vielen Rechtsordnungen ja. Der ADA in den Vereinigten Staaten, der European Accessibility Act in der EU, der Accessibility for Ontarians with Disabilities Act (AODA) in Kanada und ähnliche Gesetze in anderen Ländern verweisen auf WCAG 2.1 Stufe AA als Standard für digitale Barrierefreiheit oder übernehmen ihn. Organisationen, die diese Anforderungen nicht erfüllen, drohen rechtliche Schritte, Bußgelder und Reputationsschäden.