Warum Kontrast so wichtig ist

Rund 300 Millionen Menschen weltweit haben eine Form von Farbsehschwäche. Gutes Kontrastdesign ist nicht nur Ästhetik — in vielen Regionen ist es eine gesetzliche Anforderung. Der Referenzstandard ist WCAG 2.1:

  • Level AA: Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text.
  • Level AAA: 7:1 für normalen Text.

Häufige Fehler

Die häufigsten Probleme sind: Hellgrau auf Weiß (oft nur 1,5:1), bunte Schaltflächen mit weißem Text, die visuell gut wirken, aber AA nicht bestehen, sowie Farben, die im hellen Modus bestehen, im dunklen Modus aber scheitern.

Praktischer Workflow

  1. Hintergrundfarbe aufnehmen. Öffne Color Picker Camera: HEX RGB, richte die Kamera auf die Oberfläche und tippe, um den HEX-Wert sofort zu erhalten. Die App zeigt auch HSL an.
  2. Textfarbe auf dieselbe Weise aufnehmen.
  3. Das Paar in einem Kontrast-Checker prüfen — z. B. WebAIM Contrast Checker, das Accessibility-Panel in den DevTools oder das Contrast-Plugin in Figma.
  4. Helligkeit in HSL anpassen, bis das Verhältnis passt. H und S beibehalten, nur L verringern, um die Farbe abzudunkeln ohne ihre Identität zu ändern.

Warum HSL für Kontrastanpassungen ideal ist

RGB und HEX bieten keine intuitive Kontrolle über die Helligkeit. HSL trennt Farbton, Sättigung und Helligkeit. Color Picker Camera: HEX RGB zeigt HEX, RGB, HSL und CMYK gleichzeitig an — ohne manuelle Umrechnungen.

Praxisbeispiel

Ein mittelblauer Button (#4A90E2) mit weißem Text hat ein Kontrastverhältnis von ca. 3,1:1 — nicht ausreichend für AA. Ein dunkles Marineblau (#1A3A6B) erreicht 9,4:1 und übertrifft sogar AAA.

Hinweis zu WCAG 3.0 und APCA

Die nächste Version der Richtlinien führt APCA ein, ein nuancierteres Modell für Wahrnehmungskontrast. WCAG 2.1 AA bleibt der heute geltende Standard, aber ein Test gegen APCA lohnt sich für langfristige Projekte.

Laden Sie Color Picker Camera: HEX RGB kostenlos für iOS oder Android herunter — ohne Werbung, ohne Tracking und komplett offline nutzbar.