WCAG-Kontrastprüfer und -Simulator

tools.accessibility-contrast-simulator.meta_desc

Live-Vorschau

Barrierefreies Design zählt

Dies ist ein Beispielabsatz, um zu demonstrieren, wie Ihre ausgewählten Farben zusammen wirken. Ein guter Kontrast gewährleistet die Lesbarkeit für alle.

Mehr über WCAG erfahren

Select a simulation mode below to apply filters to the live preview area.

Normale Sicht

Protanopie (Rotblindheit)

Deuteranopie (Grünblindheit)

Tritanopie (Blaublindheit)

Achromatopsie (Farbenblindheit)

Sehbehinderung (Unschärfe)

Helles Sonnenlicht (Geringer Kontrast)

If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.

Current colors pass WCAG AA. No fixes needed!

Export your selected colors as CSS variables, Tailwind configuration, or design tokens.

CSS Variables

:root {
  --color-foreground: #000000;
  --color-background: #ffffff;
  
  /* Usage */
  color: var(--color-foreground);
  background-color: var(--color-background);
}

Vordergrundfarbe (Text)

Hintergrundfarbe

Normaler Text

21.00:1

AAA

Großer Text

AAA

UI-Komponenten

AAA

FAQ zum Barrierefreiheits-Kontrast-Simulator

Das WCAG-Kontrastverhältnis ist ein mathematisches Maß für den Unterschied in der wahrgenommenen Leuchtdichte (Helligkeit) zwischen zwei Farben, ausgedrückt als Zahl von 1:1 bis 21:1. Es stellt sicher, dass Text und UI-Elemente ausreichend von ihren Hintergründen unterscheidbar sind, um von Benutzern mit unterschiedlichen Sehfähigkeiten gelesen werden zu können.

Für die WCAG AA-Konformität erfordert normaler Text ein Mindestverhältnis von 4,5:1, während großer Text (18pt oder 14pt fett) und UI-Komponenten 3,0:1 erfordern. Für die strenge AAA-Konformität benötigt normaler Text 7,0:1 und großer Text 4,5:1.

Ja, die Registerkarte Visuelle Simulation wendet in Echtzeit SVG-Matrixfilter auf Ihre Live-Vorschau an. Sie repliziert genau Protanopie (Rotblindheit), Deuteranopie (Grünblindheit), Tritanopie (Blaublindheit) und Achromatopsie (Monochromasie), neben Unschärfe- und Sonnenlichtsimulationen.

Nein. Dieser PRO-Simulator ist vollständig clientseitig mit JavaScript erstellt. Alle Farbberechnungen, Bildverarbeitung und Berichterstellung erfolgen direkt in Ihrem Browser, wodurch absolute Privatsphäre und keine Serverdatenspeicherung gewährleistet werden.

Wenn Ihre ausgewählten Farben den WCAG-Test nicht bestehen, können Sie unsere Auto-Korrektur-Funktion verwenden. Sie berechnet und schlägt den nächstgelegenen AA- oder AAA-konformen Farbton mathematisch vor, sodass Sie Ihre Markenästhetik beibehalten und gleichzeitig die Barrierefreiheitsstandards erfüllen können.

Verwendung des Contrast Checker

Vorder- und Hintergrundfarben einstellen
Geben Sie die Textfarbe (Vordergrund) und die Hintergrundfarbe über die Farbwähler oder durch Eingabe von HEX-, RGB- oder HSL-Werten ein. Das Kontrastverhältnis wird sofort aktualisiert.
Lesen Sie Ihr WCAG-Ergebnis
Das Tool zeigt das Kontrastverhältnis (z. B. 5,2:1) und ob es die WCAG AA (4,5:1 für normalen Text) und AAA (7:1) erfüllt. Für großen Text (18pt+) gelten niedrigere Schwellenwerte.
Farbenblindheit simulieren
Wechseln Sie zur Registerkarte Simulator, um zu sehen, wie Ihre Farbkombination für Benutzer mit Deuteranopie, Protanopie, Tritanopie oder anderen Sehtypen aussieht.
Bei Bedarf Auto-Fix verwenden
Wenn Ihre Farben nicht stimmen, klicken Sie auf Auto-Fix. Das Werkzeug berechnet den nächstgelegenen AA- oder AAA-kompatiblen Farbton, wobei Farbton und Sättigung so gut wie möglich erhalten bleiben.

Referenz für das Kontrastverhältnis

WCAG 2.1 Mindestkontrastanforderungen für verschiedene Textkategorien:

