Kontrast prüfen

Methode // Testen und Prüfen

Ihre Augen sehen nicht für alle.

Wie prüfen Sie, ob etwas für alle lesbar ist?

Was denn nun?

Letzte Woche: »Messen ist gut, Hinschauen ist besser.« Heute: messen.

Wirkung: Wie wirkt das? Hier entscheidet das Auge.

Zugänglichkeit: Kommt es bei allen an? Hier ist das eigene Auge das falsche Instrument.

Messen für die Untergrenze, Hinschauen für die Wirkung.

Die Messung sagt, ob etwas für alle lesbar ist. Ob es gut ist, sagt sie nicht. Erst messen, dann schauen.

Unsere Augen sind schlechte Messgeräte. Gesättigte Farben wirken heller, als sie sind (Helmholtz-Kohlrausch), und dieselbe Farbe wirkt je nach Umgebung anders (Simultankontrast). Wer Kontrast nach Augenmaß beurteilt, liegt regelmäßig daneben, und zwar meistens zu optimistisch, weil der eigene Bildschirm gut und hell ist und man weiß, was da steht.

Das Problem, das die Methode löst: verlässlich und schnell entscheiden, ob Text und Bedienelemente für alle lesbar sind.

Der scheinbare Widerspruch zur letzten Woche: Bei den Täuschungen hieß es »Messen ist gut, Hinschauen ist besser.« Jetzt heißt es messen. Beides stimmt, es sind zwei verschiedene Fragen:

Wirkung (Wie wirkt das?): Hierarchie, Gleichgewicht, optische Mitte, Farbklima. Es zählt, was gesehen wird. Das Auge ist das richtige Instrument, darum korrigiert man optisch.
Zugänglichkeit (Kommt es bei allen an?): Hier ist das eigene Auge das falsche Instrument. Wir sind nicht die Zielgruppe: Wir sehen gut, haben einen guten Bildschirm und wissen, was da steht. Die Menschen, um die es geht, sehen wir nicht: mit Sehschwäche, älter, mit billigem Display, in der Sonne. Und die Phänomene der letzten Woche (Simultankontrast, Helmholtz-Kohlrausch) zeigen gerade, dass wir Helligkeit falsch einschätzen. Wenn Wahrnehmung relativ ist, taugt sie nicht als Prüfinstrument für einen festen Mindestwert. Das ist kein Widerspruch, sondern die Konsequenz.

Die Messung ist selbst Wahrnehmung, nur gemittelt: Die WCAG-Formel gewichtet Rot, Grün und Blau so, wie das Auge sie empfindet (relative Leuchtdichte: 0,2126 R + 0,7152 G + 0,0722 B). Sie misst also ein Modell der Wahrnehmung über viele Menschen, unabhängig vom eigenen Auge.

Reihenfolge: Erst messen, dann schauen. 4,5 : 1 ist notwendig, aber nicht hinreichend. Und weil die Formel Schwächen hat (helle Schrift auf Dunkel, kräftige Farben), hat das Auge das letzte Wort, aber nur oberhalb der Untergrenze. Passt zur Haltung »Gefällt mir ist kein Argument«: Ein Messwert ist ein Argument, das man niemandem erklären muss.

So sieht das Ergebnis aus

Paar	Verwendung	Kontrast	Grenzwert	Ergebnis
#231f20 auf #ffffff	Fließtext	16,3 : 1	4,5 : 1	besteht
#888888 auf #ffffff	Bildunterschrift	3,54 : 1	4,5 : 1	fällt durch
#6a6a6a auf #ffffff	Bildunterschrift, korrigiert	5,41 : 1	4,5 : 1	besteht
#ffffff auf #9313ce	Button, 18 px fett	6,51 : 1	4,5 : 1	besteht
#d9d9d9 auf #ffffff	Rahmen Eingabefeld	1,41 : 1	3 : 1	fällt durch

In fünf Schritten

1. Graustufentest: schnell und grob, im Entwurf

2. Paare erfassen: jede Kombination aus Schrift oder Element und Hintergrund

3. Messen: mit einem Werkzeug, nicht nach Augenmaß

4. Bewerten: Grenzwert passend zum Element

5. Korrigieren und festhalten: anpassen, als Token speichern

Die Grenzwerte (WCAG 2.2, AA)

Element	Mindestens
Text	4,5 : 1
Große Schrift ab 24 px oder ca. 19 px fett	3 : 1
Bedienelemente und Grafik Rahmen, Icons, Fokus	3 : 1

1. Graustufentest: im Entwurf schnell und grob. In Figma ein schwarzes Rechteck mit Ebenenmodus »Color« über den Frame legen. Was verschwindet, hat zu wenig Kontrast.

2. Paare erfassen: alle Kombinationen von Vorder- und Hintergrund. Nicht vergessen: Platzhalter in Eingabefeldern, Links, Bildunterschriften, Text auf Fotos, Icons, Rahmen von Eingabefeldern, Fokus-Rahmen, Zustände wie Hover und Fehler, Dark Mode.

