Contrast Checker
Check the contrast ratio between two colors for WCAG accessibility compliance.
Preview
Large Text (18pt+)
Heading Example
This is an example of large text content to demonstrate contrast.
Normal Text (under 18pt)
Regular paragraph text that users would typically read.
Smaller text that might be used for secondary content.
Kontrast-Prüfer für Farben
Stelle sicher, dass deine Webdesigns die Barrierefreiheitsstandards erfüllen — mit unserem professionellen Farbkontrast-Prüfer. Teste Farbkombinationen gegen die WCAG-2.1-Richtlinien für AA- und AAA-Konformität.
Warum unseren Farbkontrast-Prüfer verwenden?
Unser Farbkontrast-Prüfer ist ein unverzichtbares Werkzeug für Webdesigner und Entwickler, die barrierefreie und inklusive digitale Erlebnisse schaffen wollen. Dieses leistungsstarke Tool hilft dir sicherzustellen, dass deine Farbkombinationen den strengen Standards der Web Content Accessibility Guidelines (WCAG) entsprechen und deine Inhalte für Menschen mit verschiedenen Sehbehinderungen nutzbar sind.
Barrierefreiheit bedeutet nicht nur, Vorschriften einzuhalten — es bedeutet, ein möglichst breites Publikum zu erreichen. Etwa 1 von 12 Männern und 1 von 200 Frauen weltweit hat eine Form der Farbenfehlsichtigkeit, und viele andere profitieren von hohem Kontrast aufgrund des Alters oder schwieriger Lichtverhältnisse.
Unser Tool liefert sofortiges Feedback zu deinen Farbwahlen und zeigt dir genau, welche Kombinationen funktionieren — für informierte Entscheidungen über die Farben deines Designsystems und deiner Benutzeroberfläche.
Die wichtigsten Vorteile
- Rechtliche Konformität: Erfülle Barrierefreiheitsanforderungen wie ADA, Section 508 und WCAG-Standards
- Bessere Nutzererfahrung: Schaffe Oberflächen, die für alle Nutzer leicht zu lesen und zu bedienen sind
- Professionelles Design: Stelle sicher, dass deine Farbwahlen in allen Kontexten und Lichtverhältnissen funktionieren
- Zeitersparnis: Erhalte sofortige Ergebnisse ohne manuelle Berechnungen oder Rätseln
WCAG-Standards verstehen
Die Web Content Accessibility Guidelines (WCAG) definieren spezifische Kontrastverhältnisse, die die Lesbarkeit von Text sicherstellen:
Stufe AA (Mindestkonformität)
Verhältnis 4.5:1 für normalen Text (unter 18pt oder 14pt fett)
Verhältnis 3:1 für großen Text (18pt+ oder 14pt+ fett)
Stufe AAA (erhöhte Konformität)
Verhältnis 7:1 für normalen Text
Verhältnis 4.5:1 für großen Text
Diese Verhältnisse stellen sicher, dass Text für Nutzer mit Farbsehschwächen, Sehbehinderungen oder bei schlechten Lichtverhältnissen lesbar bleibt.
Wer sollte dieses Tool verwenden?
UI/UX-Designer
Gestalten barrierefreie Oberflächen und Designsysteme
Webentwickler
Implementieren barrierefreie Farbschemata im Code
Content-Creator
Sichern die Lesbarkeit von Text auf allen Geräten
WCAG AA vs. AAA, erklärt
Farbkontrast ist die häufigste Barrierefreiheits-Schwachstelle im Web — und eine der einfachsten zu beheben. Das bedeuten die Zahlen wirklich und so erfüllst du sie jedes Mal.
AA (Minimum)
4.5:1 für normalen Text · 3:1 für großen Text (18pt / 14pt fett oder größer) und UI-Komponenten wie Buttons, Inputs und Icons.
AAA (erhöht)
7:1 für normalen Text · 4.5:1 für großen Text. Übliche Anforderung in Behörden, Gesundheitswesen und strengen Markenvorgaben.
Wie Kontrast berechnet wird
Es ist das Verhältnis zwischen der relativen Luminanz zweier Farben, von 1:1 (Weiß auf Weiß) bis 21:1 (Schwarz auf Weiß):
(L1 + 0.05) / (L2 + 0.05) Die relative Luminanz gewichtet jeden RGB-Kanal nach der Gammakorrektur. Deshalb können zwei Farben, die sich in der Sättigung unterscheiden, trotzdem gleichermaßen scheitern: Sättigung zählt nicht, Luminanz schon.
Häufige Fehler und Lösungen
Grauer Text auf Weiß
#999999 auf Weiß ergibt 2.8:1 — scheitert an AA. Verdunkle auf #767676 (4.54:1) für konformen Fließtext.
Weißer Text auf Markenfarben
Weiß auf Bernstein #F59E0B ergibt 2.2:1. Verdunkle den Hintergrund, wechsle zu dunklem Text oder reserviere die Kombination für dekorative Elemente.
Schwer lesbare Platzhalter
Hellgraue Platzhalter scheitern meist — sie sind von WCAG nicht ausgenommen, und unsichtbare Hinweise sind zudem ein Usability-Problem.
Farbige Links in farbigem Text
Ein Link im Text muss 4.5:1 gegen den Hintergrund erreichen und sich durch mehr als Farbe unterscheiden — unterstreiche ihn.
| Texttyp | AA | AAA |
|---|---|---|
| Fließtext (< 18pt) | 4.5:1 | 7:1 |
| Großer Text (≥ 18pt / 14pt fett) | 3:1 | 4.5:1 |
| UI-Komponenten & Grafiken | 3:1 | — |
Nutze den Prüfer oben, um jedes Text-/Hintergrund-Paar in Echtzeit zu testen. Barrierefreie Farbe ist nicht langweilige Farbe — sie bedeutet, Luminanz-Beziehungen früh zu prüfen.