Inhaltstyp	WCAG AA	WCAG AAA	Beispiel Verhältnis
Normaler Text (<18pt)	4,5:1 ✓	7:1 ✓	#000 auf #fff → 21:1
Großer Text (≥18pt bold)	3:1 ✓	4.5:1 ✓	#333 auf #fff → 12.6:1
UI-Komponenten & Symbole	3:1 ✓	N/A	#767676 auf #fff → 4,5:1
Dekorative Elemente	Keine Anforderung	Keine Anforderung	Hintergrundbilder ausgenommen

Allgemeine Anwendungsfälle

UI / Visuelle Gestaltung Überprüfung

Testen Sie jede Text- und Hintergrundkombination in Ihrem Designsystem vor der Übergabe an die Entwicklung, um Fehler frühzeitig zu erkennen.

Audits zur Barrierefreiheit

Bereitstellung von dokumentierten Kontrastverhältnissen für Kundenzugänglichkeitsberichte und WCAG 2.1 / 2.2 Konformitätszertifikate.

Farbenblindheitstest

Simulieren Sie, wie 8% der männlichen Nutzer Ihre Palette wahrnehmen, um sicherzustellen, dass keine wichtigen Informationen für farbenblinde Zielgruppen verloren gehen.

Einhaltung von Rechtsvorschriften

Erfüllen Sie die ADA- (USA), EAA- (EU) und EN 301 549-Anforderungen an die digitale Zugänglichkeit vor der Produkteinführung oder öffentlichen Ausschreibung.

Entwickler QA

Überprüfen Sie schnell den Kontrast von CSS-Farbvariablen während der Codeüberprüfung, ohne zu einem Design-Tool zu wechseln.

Wie es funktioniert

Alle Berechnungen werden in Ihrem Browser unter Verwendung der WCAG 2.1-Luminanzformel durchgeführt - kein Serverkontakt erforderlich.

Relative Leuchtdichte

