Farbkontrast-Prüfer
Prüfe, ob deine Farbkombination die WCAG-Barrierefreiheitsstandards erfüllt.
Über Farbkontrast-Prüfer
Der GuruAlpha Farbkontrast-Prüfer misst das Kontrastverhältnis zwischen Vorder- und Hintergrundfarben gemäß den WCAG-Standards (Web Content Accessibility Guidelines). Geben Sie zwei beliebige Farben ein, und das Werkzeug berechnet ihr Kontrastverhältnis und teilt Ihnen mit, ob die Kombination die Barrierefreiheitsstandards AA oder AAA für normalen und großen Text erfüllt.
Barrierefreiheit im Web ist sowohl ein moralisches Gebot als auch eine rechtliche Anforderung. Die WCAG-2.1-Richtlinien legen Mindestkontrastverhältnisse fest, um sicherzustellen, dass Text für Menschen mit Sehbeeinträchtigungen lesbar ist, einschließlich Farbenblindheit, Sehschwäche und altersbedingtem Sehverlust. Der Kontrastprüfer macht die Einhaltung mühelos, indem er sofortiges Feedback zu Ihren Farbentscheidungen liefert.
Das Werkzeug berechnet Kontrastverhältnisse mithilfe der in WCAG 2.1 angegebenen Formel für die relative Leuchtdichte. Ein Verhältnis von 1:1 bedeutet keinen Kontrast (gleiche Farbe). Ein Verhältnis von 21:1 ist maximaler Kontrast (Schwarz auf Weiß). Die WCAG-Anforderungen lauten: AA normaler Text erfordert 4.5:1, AA großer Text erfordert 3:1, AAA normaler Text erfordert 7:1 und AAA großer Text erfordert 4.5:1. Das Werkzeug zeigt deutlich an, ob Ihre Farbkombination jeden Schwellenwert erfüllt.
Die visuelle Vorschau zeigt Ihre Textfarbe auf der Hintergrundfarbe und gibt Ihnen einen realen Eindruck der Lesbarkeit. Die Vorschau enthält Textproben in normaler (16px) und großer (24px+) Größe, da unterschiedliche Größen unterschiedliche WCAG-Anforderungen haben. Die Bestanden/Nicht-bestanden-Anzeigen werden in Echtzeit aktualisiert, während Sie die Farben anpassen.
Für Webentwickler und Designer ist der Kontrastprüfer unverzichtbar, um sicherzustellen, dass Websites für alle Nutzer zugänglich sind. Er fügt sich nahtlos in den Design-Workflow ein: Farben auswählen, Kontrast prüfen, bei Bedarf anpassen und mit der Gewissheit fortfahren, dass Ihr Text lesbar ist.
Hauptfunktionen von Farbkontrast-Prüfer
- Berechnung des Kontrastverhältnisses zwischen zwei beliebigen Farben
- Prüfung der WCAG-AA- und -AAA-Konformität
- Schwellenwerte für normalen Text (4.5:1) und großen Text (3:1)
- Live-Vorschau des Textes auf dem Hintergrund
- Vorgeschlagene Farbanpassungen zur Einhaltung der Standards
- Unterstützung für HEX-, RGB- und HSL-Eingabe
- Funktioniert auf allen Geräten
- Keine Anmeldung erforderlich
So verwendest du Farbkontrast-Prüfer
- Öffnen Sie den Kontrastprüfer auf GuruAlpha.
- Geben Sie die Vordergrundfarbe (Text) ein oder wählen Sie sie aus.
- Geben Sie die Hintergrundfarbe ein oder wählen Sie sie aus.
- Sehen Sie sich das Kontrastverhältnis und den WCAG-Konformitätsstatus an.
- Prüfen Sie die Anforderungen für normalen und großen Text.
- Passen Sie die Farben an, wenn die Kombination nicht besteht.
- Verwenden Sie die vorgeschlagenen Anpassungen, um AA oder AAA zu erfüllen.
Tipps zur Nutzung von Farbkontrast-Prüfer
- AA-Konformität (4.5:1) ist das Minimum für öffentliche Websites.
- AAA-Konformität (7:1) ist für maximale Barrierefreiheit vorzuziehen.
- Großer Text (18px fett oder 24px normal) hat geringere Kontrastanforderungen.
- Verlassen Sie sich nicht allein auf Farbe zur Informationsvermittlung – fügen Sie Textbeschriftungen oder Muster hinzu.
- Testen Sie mit Farbenblindheits-Simulatoren zur zusätzlichen Überprüfung der Barrierefreiheit.
Häufig gestellte Fragen zu Farbkontrast-Prüfer
Was ist WCAG?
WCAG (Web Content Accessibility Guidelines) ist der internationale Standard für Web-Barrierefreiheit. Er definiert Anforderungen, um Inhalte für Menschen mit Behinderungen zugänglich zu machen.
Welches Kontrastverhältnis benötige ich?
AA normaler Text: 4.5:1. AA großer Text: 3:1. AAA normaler Text: 7:1. AAA großer Text: 4.5:1. Streben Sie mindestens AA-Konformität an.
Was gilt als "großer Text"?
18px (24pt) normale Schriftstärke oder 14px (18.66pt) fette Schriftstärke. Großer Text hat geringere Kontrastanforderungen, weil größere Zeichen leichter zu lesen sind.
Prüft dies auch Nicht-Text-Elemente?
Das Werkzeug konzentriert sich auf Textkontrast. WCAG verlangt auch 3:1 Kontrast für Nicht-Text-UI-Komponenten, die Sie mit demselben Werkzeug manuell prüfen können.