Funktionsleitfaden
Kontrastprüfung für Barrierefreiheit
Bevor eine Palette in ein Produkt geht, zeigt das Palettenlabor, welche Paare den WCAG-Kontrast für Text erfüllen, welche Farben bei Farbsehschwäche schwer zu unterscheiden sind und wie die Farben in einer echten UI wirken.
Pro In ColorSnapr Pro enthalten Aktualisiert:
Das Wichtigste
- Kontrastmatrix: jedes Paar Hintergrund × Text mit Verhältnis und Ergebnis AA / AA groß / AAA.
- Farbsehen-Konflikte: Paare, die bei Protanopie, Deuteranopie oder Tritanopie schwer zu unterscheiden sind.
- UI-Vorschau: deine Palette auf Buttons, Karten und Text angewendet.
- Weiche Verläufe, interpoliert in Oklab.
- Jede gespeicherte Farbe zeigt kostenlos auch ihren Kontrast zu weißem und schwarzem Text.
So funktioniert's
- 1 Öffne eine Palette und wähle Palettenlabor.
- 2 Sieh dir den Tab Barrierefreiheit an: umrandete Zellen bestehen AA für normalen Text.
- 3 Wechsle zu Vorschau oder Verlauf, passe Farben an und prüfe erneut.
Fragen
Welche WCAG-Schwellenwerte gelten?
4,5:1 für normalen Text (AA), 3:1 für großen Text (AA groß) und 7:1 für AAA, gemäß WCAG 2.
Ist das Palettenlabor kostenlos?
Das Palettenlabor gehört zu ColorSnapr Pro. Der Kontrast zu weißem und schwarzem Text ist für jede gespeicherte Farbe kostenlos.
Probier es auf deinem Handy aus – ColorSnapr ist kostenlos.