Developer ToolsUI-Farben-Zugänglichkeitsprüfer
Prüfen Sie, ob UI-Farbkombinationen den WCAG-Zugänglichkeitsstandards entsprechen. Validieren Sie Kontrastverhältnisse für AA- und AAA-Konformität in Echtzeit.
Farbkombinations-Prüfer
Vorschau
Normaler Text (14px)
Großer Text (18px+)
WCAG-Richtlinien-Referenz
WCAG AA-Standard
- • Normaler Text: Mindest-Kontrastverhältnis 4,5:1
- • Großer Text (18px+ oder 14px+ fett): Minimum 3:1
- • Für die meisten gesetzlichen Konformitäten erforderlich
- • Deckt die meisten Zugänglichkeitsbedürfnisse ab
WCAG AAA Erweitert
- • Normaler Text: Mindest-Kontrastverhältnis 7:1
- • Großer Text: Minimum 4,5:1
- • Höchster Zugänglichkeitsstandard
- • Empfohlen für kritische Schnittstellen
Verwandte Tools
Über Dieses Tool
So Funktioniert Es
- Berechnet Kontrastverhältnisse zwischen Vordergrund- und Hintergrundfarben
- Bewertet die Einhaltung der WCAG 2.1 Zugänglichkeitsrichtlinien
- Testet Anforderungen für normale und große Textgröße
- Bietet Echtzeit-Vorschau von Farbkombinationen
- Unterstützt 3-stellige und 6-stellige Hex-Farbcodes
Häufige Anwendungsfälle
- UI/UX-Designer für zugängliche Farbschemata
- Entwickler zur Validierung von Interface-Farbauswahlen
- Zugänglichkeits-Auditoren zur Überprüfung von Konformitätsstandards
- Marken-Designer für inklusive Farbpaletten
- Web-Designer zur Erfüllung gesetzlicher Zugänglichkeitsanforderungen
Häufig Gestellte Fragen
Was ist Farb-Zugänglichkeit und warum ist sie wichtig?
Farb-Zugänglichkeit stellt sicher, dass Farbkombinationen ausreichend Kontrast für Menschen mit Sehbehinderungen bieten, einschließlich Farbenblindheit und Sehschwäche. Sie ist unverzichtbar, um Websites und Apps für alle nutzbar zu machen.
Was sind die WCAG AA- und AAA-Standards?
WCAG AA erfordert ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. AAA ist strenger und erfordert 7:1 für normalen Text und 4,5:1 für großen Text. AA ist der gesetzliche Standard für die meisten Konformitätsanforderungen.
Wie erkenne ich, ob meine Farbkombination Zugänglichkeitsstandards erfüllt?
Geben Sie Ihre Vordergrund- (Text) und Hintergrundfarben in das Tool ein. Es berechnet das Kontrastverhältnis und zeigt, ob es die AA- oder AAA-Standards für normalen und großen Text erfüllt.
Was gilt als "großer Text" in den Zugänglichkeitsrichtlinien?
Großer Text ist definiert als 18pt (24px) oder größer für regulären Text, oder 14pt (18,67px) oder größer für fetten Text. Diese Größen haben niedrigere Kontrastanforderungen (3:1 für AA, 4,5:1 für AAA).
Kann ich mehrere Farbkombinationen gleichzeitig testen?
Ja! Verwenden Sie die Schaltfläche "Zur Vergleichsliste hinzufügen", um Farbkombinationen zu speichern und mehrere Paare nebeneinander zu vergleichen. Das ist nützlich beim Entwerfen von Farbschemata.
Welche Farbformate unterstützt das Tool?
Das Tool unterstützt Hex-Farbcodes im 6-stelligen (#000000) und 3-stelligen (#000) Format. Sie können Farben manuell eingeben oder die Farbauswahl für visuelle Auswahl verwenden.
Warum haben einige visuell unterschiedliche Farben dasselbe Kontrastverhältnis?
Kontrastverhältnisse werden auf Basis der Luminanz (Helligkeit) berechnet, nicht des Farbtons. Farben mit gleicher Luminanz haben identische Kontrastverhältnisse.
Was tun, wenn meine Markenfarben die Zugänglichkeitsstandards nicht erfüllen?
Sie haben mehrere Möglichkeiten: die Helligkeit einer Farbe anpassen, einen Rahmen oder Umriss für Text hinzufügen, die Farben nur für großen Text verwenden oder sie für dekorative Elemente reservieren.
Gelten Zugänglichkeitsstandards für alle Website-Elemente?
Kontrastanforderungen gelten für Text, Textbilder und UI-Komponenten wie Schaltflächen und Formularfelder. Sie gelten nicht für dekorative Elemente, Logos oder inaktive/deaktivierte Komponenten.
Wie genau sind die Kontrastberechnungen?
Das Tool verwendet die offizielle WCAG 2.1-Formel zur Berechnung der relativen Luminanz und Kontrastverhältnisse. Die Berechnungen sind mathematisch präzise.
Kann ich dieses Tool für das Design mobiler Apps verwenden?
Absolut! Die WCAG-Richtlinien gelten für mobile Apps sowie für Websites. Viele mobile Plattformen (iOS, Android) verweisen auf WCAG-Standards in ihren Zugänglichkeitsrichtlinien.
Was, wenn ich Farben testen muss, die keine Hex-Codes sind?
Derzeit unterstützt das Tool Hex-Farbcodes. Für RGB, HSL oder andere Formate können Sie unser Color Picker Converter-Tool verwenden, um zuerst zwischen Formaten zu konvertieren.