Kontrastprüfer — Kostenlose WCAG-Zugänglichkeitskontrastverhältnis-Tool

Farbe ist eines der mächtigsten Werkzeuge im Design, kann aber auch eines der ausschließendsten sein. Eine schöne Farbpalette bedeutet nichts, wenn Ihre Nutzer den Text nicht lesen können. Schlechter Kontrast ist die häufigste Zugänglichkeitsfehlerquelle im Web, die über 300 Millionen Menschen mit Farbsehschwäche und zahlreiche andere Nutzer betreffen, die Mobilgeräte in hellem Sonnenlicht oder auf Bildschirmen mit verblassender Helligkeit verwenden. Unser kostenloser Kontrastprüfer berechnet instantan das Kontrastverhältnis zwischen zwei Farben und zeigt Ihnen genau, wo sie im Vergleich zu den WCAG AA- und AAA-Standards stehen — damit Sie inklusiv gestalten können, ohne zu raten.

Was ist Farbkontrast und warum ist er wichtig?

Farbkontrast ist der Unterschied in der wahrgenommenen Helligkeit zwischen zwei Farben. Wenn Text auf einem Hintergrund steht, bestimmt der Kontrast zwischen ihnen, ob der Text lesbar ist. Wenn die Farben zu ähnlich in ihrer Helligkeit sind, verschmelzen sie und werden für Menschen mit geringer Sehkraft, Farbenblindheit oder Nutzer, die in direktem Sonnenlicht einen Bildschirm anstarren, unsichtbar.

Die Web Content Accessibility Guidelines (WCAG) definieren Kontrast mathematisch mithilfe der relativen Helligkeit — einer Maßzahl für die Helligkeit einer Farbe, wie sie dem menschlichen Auge erscheint. Die Formel berücksichtigt, dass unsere Augen empfindlicher auf grünes Licht als auf rotes oder blaues reagieren. Ein hellgrünes könnte sich sogar heller anfühlen als ein hellrotes, obwohl sie in RGB die gleiche numerische Helligkeit haben. Die WCAG-Formel korrigiert dies, wodurch ein Kontrastverhältnis entsteht, das die menschliche Wahrnehmung genau widerspiegelt.

Das Verhältnis reicht von 1:1 (identische Farben, kein Kontrast) bis 21:1 (reiner Schwarz auf reinem Weiß, maximaler Kontrast). Die meisten zugänglichen Designs liegen irgendwo in der Mitte. Ein Verhältnis von 4,5:1 ist die Mindestanforderung für normalen Text unter WCAG AA. 7:1 ist der strengere AAA-Standard. Diese Zahlen sind nicht willkürlich — sie basieren auf umfangrecher Forschung, was Menschen mit verschiedenen Sehbehinderungen tatsächlich unterscheiden können.

Außerhalb der Zugänglichkeit beeinflusst Kontrast alle. Hochkontrastige Designs sind auf kleinen Bildschirmen, in hellen Umgebungen und für Nutzer über 40, deren Augen natürlicherweise Kontrastempfindlichkeit verlieren, leichter lesbar. Niedrigkontrastiger Text mag auf einem kalibrierten Monitor des Designers elegant aussehen, wird aber auf einem Budget-Laptop, einem beschädigten Smartphone-Bildschirm oder einem Projektor in einem beleuchteten Raum unlesbar.

Wie man den Kontrastprüfer verwendet

Das Testen einer Farbkombination dauert Sekunden. Wählen Sie zwei Farben und erhalten Sie sofort ein Ergebnis.

1. Wählen Sie Ihre Vordergrundfarbe. Dies ist in der Regel Ihre Textfarbe. Klicken Sie auf das Farbverknüpfungselement, um den nativen Farbauswahler zu öffnen, oder geben Sie direkt eine HEX-Code in das Eingabefeld ein.
2. Wählen Sie Ihre Hintergrundfarbe. Dies ist die Oberfläche hinter Ihrem Text. Verwenden Sie denselben Farbauswahler oder geben Sie manuell einen HEX-Code ein.
3. Lesen Sie das Kontrastverhältnis. Das Tool zeigt das genaue Verhältnis hervorragend an — beispielsweise 7,23:1 — damit Sie genau wissen, wo Sie stehen.
4. Überprüfen Sie die WCAG-Konformität. Die Ergebnistabelle zeigt den Status „Bestanden“ oder „Nicht bestanden“ für:
   • Normaler Text bei WCAG AA (4,5:1) und AAA (7:1)
   • Großer Text bei WCAG AA (3:1) und AAA (4,5:1)
   • UI-Komponenten bei WCAG AA (3:1)
