WCAG-Farbkontrast für Designer
Die 4.5:1-Regel, Kontrastverhältnis-Berechnung und kostenlose Tools zur Überprüfung jedes Farbpaares.
Wenn Ihr Text den WCAG-AA-Kontrast nicht erfüllt, können schätzungsweise 285 Millionen sehbehinderte Menschen ihn nicht lesen. Außerdem bewegen Sie sich in der EU und den USA auf zunehmend unsicherem rechtlichem Terrain. Die gute Nachricht: Die Regel ist einfach.
Die 4.5:1-Regel
Fließtext muss einen Kontrastwert von mindestens 4.5:1 zu seinem Hintergrund aufweisen, um WCAG AA zu bestehen. Großer Text (24px+ normal oder 18px+ fett) hat eine niedrigere Schwelle von 3:1.
Für AAA-Konformität: 7:1 für Fließtext, 4.5:1 für großen Text.
Wie das Kontrastverhältnis berechnet wird
WCAG verwendet relative Leuchtdichte – wandeln Sie jede Farbe in einen Leuchtdichtewert (0 = schwarz, 1 = weiß) um, indem Sie eine bestimmte Formel anwenden, und berechnen Sie dann (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere Farbe ist.
Sie müssen die Mathematik nicht selbst durchführen – nutzen Sie unseren kostenlosen Kontrastprüfer, um zwei beliebige Farben einzugeben und das Verhältnis zu sehen.
Häufige Fehlerfälle
- Hellgrau auf Weiß – #999 auf #fff = 2.85 (scheitert). #767676 auf #fff = 4.54 (besteht).
- Weiß auf Gelb – scheitert fast immer. Verwenden Sie dunklen Text auf Gelb.
- Farbige Links im Fließtext – die meisten blauen Links bestehen auf Weiß, scheitern jedoch auf Hellgrau. Testen Sie den tatsächlichen umgebenden Hintergrund.
- Markenfarben, die toll aussehen – sie scheitern oft. Fügen Sie einen cremeweißen Hintergrund hinzu oder verdunkeln Sie den Text.
Auswahl zugänglicher Farbpaare
Drei zuverlässige Muster:
- Dunkel auf Hell – #1f2937 auf #fff = 14:1 (perfekt).
- Weiß auf Dunkel – #fff auf #1f2937 = 14:1 (perfekt).
- Dunkel auf Akzent – #1f2937 auf #fbbf24 = 9:1 (perfekt für Buttons).
Über Text hinaus
WCAG 2.1 erfordert außerdem 3:1 für Nicht-Text-Elemente (Buttons, Fokusringe, Formularränder). Der Prüfer behandelt beide.
Wallpapers, die Ihren Widgets nicht in die Quere kommen
Wenn Sie als Designer Hintergrundbilder hinter Uhr-Widgets und Benachrichtigungen platzieren, wählen Sie Hintergrundbilder mit einem Kontrast unter 5:1 in den Widget-Zonen. Unser Gaussian blur Tool kann unruhige Bereiche jedes Hintergrundbilds weicher machen, um die Widget-Lesbarkeit zu verbessern.
Probieren Sie unsere kostenlosen Tools aus
Die meisten dieser Anleitungen sind mit einem praktischen Tool verbunden, das Sie sofort nutzen können – keine Anmeldung für die erste Nutzung erforderlich:
- Bildgrößenänderung – pixelgenaues Verkleinern + Vergrößern.
- In WebP konvertieren – 30-50 % kleinere Dateien als JPG.
- Hintergrundentferner – Ausschneiden mit einem Klick, transparentes PNG.
- Favicon-Generator – alle Browser-Größen aus einer Quelle.
- Social-Media-Größenänderung – die genauen Abmessungen jeder Plattform.
- Stapelverarbeitung – wenden Sie jedes Tool auf bis zu 200 Bilder gleichzeitig an.
Durchstöbern Sie den vollständigen Tool-Katalog.
