Hellgrauer Text auf Weiß kann im Figma-Mockup auf dem hochauflösenden Designer-Monitor "elegant" wirken — und für alle anderen auf dem Handy in der Sonne unlesbar sein. Genau dafür gibt es die WCAG (Web Content Accessibility Guidelines): damit das nicht dem individuellen Geschmack überlassen bleibt.
Was das Kontrastverhältnis eigentlich ist
Es ist eine Zahl zwischen 1:1 (identische Farben, kein Kontrast) und 21:1 (reines Schwarz auf reinem Weiß, das Maximum). Berechnet wird sie aus der relativen Leuchtdichte jeder Farbe — nicht einfach "Helligkeit subtrahieren": Die Formel berücksichtigt, dass das menschliche Auge Grün intensiver wahrnimmt als Blau, und gewichtet deshalb jeden Kanal unterschiedlich, bevor verglichen wird.
Die Mindestwerte, die WCAG 2.1 vorschreibt
| Stufe | Normaler Text | Großer Text (≥18pt oder ≥14pt fett) |
|---|---|---|
| AA (gesetzliches Minimum in vielen Ländern) | 4,5:1 | 3:1 |
| AAA (optimal) | 7:1 | 4,5:1 |
"Normaler Text" ist praktisch dein gesamter Inhalt: Absätze, Formular-Labels, kleiner Button-Text. Der niedrigere Schwellenwert (3:1) gilt nur für große Überschriften und großzügig bemessenen Fettdruck.
Die häufigsten Fehler
- Hellgraue Platzhalter in Eingabefeldern — liegen meist bei etwa 2,5:1, weit unter dem Minimum.
- Markentext auf Markenhintergrund — ein Firmenblau auf einem anderen Firmenblau erreicht fast nie 4,5:1.
- "Ghost"-Buttons mit Rahmen und Text in derselben Pastellfarbe — hübsch, unlesbar.
- Sich auf den Kontrast an einem kalibrierten P3-Designer-Monitor zu verlassen; der echte Nutzer sieht es auf einem billigen Bildschirm bei niedriger Helligkeit.
Wie man es behebt, ohne die Palette neu zu erfinden
Man muss die Markenpalette nicht verwerfen. Fast immer reicht es, die Helligkeit (den L-Kanal in HSL) der problematischen Farbe abzudunkeln oder aufzuhellen und dabei den Farbton beizubehalten — unser Farbmischer und der Farbwähler lassen dich HSL live anpassen, während du das resultierende Verhältnis prüfst.
Prüfe jede Kombination mit der WCAG-Kontrastprüfung: füge Text- und Hintergrundfarbe ein und du siehst das exakte Verhältnis und ob AA oder AAA erreicht wird, für normalen und großen Text. Falls du Variationen einer Grundfarbe brauchst, die die Markenidentität bewahren, erzeugt der Paletten-Generator analoge, komplementäre und monochromatische Schemata, die bereits mit einer guten Helligkeitsspanne konzipiert sind.