Farbkontrast-Prüfer
Überprüfen Sie Farbkontrastverhältnisse für die WCAG-Barrierefreiheitskonformität. Testen Sie Vordergrund- und Hintergrundfarb-Kombinationen, um sicherzustellen, dass Ihre Designs für alle Benutzer zugänglich sind.
Live Preview
Sample Text
So sieht Ihr Text mit der ausgewählten Farbkombination aus.
Kontrastverhältnis
14.18
Excellent
Kopiert Verhältnis, Farben und WCAG-Ergebnisse
WCAG-Konformität
Min. ratio: 4.5:1
Regular text under 18pt / 14pt bold
Min. ratio: 7:1
Enhanced contrast for regular text
Min. ratio: 3:1
Text 18pt+ or 14pt+ bold
Min. ratio: 4.5:1
Enhanced contrast for large text
Min. ratio: 3:1
Icons, borders, form controls
Min. ratio: 3:1
Charts, graphs, meaningful graphics
Preset Combinations
Inhaltsverzeichnis
Was ist Farbkontrast?
Farbkontrast bezieht sich auf den Unterschied in der Luminanz (Helligkeit) zwischen zwei Farben. Wenn Text auf einem Hintergrund platziert wird, bestimmt das Kontrastverhältnis, wie leicht der Text von seinem Hintergrund unterschieden werden kann. Ein höheres Kontrastverhältnis bedeutet bessere Sichtbarkeit und Lesbarkeit.
Das Kontrastverhältnis wird mit einer Formel berechnet, die vom World Wide Web Consortium (W3C) als Teil der Web Content Accessibility Guidelines (WCAG) definiert wurde. Diese Formel vergleicht die relative Luminanz zweier Farben und erzeugt ein Verhältnis von 1:1 (kein Kontrast, identische Farben) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß oder umgekehrt).
Das Verstehen und Testen des Farbkontrastes ist wesentlich für die Erstellung zugänglicher Websites und Anwendungen, die von jedem genutzt werden können, einschließlich Menschen mit Sehbehinderungen.
WCAG-Richtlinien erklärt
Die Web Content Accessibility Guidelines (WCAG) definieren spezifische Kontrastverhältnisanforderungen für verschiedene Inhaltstypen. Diese Richtlinien sind in zwei Konformitätsstufen organisiert: AA (Minimum) und AAA (Erweitert).
| Inhaltstyp | Stufe AA | Stufe AAA |
|---|---|---|
| Normaler Text (unter 18pt / 14pt fett) | 4.5:1 | 7:1 |
| Großer Text (18pt+ / 14pt+ fett) | 3:1 | 4.5:1 |
| UI-Komponenten & Grafiken | 3:1 | N/A |
Stufe AA (Minimum)
Stufe AA ist der Basisstandard, den die meisten Organisationen anstreben. Sie stellt sicher, dass Inhalte für Benutzer mit mäßig schlechtem Sehvermögen lesbar sind, was einen erheblichen Teil der Bevölkerung ausmacht. Die meisten rechtlichen Barrierefreiheitsanforderungen beziehen sich auf WCAG 2.1 Stufe AA.
Stufe AAA (Erweitert)
Stufe AAA bietet verbesserte Barrierefreiheit und wird für Benutzer mit stärkeren Sehbehinderungen empfohlen. Obwohl die Erfüllung von AAA für alle Inhalte nicht immer machbar ist, ist es für kritische Inhalte wie die primäre Navigation und wichtigen Text vorteilhaft.
Warum Kontrast wichtig ist
Guter Farbkontrast ist aus mehreren Gründen wichtig:
- Sehbehinderungen: Etwa 1 von 12 Männern und 1 von 200 Frauen haben irgendeine Form von Farbsehschwäche. Angemessener Kontrast stellt sicher, dass Inhalte unabhängig von der Farbwahrnehmung lesbar sind.
- Alternde Augen: Mit zunehmendem Alter nimmt die Fähigkeit der Augen, Farben zu unterscheiden und Kontrast wahrzunehmen, ab. Guter Kontrast hilft, die Lesbarkeit für ältere Benutzer zu erhalten.
- Umgebungsbedingungen: Bildschirmblendung, helles Sonnenlicht und Bedingungen mit wenig Licht beeinflussen alle, wie Farben erscheinen. Text mit hohem Kontrast bleibt unter verschiedenen Bedingungen lesbar.
- Rechtliche Konformität: Viele Länder haben Gesetze, die vorschreiben, dass Websites Barrierefreiheitsstandards erfüllen müssen. Der Americans with Disabilities Act (ADA) und ähnliche Gesetze verweisen oft auf WCAG-Richtlinien.
- Bessere UX für alle: Text mit hohem Kontrast ist für alle Benutzer einfacher und schneller zu lesen, reduziert die Augenbelastung und verbessert die gesamte Benutzererfahrung.
- SEO-Vorteile: Suchmaschinen berücksichtigen Barrierefreiheit zunehmend als Rankingfaktor, wodurch barrierefreies Design auch für die Sichtbarkeit vorteilhaft ist.
So verwenden Sie dieses Tool
1. Geben Sie Ihre Farben ein
Verwenden Sie die Farbauswähler oder geben Sie Hex-Farbcodes direkt ein. Die Vordergrundfarbe repräsentiert Ihre Textfarbe, während die Hintergrundfarbe die Oberfläche hinter dem Text repräsentiert.
2. Überprüfen Sie die Ergebnisse
Das Tool berechnet sofort das Kontrastverhältnis und zeigt Ihnen, welche WCAG-Konformitätsstufen Ihre Farbkombination besteht. Suchen Sie nach grünen "BESTANDEN"-Abzeichen zur Bestätigung der Barrierefreiheit.
3. Verwenden Sie die Vorschau
Der Live-Vorschaubereich zeigt genau, wie Ihr Text auf dem Hintergrund erscheinen wird. Dies hilft Ihnen, visuelle Urteile neben dem numerischen Verhältnis zu treffen.
4. Wenden Sie Vorschläge an
Wenn Ihre Kombination die WCAG-Anforderungen nicht erfüllt, schlägt das Tool angepasste Farben vor, die das Mindestkontrastverhältnis erfüllen und dabei Ihrer ursprünglichen Wahl nahekommen.
Best Practices
Früh und oft testen
Überprüfen Sie den Farbkontrast in der Designphase, nicht nach der Entwicklung. Es ist viel einfacher, Farben in Mockups anzupassen als implementierte Schnittstellen zu refaktorisieren.
Nicht nur auf Farbe verlassen
Verwenden Sie zusätzliche visuelle Hinweise wie Icons, Unterstreichungen oder Muster, um Informationen zu vermitteln. Dies hilft Benutzern, die möglicherweise Schwierigkeiten haben, bestimmte Farben zu unterscheiden.
Alle Zustände berücksichtigen
Testen Sie den Kontrast für alle interaktiven Zustände: Hover-, Fokus-, aktive und deaktivierte Zustände sollten alle angemessene Kontrastverhältnisse aufrechterhalten.
Auf Textgröße achten
Denken Sie daran, dass großer Text (18pt+ oder 14pt+ fett) niedrigere Kontrastanforderungen hat. Nutzen Sie dies für Überschriften zu Ihrem Vorteil, während Sie sicherstellen, dass Fließtext strengeren Standards entspricht.
Ihr Farbsystem dokumentieren
Erstellen und pflegen Sie eine dokumentierte Farbpalette mit genehmigten Kombinationen. Dies gewährleistet Konsistenz in Ihrem Projekt und beschleunigt zukünftige Designentscheidungen.
Häufig gestellte Fragen
Stufe AA ist der Mindeststandard, den die meisten Organisationen erfüllen sollten. Sie erfordert ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Stufe AAA ist verbesserte Barrierefreiheit und erfordert 7:1 für normalen Text und 4,5:1 für großen Text. Während AAA ideal ist, ist AA-Konformität typischerweise für rechtliche Anforderungen ausreichend und deckt die meisten Benutzer mit Sehbehinderungen ab.
Großer Text ist definiert als Text mit mindestens 18 Punkten (24px) bei normalem Gewicht oder mindestens 14 Punkten (ungefähr 18,5px) in fett. Dies umfasst die meisten Überschriften und Anzeigetext. Großer Text hat niedrigere Kontrastanforderungen, da seine Größe ihn von Natur aus lesbarer macht.
Dieses Tool testet derzeit nur solide (opake) Farben. Für transparente Farben müssten Sie die effektive Farbe berechnen, nachdem sie auf ihrem Hintergrund zusammengesetzt wurde. Die endgültige, gerenderte Farbe ist das, was für Kontrasttests zählt.
Das Verhältnis 4,5:1 wurde durch umfangreiche Forschung als ausreichend Kontrast für Benutzer mit mäßig schlechtem Sehvermögen (ungefähr 20/40 Sehvermögen) bestimmt. Dieses Niveau kompensiert den Kontrastsensitivitätsverlust, der mit typischen Sehbehinderungen und dem Altern einhergeht.
Konzentrieren Sie sich auf das Testen von Kombinationen, wo Text erscheint: Fließtext auf Hintergründen, Schaltflächen, Formularbeschriftungen, Navigationselemente und jeglichen bedeutungsvollen Text. Dekorative Elemente ohne Text erfordern keine Kontrasttests. Das Erstellen einer dokumentierten Farbpalette mit vorab genehmigten Kombinationen kann diesen Prozess optimieren.
Ja, aber Sie müssen sicherstellen, dass der Text gegen alle Teile des Verlaufs, den er überlagert, angemessenen Kontrast aufweist. Testen Sie gegen die hellsten und dunkelsten Bereiche des Verlaufs. Wenn der Kontrast an irgendeinem Punkt scheitert, erwägen Sie, eine einfarbige Hintergrundüberlagerung hinter dem Text hinzuzufügen.
Text über Bildern ist herausfordernd, weil der Hintergrund variiert. Häufige Lösungen umfassen die Verwendung einer halbtransparenten Überlagerung, Textschatten oder die Sicherstellung, dass der Text in einem Bereich einheitlicher Farbe liegt. Testen Sie immer das Worst-Case-Szenario (niedrigster Kontrastpunkt), wenn Text variable Hintergründe überlagert.
Während maximaler Kontrast (21:1, reines Schwarz auf reinem Weiß) technisch zugänglich ist, empfinden einige Benutzer mit Legasthenie oder visueller Sensitivität ihn als hart. Erwägen Sie die Verwendung von gebrochenen Weißtönen (#F5F5F5) oder sehr dunkelgrauen Text (#1A1A1A) anstelle von reinen Extremen für Fließtext, während Sie weiterhin exzellente Kontrastverhältnisse aufrechterhalten.