Die WCAG definiert die Leuchtdichte als gewichtete Summe der linearisierten RGB-Kanäle: L = 0,2126R + 0,7152G + 0,0722B. Das Kontrastverhältnis ist dann (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist.

Farbenblindheitssimulation

Der Simulator wendet Standard-Daltonisierungsmatrizen (Machado et al., 2009) an, um sRGB-Werte so umzuwandeln, wie sie von jeder Art von Farbsehschwäche wahrgenommen werden.

Auto-Fix-Algorithmus

Auto-Fix iteriert über den Helligkeitskanal im HSL-Raum und findet die minimale Anpassung, die das Zielverhältnis (AA oder AAA) erreicht, während Farbton und Sättigung unverändert bleiben.

Für wen ist dieses Tool gedacht?

UI/UX-Designer

Testen Sie Farbkombinationen vor der Übergabe des Designs und pflegen Sie ein konformes Designsystem.

Spezialisten für Barrierefreiheit

Erstellen Sie Kontrastnachweise für WCAG-Audits, Kundenberichte und Konformitätszertifikate.

Frontend-Entwickler

Überprüfen Sie CSS-Farbvariablen während der Entwicklung und Codeüberprüfung, ohne den Browser zu verlassen.

Produkt-Manager

Sicherstellung der Einhaltung gesetzlicher Bestimmungen zur Barrierefreiheit (ADA, EAA) vor der Produkteinführung oder der Einreichung öffentlicher Ausschreibungen.

Schöpfer von Inhalten

Vergewissern Sie sich, dass Text, der über Bilder oder farbige Hintergründe gelegt wird, für alle Zielgruppen lesbar ist.

Tipps für besseres barrierefreies Design

Streben Sie immer WCAG AA (4,5:1) als Basis an, und streben Sie AAA (7:1) für Text an - insbesondere auf Websites des Gesundheitswesens, der Behörden und des Finanzsektors.
Führen Sie die Farbenblindheitssimulation für alle 8 Typen durch, nicht nur für Deuteranopie. Jeder Typ wirkt sich auf verschiedene Farbpaare unterschiedlich aus.
Verlassen Sie sich niemals auf Farbe allein, um Informationen zu vermitteln - kombinieren Sie Farbhinweise immer mit Symbolen, Mustern oder Textbeschriftungen.
Verwenden Sie HSL, um den Kontrast zu optimieren: Erhöhen Sie den Helligkeitsunterschied zwischen Vorder- und Hintergrund, anstatt den Farbton zu ändern.
Testen Sie das Gerät in hellem Sonnenlicht - unter realen Bedingungen lassen sich Kontrastprobleme erkennen, die bei Monitoren verborgen bleiben.

Warum der Kontrast der Barrierefreiheit wichtig ist

Etwa 1 von 12 Männern und 1 von 200 Frauen haben eine Form von Farbsehschwäche - ein schlechter Kontrast schließt diese Nutzer direkt aus.
Der ADA (USA) und der European Accessibility Act (EU 2025) verlangen die Einhaltung der WCAG 2.1 AA für öffentlich zugängliche digitale Produkte.
Schlechter Kontrast ist einer der 3 häufigsten WCAG-Mängel, die bei Zugänglichkeitsprüfungen weltweit festgestellt werden (WebAIM-Millionenbericht).
Das barrierefreie Farbdesign verbessert die Lesbarkeit für alle Nutzer - bei hellem Sonnenlicht, auf schlechten Displays und mit zunehmendem Alter der Nutzer.

Leistung und Datenschutz

Alle Kontrastberechnungen, Farbenblindheitssimulationen und Autokorrekturen werden vollständig in Ihrem Browser über JavaScript ausgeführt. Es werden keine Farbwerte, Bildschirmfotos oder Nutzungsdaten an einen Server übertragen. Das Tool antwortet in weniger als 5 ms pro Berechnung und arbeitet nach dem ersten Laden der Seite offline.

Bildungshinweis: WCAG und Farbensehen

WCAG 2.1 vs. 2.2

WCAG 2.2 (2023) führte neue Erfolgskriterien ein (2.4.11 Focus Appearance, 3.2.6 Consistent Help), behielt aber die Kernanforderungen an den Kontrast (1.4.3, 1.4.6) identisch zu 2.1 bei.

Luminanz vs. Helligkeit

Die WCAG verwenden die relative Leuchtdichte - ein nach der Wahrnehmung gewichtetes Maß. Ein helles Gelb (#ffff00) hat eine sehr hohe Leuchtdichte (0,93), während ein dunkles Marineblau (#003366) eine geringe Leuchtdichte (0,02) hat, was ein Verhältnis von 9,8:1 ergibt.

Arten von Farbenblindheit

Deuteranopie (rot-grün, am häufigsten) betrifft ~6 % der Männer. Protanopie (Rotblindheit) ~2%. Tritanopie (blau-gelb) ~0,01%. Achromatopsie (völlige Farbenblindheit) ~0,003 %.

APCA - Der Zukunftsstandard

Der Advanced Perceptual Contrast Algorithm (APCA) wird für WCAG 3.0 vorgeschlagen. Er bewertet den Kontrast auf der Grundlage von Schriftgröße, -gewicht und -polarität unterschiedlich - man darf gespannt sein.

Fehlersuche

Ja. WCAG AA ist in den meisten Ländern das gesetzlich vorgeschriebene Minimum. AAA ist anzustreben und nicht immer für alle Text/Hintergrund-Kombinationen erreichbar. Streben Sie AAA für Fließtext an, wenn möglich.

Für großen Text (18pt normal oder 14pt fett) gilt ein niedrigerer Schwellenwert (3:1 für AA). Wenn Ihr kleiner Text bei 4,5:1 scheitert, dunkeln Sie den Text ab oder hellen Sie den Hintergrund auf, bis das Verhältnis erreicht ist.

Versuchen Sie, nur den Hintergrund und nicht die Textfarbe anzupassen. Wenn Sie einen weißen Hintergrund leicht abdunkeln (z. B. zu einem hellen Grau), können Sie die AA-Konformität mit minimaler visueller Veränderung erreichen.

Geringe Differenzen können dadurch entstehen, wie die Werkzeuge Fließkomma-Luminanzwerte runden. Beide Ergebnisse sollten innerhalb von ±0,1 liegen - verwenden Sie den konservativeren (niedrigeren) Wert für die Übereinstimmung.

Wussten Sie schon?

Die WCAG-Kontrastverhältnisformel wurde erstmals in der WCAG 1.0 (1999) als einfache Helligkeitsdifferenzprüfung eingeführt. Sie wurde in den WCAG 2.0 (2008) erheblich überarbeitet, um die relative Leuchtdichte zu verwenden - ein Modell, das auf dem CIE-Farbraum 1931 und der Art und Weise basiert, wie das menschliche Sehsystem Licht verarbeitet. Der aktuelle Schwellenwert von 4,5:1 wurde gewählt, weil er den Kontrastverlust von 3:1, den Nutzer mit einer Sehkraft von 20/80 (Sehschwäche ohne Hilfsmittel) erfahren, annähernd ausgleicht.

Produkte herstellen, die jeder nutzen kann

Barrierefreier Farbkontrast ist nicht nur ein Kontrollkästchen für die Einhaltung der WCAG - er ist eine grundlegende Designqualität, die jedem Nutzer zugute kommt. Dieses kostenlose Tool ermöglicht die WCAG-Prüfung in Echtzeit, die Simulation von Farbenblindheit und intelligente automatische Korrekturen an einem Ort, ohne dass Daten Ihren Browser verlassen. Testen Sie Ihre Palette jetzt, korrigieren Sie, was nicht funktioniert, und liefern Sie ein Produkt, das für alle funktioniert.