3. Messen: mit einem Werkzeug. WebAIM Contrast Checker (Browser), die Entwicklerwerkzeuge von Chrome und Firefox (Farbwähler zeigt das Verhältnis direkt an), Colour Contrast Analyser von TPGi (kostenlos, mit Pipette für den ganzen Bildschirm), in Figma Plugins wie Stark.

4. Bewerten: Grenzwert passend zum Element. Text 4,5 : 1, große Schrift ab 24 px oder ca. 19 px fett 3 : 1, Bedienelemente und informationstragende Grafik 3 : 1. Deaktivierte Elemente und reine Dekoration sind ausgenommen.

5. Korrigieren und festhalten: Farbe so weit abdunkeln oder aufhellen, bis der Wert passt. Das Ergebnis als Token festhalten, damit es überall gilt.

Und jetzt Sie.

Vier Farben, zu zweit, zehn Minuten

Reicht das?

A
Weiß auf #ff8000

B
Weiß auf #ec0016

C
Weiß auf #1db954

D
Weiß auf #ff385c

Für Fließtext? Für einen Button mit großer, fetter Schrift?

Messen Sie hier

WebAIM Contrast Checker

Auflösung

Farbe	Kontrast mit Weiß	Fließtext	Große Schrift
A #ff8000	2,52 : 1	fällt durch	fällt durch
B #ec0016	4,59 : 1	besteht knapp	besteht
C #1db954	2,59 : 1	fällt durch	fällt durch
D #ff385c	3,52 : 1	fällt durch	besteht

Und wenn die Markenfarbe zu hell ist?

Was würden Sie vorschlagen?

Zitro: Gelb ist die Marke. Für weiße Schrift und Links ist es zu hell.
Erfundene Marke

Lösung: Gelb als Fläche, dunkle Schrift auf Gelb, eine dunklere Variante für Links
Erfundene Marke

Minzig: Mint ist die Marke. Auch hier reicht der Kontrast nicht.
Erfundene Marke

Lösung: Mint als Fläche, eine dunklere Variante für Buttons und Links
Erfundene Marke

Die Marke bleibt, die Funktion bekommt eine Variante.

Markenfarbe für Flächen und Logo. Für Schrift und Bedienelemente eine dunklere Variante oder dunkle Schrift. Beides als eigene Tokens festhalten.

Mini-Übung (ca. 10 Minuten)

Vier Markenfarben, jeweils mit weißer Schrift, wie man sie auf Buttons findet. Zu zweit mit dem WebAIM Contrast Checker auf dem Handy (QR-Code) messen und für jede Farbe entscheiden: Reicht das für Fließtext? Für einen Button mit großer, fetter Schrift?

Auflösung (berechnet): A 2,52 : 1, fällt auch für große Schrift durch. B 4,59 : 1, besteht knapp. C 2,59 : 1, fällt durch, mit schwarzer Schrift wären es 8,12 : 1, so macht es Spotify auch. D 3,52 : 1, nur für große Schrift.

Die Hex-Werte sind an die Markenfarben angelehnt und können von den aktuellen Originalen abweichen. Es geht um das Messen, nicht um die Marken.

Diskussion danach: Was macht eine Marke, deren Farbe für weiße Schrift zu hell ist? Erst Vorschläge sammeln, dann die beiden Beispiele zeigen.

Zitro (erfunden, Gelb #ffd60a): Weiß auf Gelb hat 1,41 : 1, Gelb als Linkfarbe auf Weiß ebenso. Lösung: Gelb bleibt Fläche und Logo, Buttons bekommen dunkle Schrift (11,55 : 1), Links eine dunklere, bräunliche Variante #7a5c00 (6,25 : 1).

Minzig (erfunden, Mint #2ed3b7): Weiß auf Mint hat 1,89 : 1. Lösung: Mint bleibt Fläche, Buttons und Links bekommen die dunklere Variante #0f7c6c (5,1 : 1 mit Weiß).

Echte Vorbilder: Spotify setzt schwarze Schrift auf das Grün, viele gelbe Marken (z. B. Post, IKEA in Teilen) arbeiten mit dunkler Schrift auf Gelb. In Design-Systemen heißen die Varianten oft brand und brand-strong oder brand-text.

Typische Fehler

Nach Augenmaß urteilen, am eigenen, hellen Bildschirm

Hellgrau für Platzhalter und Nebentexte, weil es »clean« aussieht

Nur Text prüfen, Rahmen, Icons und Fokus vergessen

Text auf Fotos nicht prüfen, an der hellsten Stelle des Bildes

Nur den hellen Modus prüfen, Dark Mode und Zustände vergessen

Erst am Ende prüfen, wenn die Farben schon überall verbaut sind

Wo die Methode wiederkommt

Im ersten Entwurf: Graustufentest, bevor Farben festgelegt sind

Bei den Design Tokens: jedes Farbpaar einmal messen

Im Crit und vor jeder Abgabe: Liste der Paare mit Werten

Merksatz

Messen für die Untergrenze, Hinschauen für die Wirkung. Früh, für jedes Paar, auch für Rahmen, Icons und Dark Mode.

Danke für's Mitmachen

https://christiannoss.de