Farbkontrast für Text, Buttons und Icons

Warum Kontrast wichtig ist

Blasser Text kostet Leser. Menschen mit eingeschränktem Sehen, ältere Leser und alle, die bei hellem Licht auf ein Handy schauen, brauchen einen deutlichen Unterschied zwischen Text und Hintergrund. Die Web Content Accessibility Guidelines (WCAG) des W3C legen deshalb Mindestwerte fest: für Text, für Bedienelemente wie Buttons und Eingabefelder und für Icons und Grafiken. Die Werte lassen sich messen und vor dem Start prüfen.

So funktioniert das Kontrastverhältnis

Das Kontrastverhältnis vergleicht, wie hell zwei Farben sind. Die WCAG schauen dabei nicht auf den Farbton, sondern auf die relative Leuchtdichte: einen Wert zwischen 0 für das dunkelste Schwarz und 1 für das hellste Weiß. Die drei Kanäle Rot, Grün und Blau werden umgerechnet und gewichtet: Grün zählt am meisten, Rot weniger und Blau am wenigsten. Das Verhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die Leuchtdichte der helleren Farbe ist. Das Ergebnis liegt zwischen 1:1 für zwei gleiche Farben und 21:1 für Schwarz auf Weiß.

Zwei Regeln des W3C zählen in der Praxis. Erstens wird nicht gerundet: Ein Verhältnis von 4,499:1 erreicht die Grenze von 4,5:1 nicht. Zweitens wird der Kontrast gegen den Hintergrund gemessen, der für den Text festgelegt ist. Legt eine Seite nur eine Textfarbe fest und keine Hintergrundfarbe, wertet das W3C das als Fehler, weil der Standardhintergrund des Besuchers unbekannt ist. Leg immer beide Farben fest.

Die drei Erfolgskriterien

• 1.4.3 Kontrast (Minimum), Stufe AA: Text und Bilder von Text brauchen mindestens 4,5:1, großer Text mindestens 3:1.
• 1.4.6 Kontrast (erhöht), Stufe AAA: Text braucht mindestens 7:1, großer Text mindestens 4,5:1. Sie ist strenger und hilft vor allem bei langen Texten.
• 1.4.11 Nicht-Text-Kontrast, Stufe AA: mindestens 3:1 gegen die angrenzenden Farben, für alles, was du sehen musst, um ein Bedienelement und seinen Zustand zu erkennen (etwa den Rahmen eines Eingabefelds oder eine Fokusanzeige), und für die Teile von Grafiken, die du zum Verstehen brauchst, etwa Icons oder Linien in einem Diagramm.

Was als großer Text zählt

Großer Text hat mindestens 18 Punkt oder mindestens 14 Punkt in Fett. Das W3C rechnet das um in etwa 24 Pixel und etwa 18,5 Pixel in Fett. Großer Text darf weniger Kontrast haben, weil die Buchstaben größer und ihre Striche breiter sind. Vorsicht bei dünnen Schriften: Laut W3C kann die Kantenglättung dünne oder ungewöhnliche Schriften blasser wirken lassen als ihre festgelegte Farbe. Es empfiehlt dickere Schriften oder ein Farbpaar, das klar über dem Mindestwert liegt.

Was nicht bestehen muss

• Inaktive Bedienelemente, etwa ein ausgegrauter Button.
• Reine Dekoration und Text, den niemand sehen kann.
• Text, der Teil eines Logos oder Markennamens ist.
• Beiläufiger Text in einem Bild mit viel anderem Inhalt, etwa ein Straßenschild auf einem Foto.

Typische Fehler

