Design Systeme und UI Komponenten
Praktisch für Buttons, Cards, Formulare, Statusfarben und komplette Farbsets.
Farben eingeben
Geben Sie die Hex-Farbwerte für Vordergrund und Hintergrund ein. Der Check berechnet das KontrastverhÄltnis und prüft WCAG AA sowie AAA Konformität.
Kontrast prüfen
Für wen dieses Tool geeignet ist
Der Check ist als schneller Einstieg gedacht und hilft vor allem bei klar eingrenzbaren Teilproblemen.
Redaktion und Marketing
Hilft bei Bannern, Kampagnenseiten und Call-to-Action Elementen mit individÜller Farbgebung.
Qualitätssicherung vor Release
Sinnvoll für schnelle Stichproben in Komponentenbibliotheken und Template-Checks.
Was wird geprüft?
Die Auswertung deckt typische Muster und häufige Fehler ab, ersetzt aber kein vollständiges Accessibility Audit.
Kontrastverhältnis
Das Tool berechnet den numerischen Kontrast zwischen Text- und Hintergrundfarbe.
WCAG AA und AAA
Die Ausgabe zeigt, ob die eingegebenen Farben die relevanten Schwellwerte erreichen.
Schnelle Vorprüfung
Geeignet, um riskante Farbkombinationen frÜh auszusortieren, bevor Design oder Code weiterlaufen.
WCAG 2.2 Bezug
Die Ergebnisse lassen sich den folgenden WCAG-Erfolgskriterien und Prinzipien zuordnen.
1.4.3 Contrast Minimum
Direkter Bezug für normalen Text und viele Standard-Komponenten.
1.4.6 Contrast Enhanced
Hilft bei strengeren Anforderungen und hochwertigen Lesbarkeitszielen.
1.4.11 Non-text Contrast (unterstützend)
Das Tool ist auch ein guter Einstieg für die Prüfung kontrastreicher UI-Zustände und Rahmen.
Passende nächste Schritte
Sinnvoll wird der Check vor allem dann, wenn die Ergebnisse direkt mit weiteren Prüfungen oder Maßnahmen verbunden werden.
Color Blindness Simulator
Ergänzt den Kontrastwert um eine visulle Perspektive für verschiedene FarbsehschwÄchen.
Focus Visibility Check
Wenn Farben stimmen, sollte anschliessend auch die Sichtbarkeit von Fokusrahmen geprüft werden.
Quick WCAG Check
Für einen schnelleren Gesamtblick auf weitere WCAG Kernprobleme.
Häufige Fragen
Reicht ein AA-Wert immer aus?
Nicht zwingend. Für viele Projekte ist AA die Mindestanforderung. In schwierigen Nutzungssituationen kann ein höherer Kontrast trotzdem sinnvoll sein.
Prüft das Tool auch Text auf Bildern?
Nein. Bei Bildern, Verläufen oder Videos muss der Kontrast in der realen Darstellung beurteilt werden.
Warum sieht eine Kombination gut aus, fällt aber trotzdem durch?
Visuelle Gewohnheit ist kein verlässlicher Massstab. Die WCAG nutzen messbare Kontrastwerte, weil viele Barrieren sonst unentdeckt bleiben.