Prüfe Farbkontrast gegen WCAG AA und AAA. Ein-Klick-Fixes, die bestehen — Normaltext, Großtext und UI-Komponenten.
Textfarbe (Vordergrund)
Hintergrundfarbe
—:1
Kontrastverhältnis
Vorschau — Text auf Hintergrund
Der schnelle Fuchs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Das ist Body-Text bei 14px, um Kleintext-Kontrast zu prüfen.
Button
Vorschau — getauscht
Der schnelle Fuchs
Gleicher Text und Hintergrund, getauscht. Manche Farbpaare funktionieren nur in eine Richtung.
Button
Schnellfixes — nächstgelegene passende Farben
Über WCAG-Kontrast
AA ist der gesetzliche Standard in den meisten Rechtsräumen: 4.5:1 für Normaltext, 3:1 für Großtext (18pt+ oder 14pt fett).
AAA ist "enhanced": 7:1 normal, 4.5:1 groß. Ziel das für Body-Text an, wenn du kannst.
UI-Komponenten (Buttons, Form-Ränder, Icons) brauchen 3:1 gegen ihre Nachbarfarbe — wie Großtext.
Achte auf farb-nur-Bedeutung. Kombinier Farbe mit einem Icon, einer Unterstreichung oder einem Label, damit auch farbenblinde Nutzer das Signal bekommen.
Apple HIG und Material verlangen beide min. 4.5:1 für Text in deiner App — das zu reißen ist ein bekannter Flag im App-Store-Accessibility-Review.
Brauchst du auch barrierefreie App-Screenshots?
LaunchShots bringt im Editor eingebaute Kontrasthinweise mit — probier es.