• Hellgrau auf Weiß. Grau für Datum oder Nebentext ist oft zu blass: #999999 auf Weiß erreicht nur 2,84:1. Das hellste reine Grau, das AA für normalen Text auf Weiß besteht, ist #767676 mit 4,54:1.
• Text auf Bildern. Der Kontrast ändert sich mit jeder Stelle des Fotos. Das W3C führt Hintergrundbilder ohne ausreichenden Kontrast als Fehler auf (F83). Setz den Text auf eine feste Fläche, dunkle das Bild ab oder stell den Text daneben. Prüf die hellste Stelle hinter dem Text.
• Platzhaltertext. Der graue Hinweis in einem leeren Eingabefeld ist Text, und 1.4.3 gilt auch für ihn. Ein helles Grau wie #9ca3af auf Weiß erreicht nur 2,53:1. Ein Platzhalter ersetzt außerdem keine sichtbare Beschriftung.
• Hover- und Fokus-Zustände. Text, der bei Hover oder Tastaturfokus erscheint oder sich ändert, muss dieselben Werte erreichen. Ein Hover-Effekt darf den Kontrast eines Bedienelements nicht senken und die Fokusanzeige nicht schwächen. Eine selbst gestaltete Fokusanzeige braucht 3:1 gegen den Hintergrund daneben.
• Weißer Text auf hellen Markenfarben. Orange, gelbe, hellgrüne oder türkise Buttons mit weißem Text bestehen oft nicht: Weiß auf #ff6600 erreicht 2,93:1.
• Blasse Rahmen und Icons. Ist der Rahmen das Einzige, was zeigt, wo ein Eingabefeld ist, braucht er 3:1: #cccccc auf Weiß hat 1,60:1. Auch Icons, die ohne Text eine Bedeutung tragen, etwa ein Menüpfeil oder ein Schließen-Symbol, brauchen 3:1.
• Nur ein Farbschema geprüft. Hat deine Website einen dunklen Modus, prüf dessen Farbpaare getrennt. Eine Farbe, die auf Weiß funktioniert, kann auf dunklem Grund durchfallen.

Eine Markenpalette anpassen, ohne die Marke zu verlieren

1. 1Schreib jede Farbe mit ihrer Rolle auf: Text, Hintergrund, Akzent oder Button, Rahmen. Viele Probleme beginnen, wenn eine Farbe alles übernimmt.
2. 2Behalte die Markenfarbe dort, wo die Regeln leichter zu erfüllen sind oder nicht gelten: im Logo, auf großen Flächen, als Dekoration und für große Überschriften.
3. 3Nimm für Text und kleine Elemente einen dunkleren oder helleren Ton desselben Farbtons. Ändert sich nur die Helligkeit, bleibt die Farbe erkennbar: Weißer Text auf #c74f00, einem dunkleren Orange, erreicht 4,61:1.
4. 4Oder tausch die Textfarbe. Dunkler Text auf einer hellen Markenfarbe funktioniert oft besser als Weiß: #1a1a1a auf #ff6600 erreicht 5,92:1.
5. 5Leg ein Grau für Nebentext fest, das besteht, zum Beispiel #767676 auf Weiß, und nutz es überall statt mehrerer blasser Grautöne.
6. 6Prüf jeden Zustand: normal, Hover, Fokus, Fehler und dunkler Modus. Speichere die fertigen Farben als Variablen im Stylesheet, damit niemand wieder eine blasse Farbe wählt.

Farben mit Do4U prüfen

Das Werkzeug Farbkontrast prüfen rechnet diese Werte für deine eigenen Farben. Du gibst deine Farben ein, eine je Zeile, jede mit einer Rolle: Text, Hintergrund, Akzent (zum Beispiel ein Button) oder Rahmen. Der Code prüft jedes sinnvolle Paar gegen AA und AAA für normalen und großen Text und gegen 3:1 für Rahmen, Icons und Button-Flächen, ohne aufzurunden. Für jedes Paar, das nicht besteht, bekommst du die nächste Farbe, die besteht, einmal dunkler und einmal heller, im selben Farbton. Do4U baut auch eine angepasste Palette, prüft sie noch einmal als Ganzes und exportiert sie als CSS-Variablen, SCSS oder JSON. Alles läuft im Code, ohne KI, und ist kostenlos.

Die Prüfung kennt nur die Farbpaare, die du eingibst. Schriftgrößen, Bilder hinter Text, Transparenz sowie Hover- und Fokus-Zustände sieht sie nicht, prüf deshalb auch die fertigen Seiten. Do4U baut den Entwurf, du prüfst und entscheidest.