Kontrastprüfer
Testen Sie Vordergrund- und Hintergrundfarben auf WCAG-Konformität, sehen Sie echten Text in der Vorschau und vergleichen Sie zugängliche Pantone-Optionen.
Vordergrundfarbe
Hintergrundfarbe
Kontrastverhältnis
Normaler Text
WCAG AA 4.5:1Großer Text
WCAG AA 3:1UI-Komponenten
WCAG AA 3:1Live-Vorschau
Beispieltext zur Prüfung der Lesbarkeit von Fließtext.
Großer Beispieltext
Zugängliche Pantone-Vorschläge
Dieses Farbpaar erfüllt das gewählte Kontrastziel bereits.
Weitere Werkzeuge
So verwenden Sie den Kontrastprüfer
- Geben Sie HEX-Farben ein oder wählen Sie Pantone-Farben für Vordergrund und Hintergrund.
- Prüfen Sie Kontrastverhältnis und WCAG-AA- oder AAA-Ergebnisse für normalen Text, großen Text und UI-Komponenten.
- Nutzen Sie die Live-Vorschau, tauschen Sie Farben, kopieren Sie CSS oder testen Sie zugängliche Pantone-Vorschläge.
Einsatzbereiche des Kontrastprüfers
- Validieren Sie Markenfarbpaare, bevor sie in digitalen Layouts eingesetzt werden.
- Prüfen Sie Buttons, Formulare, Navigation und andere UI-Komponenten auf gut lesbaren Kontrast.
- Vergleichen Sie Pantone-inspirierte Paletten, bevor Druckfarben für Bildschirme adaptiert werden.
- Dokumentieren Sie WCAG-Kontrastergebnisse für Accessibility-Reviews und Design-Übergaben.
Farbkontrastprüfer für WCAG-, UI- und Pantone-Workflows
Nutzen Sie diesen Kontrastprüfer, wenn Sie sicherstellen müssen, dass Textfarbe, Hintergrund, Button-Zustand oder Markenpalette lesbar sind, bevor sie in Website, App, Präsentation oder Designsystem übernommen werden.
WCAG-Kontrastergebnisse richtig einordnen
Das Tool berechnet die relative Luminanz beider Farben und gibt das von WCAG verwendete Kontrastverhältnis zurück. Fließtext benötigt in der Regel 4.5:1 für AA und 7:1 für AAA, während großer Text und wesentliche UI-Komponenten niedrigere Schwellenwerte haben.
Pantone-Farben und digitale Barrierefreiheit verbinden
Pantone-Farben werden häufig für Marke und Druck ausgewählt, ihre Bildschirmwerte müssen aber ebenfalls auf Zugänglichkeit geprüft werden. Suchen Sie nach Pantone-Namen oder HEX-Werten, sehen Sie die Kombination in der Vorschau und vergleichen Sie zugängliche Alternativen vor der Übergabe an Design oder Entwicklung.
Ein praktischer Ablauf für Design und Entwicklung
Beginnen Sie mit den exakten HEX-Werten aus der Designdatei, testen Sie Vorder- und Hintergrund in beide Richtungen, kopieren Sie CSS oder Bericht und dokumentieren Sie das bestandene Farbpaar mit der restlichen Pantone-Palette.
FAQ zum Kontrastprüfer
Was misst dieser Kontrastprüfer?
Er misst das Luminanz-Kontrastverhältnis zwischen Vordergrund- und Hintergrundfarbe und vergleicht das Ergebnis mit den WCAG-Schwellenwerten.
Welche Kontrastanforderungen gelten für WCAG AA und AAA?
WCAG AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text oder UI-Komponenten. WCAG AAA verlangt 7:1 für normalen Text und 4.5:1 für großen Text.
Können Pantone-Farben auf Web-Barrierefreiheit geprüft werden?
Ja. Pantone-Referenzen können in Bildschirmfarbwerte umgerechnet und anschließend auf digitalen Kontrast geprüft werden. Validieren Sie Endfarben immer im Medium, in dem sie erscheinen.
Hinweis zum Kontrast
Die Ergebnisse werden aus digitalen Farbwerten berechnet und dienen der Accessibility-Planung. Druckausgabe, Materialien, Licht und Displaykalibrierung können den wahrgenommenen Kontrast verändern.