Farbe und Typografie
Farben und Kontrast im Webdesign
Wie Kontrastverhältnisse berechnet werden, welche Werte die WCAG verlangen und wie Sie eine Markenfarbe so anpassen, dass sie den Test besteht, ohne ihren Charakter zu verlieren.
· Redaktion websitefun.de
Ein hellgraues „Weiterlesen“ auf weißem Grund sieht auf einem guten Monitor im abgedunkelten Raum elegant aus. Auf einem Handy in der Mittagssonne ist es schlicht nicht da. Genau deshalb gibt es für Kontrast messbare Grenzwerte statt Geschmacksurteile.
Wie das Kontrastverhältnis entsteht
Das Verhältnis vergleicht die relative Leuchtdichte zweier Farben. Leuchtdichte ist nicht dasselbe wie Helligkeit im Farbwähler: Sie gewichtet die drei Kanäle danach, wie empfindlich das Auge dafür ist. Grün zählt am stärksten, Blau am schwächsten.
Aus den beiden Werten ergibt sich eine Zahl zwischen 1 zu 1 (identische Farben) und 21 zu 1 (Schwarz auf Weiß). Dass Blau kaum zur Leuchtdichte beiträgt, erklärt eine Beobachtung, die viele überrascht: Ein sattes Blau wirkt kräftig, hat auf Weiß aber oft weniger Kontrast als ein deutlich blasser wirkendes Grau.
Nachrechnen können Sie das für Ihre eigenen Farben mit Farbpalette und Kontrastprüfer.
Die Grenzwerte
| Wert | Gilt für | Stufe |
|---|---|---|
| 3 : 1 | Text ab 24 px oder ab 19 px fett | AA, große Schrift |
| 3 : 1 | Rahmen von Bedienelementen, Icons mit Bedeutung | AA, Nicht-Text |
| 4,5 : 1 | Normaler Fließtext, Links, Beschriftungen | AA |
| 7 : 1 | Normaler Fließtext | AAA |
Für die meisten Projekte ist 4,5 zu 1 die Zahl, an der man sich misst. Seit dem Barrierefreiheitsstärkungsgesetz gilt sie für viele gewerbliche Websites in Deutschland nicht mehr nur als gute Praxis.
Beachten Sie die Ausnahme für große Schrift: Sie beginnt erst ab 24 Pixel, nicht schon bei einer Überschrift in 20 Pixel. Und „fett“ heißt Schriftstärke 700, nicht 600.
Wenn die Markenfarbe durchfällt
Das ist der Regelfall, nicht die Ausnahme. Markenfarben werden für Logo und Druck entwickelt, nicht für Fließtext auf Weiß. Ein kräftiges Mittelblau, ein sattes Grün oder ein warmes Orange landen typischerweise zwischen 2,5 und 3,5 zu 1.
Die Lösung ist fast immer dieselbe: zwei Abstufungen derselben Farbe.
- Die Markenfarbe bleibt, wo sie unkritisch ist: große Flächen, Hintergründe von Sektionen, dekorative Elemente, sehr große Überschriften.
- Eine abgedunkelte Variante übernimmt alles, was Text ist: Links, Beschriftungen, Text auf Schaltflächen.
Wichtig ist, beim Abdunkeln den Farbton zu halten. Wenn alle drei Farbkanäle mit demselben Faktor sinken, bleibt der Ton erhalten und nur die Helligkeit fällt – die Farbe wirkt weiterhin wie dieselbe Marke. Genau das macht die Schaltfläche „Textfarbe abdunkeln“ im Kontrastprüfer.
Ein Beispiel aus dieser Seite: Das Violett #494bcb erreicht auf Weiß 6,66 zu 1 und trägt damit Text und Schaltflächen. Das hellere #8a8ac6 aus derselben Familie kommt nur auf 3,22 zu 1 – es ist hier ausschließlich Dekoration und wird nie als Textfarbe eingesetzt.
Die Kombinationen, die immer vergessen werden
- Linkfarbe auf der getönten Sektion. Sie besteht auf Weiß mit 4,6 zu 1 und fällt auf dem hellgrauen Abschnitt auf 4,3 zu 1 – knapp durch.
- Weiße Schrift auf der Markenfarbe. Wird selten gemessen, weil die Schaltfläche „kräftig genug“ aussieht.
- Platzhaltertext im Formular. Fast immer zu hell, und er trägt oft die einzige Erklärung, was ins Feld gehört. Besser: eine sichtbare Beschriftung über dem Feld.
- Text über einem Foto. Die Leuchtdichte wechselt über die Bildfläche. Ohne abdunkelnde Ebene ist der Text an irgendeiner Stelle immer zu hell.
- Der Fokusring. Wer per Tastatur navigiert, braucht ihn. Er muss selbst 3 zu 1 gegen den Hintergrund erreichen.
Farbe ist nie die einzige Information
Kontrast löst nur die Hälfte des Problems. Rund acht Prozent der Männer und ein halbes Prozent der Frauen unterscheiden Rot und Grün schlecht oder gar nicht. Ein Formularfeld, dessen Fehler nur an einem roten Rahmen erkennbar ist, funktioniert für sie nicht – auch wenn der Kontrast des Rahmens stimmt.
Die Regel lautet: Zu jeder farblichen Auszeichnung gehört ein zweites Signal. Ein Symbol, ein Wort, eine Position, eine Form. Fehlermeldungen bekommen ein Icon und einen Text, Pflichtfelder ein Sternchen, aktive Reiter zusätzlich eine Unterstreichung.
Eine Palette, die trägt
Für die meisten Websites reicht ein sehr sparsames System:
- Eine Aktionsfarbe für alles, was anklickbar ist – in zwei Abstufungen, eine für Flächen, eine dunklere für Text.
- Zwei bis drei Neutraltöne: fast schwarz für Text, ein mittleres Grau für Nebentext, ein sehr helles Grau für getönte Abschnitte.
- Höchstens eine Akzentfarbe, sparsam eingesetzt.
Mehr saturierte Farben machen eine Oberfläche nicht reicher, sondern unentschiedener. Wenn Sie eine Palette aus einem vorhandenen Bild oder Logo ableiten wollen, zieht der Farbpaletten-Generator die tragenden Töne heraus.
Wie die Schrift dazu passt, steht unter Schriften lokal einbinden; ausprobieren lässt sich das mit der Schriften-Vorschau.