5. Vorschau der Farben im Kontext. Das Tool zeigt Beispiele für normalen Text und große Überschriften mit Ihrer gewählten Kombination an, damit Sie die tatsächliche Lesbarkeit visuell beurteilen können.
6. Wechseln Sie die Farben mit dem Kippschalter, um die umgekehrte Kombination zu testen — hellen Text auf dunktem Hintergrund anstelle von dunklem Text auf hellen.
7. Kopieren Sie das Verhältnis mit einem Klick in Ihre Zwischenablage für Dokumentation oder Design-System-Notizen.

Der gesamte Prozess ist instant. Ändern Sie eine beliebige Farbe und beobachten Sie, wie sich das Verhältnis, die Konformitätstabelle und die Vorschau in Echtzeit aktualisieren.

Verständnis von Kontrastverhältnissen

Verhältnisbereich	Zugänglichkeitsstufe	Was es bedeutet
1:1 bis 2,99:1	Fällt allen Standards nicht entsprechen	Der Text ist kaum vom Hintergrund unterscheidbar; für jeglichen lesbaren Inhalt unbrauchbar
3:1 bis 4,49:1	Bestanden bei AA für großen Text und UI	Eignet sich für große Überschriften (18pt+), Schaltflächen, Icons und Rahmen; für Textkörper nicht bestanden
4,5:1 bis 6,99:1	Bestanden bei AA für alle Texte	Erfüllt die Mindeststandard für normalen Textkörper; für die meisten Nutzer lesbar
7:1 bis 21:1	Bestanden bei AAA für normalen Text	Erweiterte Zugänglichkeit; für Nutzer mit erheblicher Sehbehinderung lesbar; ideal für langen Inhalt

Was zählt als „Großer Text“?

WCAG definiert großen Text als 18 Punkt (24 Pixel) oder größer, oder 14 Punkt fett (etwa 18,67 Pixel fett) oder größer. Überschriften, Call-to-Action-Schaltflächen und Hero-Text qualifizieren sich oft als großer Text, was bedeutet, dass sie mit einem niedrigeren Kontrastverhältnis als Textkörper bestehen können. Dennoch ist es weiterhin eine bewährte Praxis, überall mindestens 4,5:1 anzustreben, da dies Konsistenz gewährleistet und Ihr Design gegen das Vergrößern und Zoomen zukunftssicher macht.

Warum die Formel relative Helligkeit verwendet

Die WCAG-Kontrastformel ist nicht einfach ein Vergleich von RGB-Werten. Sie konvertiert zunächst jede Farbe in relative Helligkeit — eine Maßzahl für wahrgenommene Helligkeit, die grün stärker gewichtet als rot oder blau, da menschliche Augen am empfindlichsten auf grünes Licht reagieren. Deshalb können zwei Farben mit identischen Helligkeitswerten in RGB sehr unterschiedliche Kontrastverhältnisse erzeugen. Ein reines Rot (#FF0000) und ein reines Grün (#00FF00) haben beide maximale Intensität in einem Kanal, aber Grün erscheint menschlichen Augen deutlich heller, weshalb seine relative Helligkeit höher ist.

Schlüsselmerkmale

Merkmal	Was es tut	Warum es wichtig ist
Echtzeit-Kontrastberechnung	Berechnet das WCAG-Verhältnis instantan, während Sie Farben anpassen	Durchlaufen Sie Palette-Optionen und sehen Sie die Konformität sofort aktualisiert
WCAG AA & AAA-Test	Zeigt Bestanden/Nicht bestanden für normalen Text, großen Text und UI-Komponenten auf beiden Ebenen	Wissen Sie genau, welche Standards Sie erfüllen, ohne Schwellenwerte auswendig zu lernen
Live-Textvorschau	Rendert Beispieltextkörper und große Überschriften mit Ihren Farben	Beurteilen Sie Lesbarkeit visuell, nicht nur mathematisch
Farbwechsel	Wechselt Vordergrund und Hintergrund mit einem Klick	Testen Sie hell auf dunktem und dunkel auf hellen Varianten instantan
HEX-Eingabe	Akzeptiert direkte HEX-Codes für präzise Farbzuordnung	Übereinstimmung mit exakten Markenfarben aus Ihrem Design-System
Verhältnis kopieren	Kopiert das Kontrastverhältnis in die Zwischenablage	Dokumentieren Sie Zugänglichkeitskonformität in Design-Spezifikationen und Audits
Datenschutzorientiert	Alle Berechnungen werden in Ihrem Browser durchgeführt	Keine Designdaten werden an einen Server gesendet

Im Gegensatz zu grundlegenden Kontrasttools, die nur eine Zahl zeigen, stellt dieser Prüfer das Verhältnis in den Kontext. Sie sehen nicht nur, dass Ihre Kombination 4,2:1 erzielt, sondern auch, dass sie AA für Textkörper nicht bestanden hat, aber für großen Text bestanden hat — handlungsorientierte Informationen, die Ihnen helfen, zu entscheiden, ob Sie Ihren Text dunkler machen oder die Schriftgröße erhöhen sollen.

Reale Anwendungsfälle

Webdesigner, die zugängliche Schnittstellen erstellen Ein Designer erstellt eine Startseite mit dunkelblauem Hintergrund und hellgrauem Text. Die Kombination sieht auf seinem Monitor elegant aus, doch der Kontrastprüfer zeigt ein Verhältnis von nur 3,8:1 — was AA für Textkörper nicht erfüllt. Der Designer hellt den Text leicht auf, erreicht 4,6:1 und die Seite ist jetzt für Nutzer mit geringer Sehkraft lesbar, ohne den dunklen Ästhetik zu opfern.

Entwickler, die Design-Systeme implementieren Ein Entwickler verwaltet eine Komponentenbibliothek mit Dutzenden Farbtoken. Vor der Veröffentlichung eines neuen Themas führt er jede Text- und Hintergrundkombination durch den Kontrastprüfer. Frühes Erkennen von Fehlern verhindert Zugänglichkeitsfehler in der Produktion und vermeidet kostspielige Neugestaltung von Komponenten nach einer Prüfung.

Content Creator, die Dokumente formatieren Ein Marketer erstellt eine PDF-Anleitung mit farbigen Callout-Boxen und hervorgehobenem Text. Er verwendet den Kontrastprüfer, um sicherzustellen, dass jede Textfarbe auf jedem Hintergrund WCAG AA erfüllt. Dies gewährleistet, dass die PDF zugänglich ist, wenn sie in HTML konvertiert wird oder von Screen-Readern gelesen wird, und schützt die Organisation vor Zugänglichkeitsbeschwerden.

Produktmanager, die Zugänglichkeitsaudits durchführen Ein PM bereitet sich auf eine VPAT (Voluntary Product Accessibility Template)-Prüfung vor. Er verwendet den Kontrastprüfer, um jede Farbkombination in seiner Anwendung gegen WCAG-Standards zu testen und die Verhältnisse für jede dokumentiert. Dies erstellt eine Audit-Trail, der die Sorgfaltspflicht und Konformität demonstriert.

Bildungsanbieter, die Lernmaterialien erstellen Ein Lehrer erstellt einen Online-Kurs mit Folien, Tests und Leseinhalten. Er prüft jede Text- und Hintergrundkombination, um sicherzustellen, dass Studierende mit Sehbehinderungen gleichberechtigt teilnehmen können. Hochkontrast ist auch für Studierende nützlich, die Vorlesungen auf Smartphones oder Tablets in unterschiedlichen Lichtverhältnissen ansehen.

Mobile App-Designer Mobile Bildschirme werden überall angesehen — draußen in der Sonne, drinnen unter fluoreszenten Lichtern und im Bett mit aktiviertem Nachtmodus. Ein Kontrastprüfer hilft Designern, diese variablen Bedingungen zu berücksichtigen, indem er sicherstellt, dass Kombinationen genug Spielraum haben, um lesbar zu bleiben, wenn die Helligkeit niedrig ist, Bildschirme schmutzig sind oder Anti-Glare-Filter angewendet werden.

Tipps und bewährte Praktiken

• Streben Sie AAA an, wenn möglich. Obwohl AA der rechtliche Mindeststandard in den meisten Jurisdiktionen ist, bietet AAA eine bessere Erfahrung für alle. Wenn Ihre Markenfarben 7:1 ohne Konflikt erreichen können, verwenden Sie sie. Der kleine visuelle Kompromiss lohnt sich für den großen Zugänglichkeitsgewinn.
• Verlassen Sie sich nicht allein auf Farbe. Selbst mit perfektem Kontrast ist Farbe nicht für alle zugänglich. Farbenblinde Nutzer können Rot von Grün nicht unterscheiden. Paaren Sie Farbe immer mit Icons, Bezeichnungen, Mustern oder Text, um Bedeutung zu vermitteln.
• Testen Sie Ihre gesamte Palette. Ein Design-System kann zehn Textfarben und zehn Hintergrundfarben haben. Das sind hundert mögliche Kombinationen. Systematisch testen Sie jede Paarung — oder zumindest die häufigsten —, um Zugänglichkeitsfehler zu verhindern.
• Überprüfen Sie Fokuszustände und interaktive Elemente. Schaltflächen, Links, Formularfelder und Schalter benötigen mindestens ein Kontrastverhältnis von 3:1 gegenüber ihrer Umgebung. Eine Schaltfläche, die für Text bestanden hat, kann als UI-Komponente scheitern, wenn ihr Rand zu subtil ist.
• Berücksichtigen Sie Transparenz und Overlays. Wenn Ihr Text auf einem Bild oder einem halbtransparenten Overlay liegt, ist der effektive Hintergrund eine Farbmischung. Der Kontrastprüfer testet feste Farben, also müssen Sie für Overlays zunächst das gemischte Ergebnis berechnen oder konservativ testen.
• Testen Sie bei verschiedenen Zoomstufen. Nutzer mit geringer Sehkraft zoomen auf 200 Prozent oder mehr. Bei hohem Zoom erscheint der Text größer, was hilft, aber das relative Kontrastverhältnis bleibt gleich. Stellen Sie sicher, dass Ihre Verhältnisse stark genug sind, um unter Vergrößerung standzuhalten.
• Dokumentieren Sie Ihre Verhältnisse. Wenn Sie eine Farbpaarung finalisieren, notieren Sie ihr Kontrastverhältnis in Ihrer Design-System-Dokumentation. Dies hilft zukünftigen Designern und Entwicklern, Zugänglichkeit aufrechtzuerhalten, während das Produkt sich weiterentwickelt.

Häufig gestellte Fragen

Ist der Kontrastprüfer kostenlos zu verwenden?

Ja. Der Kontrastprüfer ist vollständig kostenlos, ohne Nutzungsbeschränkungen, Registrierung oder Werbung. Sie können so viele Farbkombinationen testen, wie Sie benötigen.

Was ist WCAG?

WCAG steht für Web Content Accessibility Guidelines. Es ist ein international anerkannter Standard, der von der W3C veröffentlicht wurde, der beschreibt, wie Webinhalte für Menschen mit Behinderungen zugänglich gemacht werden. WCAG 2.1 ist die aktuelle Version, und WCAG 2.2 fügt zusätzliche Kriterien hinzu. Die Richtlinien sind in drei Ebenen organisiert: A (Mindeststandard), AA (Standard) und AAA (Erweitert).

Welches Kontrastverhältnis benötige ich, um WCAG AA zu bestehen?

Für normalen Text (unter 18pt oder 14pt fett) benötigen Sie mindestens 4,5:1. Für großen Text (18pt oder größer, oder 14pt fett oder größer) und UI-Komponenten wie Schaltflächen und Formularfelder benötigen Sie mindestens 3:1.

Was ist der Unterschied zwischen WCAG AA und AAA?

AA ist die Standardkonformitätsstufe, die von den meisten Zugänglichkeitsgesetzen und -richtlinien weltweit gefordert wird, einschließlich des Section 508 in den USA und des Europäischen Zugänglichkeitsgesetzes. AAA ist eine erweiterte Stufe, die eine größere Zugänglichkeit bietet, aber nicht überall erforderlich ist und manchmal als zu streng für allgemeinen Webinhalten angesehen wird. Für AAA benötigt normaler Text ein Kontrastverhältnis von 7:1 und großer Text von 4,5:1.

Kann ich RGB- oder HSL-Farben testen?

Das Tool akzeptiert direkt HEX-Farbeingaben. Wenn Sie RGB- oder HSL-Werte haben, verwenden Sie zunächst unser Farbauswahler-Tool, um sie in HEX zu konvertieren. Geben Sie den HEX-Code in den Kontrastprüfer ein und testen Sie sofort.

Funktioniert dieses Tool auf mobilen Geräten?

Ja. Der Kontrastprüfer ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Die Farbauswahler, Vorschau-Texte und Ergebnistabelle sind für Touchscreens und kleinere Bildschirme optimiert.

Kann ich dies für Druckdesign verwenden?

Obwohl WCAG speziell für digitale Inhalte entwickelt wurde, gelten die Kontrastprinzipien auch für Druck. Ein Verhältnis von 4,5:1 oder höher gewährleistet in der Regel lesbaren Text in Druckwerken. Druckdesigner sollten jedoch auch die Tintenabdeckung, Papierqualität und Betrachtungsabstand zusätzlich zu digitalen Kontrastverhältnissen berücksichtigen.

Was passiert, wenn meine Markenfarben WCAG nicht erfüllen?

Wenn Ihre Markenfarben die erforderlichen Verhältnisse nicht erfüllen, haben Sie mehrere Optionen. Hellten oder verdunkelten Sie den Text leicht. Erhöhen Sie die Schriftgröße, damit der Text als „großer Text“ gilt, was ein niedrigeres Verhältnis erfordert. Fügen Sie einen Textschatten oder Umrandung hinzu, um den wahrgenommenen Kontrast zu erhöhen. Oder verwenden Sie die nicht konforme Farbe nur für dekorative Elemente und wählen Sie eine zugängliche Alternative für funktionellen Text.