Kontrast reparieren, ohne das Design zu verlieren

Helles Grau auf Weiß sieht im Entwurf ruhig und teuer aus. Auf einem Laptop im Zug, mit Sonne von der Seite, ist derselbe Satz fast verschwunden. Der Unterschied zwischen diesen beiden Situationen ist keine Geschmacksfrage, er lässt sich mit einer einzigen Zahl messen. Und die Reparatur kostet dich in vielen Fällen genau einen Schritt im Hex-Wert.

Eine Zahl, die aus zwei Helligkeiten entsteht

Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben. Jede Farbe bekommt dabei einen Helligkeitswert zwischen 0 für Schwarz und 1 für Weiß. Die Formel lautet (hell + 0,05) / (dunkel + 0,05). Oben und unten steht derselbe Messwert, deshalb bleibt am Ende ein reines Verhältnis übrig und keine Prozentzahl. Man schreibt also 4,5:1. Nach oben ist bei 21:1 Schluss, das ist Schwarz auf Weiß, nach unten bei 1:1, das ist eine Farbe auf sich selbst.

Rechne es an einem echten Paar durch. Das mittlere Grau #777777 auf weißem Grund hat in jedem Kanal den Wert 119 von 255, also 0,467. Nach der Gamma-Korrektur wird daraus 0,185, und weil alle drei Kanäle gleich sind, ist das gewichtete Mittel genau dieser Wert. Weiß liegt bei 1,0. Die Rechnung ergibt (1,0 + 0,05) / (0,185 + 0,05) = 1,05 / 0,235 = 4,48. Das Paar landet bei 4,48:1 und fällt knapp durch. Jetzt geh einen einzigen Schritt tiefer, auf #767676: 118 von 255, Leuchtdichte 0,181, und die Rechnung ergibt 1,05 / 0,231 = 4,54. Damit ist die Schwelle geschafft. Zwischen durchgefallen und bestanden liegt hier ein Wert im letzten Hex-Zeichen, den niemand mit bloßem Auge von seinem Nachbarn unterscheidet. Das ist der Grund, warum die Angst vor dem zerstörten Design meistens unbegründet ist.

Die drei Schwellen

• 4,5:1 für normalen Fließtext, also für alles, was kleiner ist als große Schrift.
• 3:1 für große Schrift, gemeint ist ab 24 Pixel in normaler Stärke oder ab 18,7 Pixel fett.
• 3:1 für Bedienelemente und für Grafiken, die Information tragen. Dazu zählen die Kante eines Eingabefelds, der Rand einer Schaltfläche, ein Icon ohne Beschriftung und der Fokusring.

Gemessen wird immer gegen die Farbe, die direkt daneben oder darunter liegt. Weißer Text auf einem Farbverlauf muss an der hellsten Stelle des Verlaufs bestehen, nicht im Mittel. Ausgenommen bleiben Logos, reine Dekoration ohne Aussage und Bedienelemente, die gerade deaktiviert sind.

Das Grau aus dem Designentwurf

Ein Grau um #999999 taucht auf kleinen Websites immer wieder auf, meistens für Sekundärtext, Bildunterschriften, Platzhalter in Formularen und die komplette Fußzeile. Auf Weiß liegt dieses Grau bei 2,85:1. Es besteht keine der drei Schwellen, nicht einmal die für große Schrift. Trotzdem greifen viele danach, weil es auf einem guten Monitor in einem abgedunkelten Raum genau die zurückgenommene Wirkung hat, die man sich für Nebeninformationen wünscht.

Das Grau, das diese Wirkung behält und trotzdem besteht, ist #6E6E6E mit 5,10:1. Leg die beiden Töne direkt nebeneinander, und du siehst einen Unterschied. Leg sie in zwei Fußzeilen und schau dir eine Woche später beide an, und du wirst nicht mehr sagen können, welche welche war.

Ändere die Helligkeit, nicht den Farbton

In der Leuchtdichte zählt Grün mit dem Faktor 0,7152, Rot mit 0,2126 und Blau mit 0,0722. Grün entscheidet also über fast drei Viertel der Helligkeit, Blau über nicht einmal acht Prozent. Daraus folgt zweierlei. Ein sattes Blau ist auf Weiß oft schon fast dunkel genug, während Gelb, Cyan und helles Grün auf Weiß praktisch nie funktionieren, egal wie kräftig sie wirken. Und ein Drehen am Farbton verschiebt die Zahl völlig unberechenbar, mal weit nach oben, mal weit nach unten, während deine Marke dabei auf der Strecke bleibt.

Der Griff, der zuverlässig wirkt, ist der an die Helligkeit. Farbton und Sättigung bleiben stehen, die Lightness sinkt. Ein Beispiel aus einem typischen Link-Blau: #4A90E2 kommt auf Weiß auf 3,29:1 und fällt als Fließtext durch, #2A6BB8 kommt auf 5,39:1 und besteht mit Reserve. Der Farbton bleibt in beiden Fällen bei rund 212 Grad, es ist dasselbe Blau, nur tiefer. Für farbige Schaltflächen gilt derselbe Handgriff, denn die 5,39:1 gelten auch für weiße Schrift auf #2A6BB8. Beide Rechnungen vergleichen dieselben zwei Helligkeiten, und die Reihenfolge spielt keine Rolle.

Was das im Stylesheet bedeutet

/* vorher */
:root {
  --text-muted: #999999;  /* 2,85:1 auf Weiß, zu schwach für Text */
  --border:     #e5e7eb;  /* 1,24:1 auf Weiß, zu schwach für Feldkanten */
  --link:       #4a90e2;  /* 3,29:1 auf Weiß, zu schwach für Text */
}
.btn-primary { background: #4a90e2; color: #ffffff; }
:focus { outline: none; }

/* nachher */
:root {
  --text-muted: #6e6e6e;  /* 5,10:1 */
  --border:     #949494;  /* 3,03:1 */
  --link:       #2a6bb8;  /* 5,39:1 */
}
.btn-primary { background: #2a6bb8; color: #ffffff; }  /* 5,39:1 */
:focus-visible {
  outline: 3px solid #2a6bb8;
  outline-offset: 2px;
}

Das sind vier geänderte Werte, und das Layout bleibt dabei unangetastet, keine Kachel verschiebt sich. Schreib das gemessene Verhältnis als Kommentar hinter den Wert. Beim nächsten Redesign schlägt jemand ein helleres Grau vor, und die Zahl steht direkt daneben.

Rahmen, Schaltflächen und der Fokusring

Der Text wird irgendwann geprüft, die Kanten fast nie. Ein Rahmen wie #E5E7EB auf Weiß liegt bei 1,24:1. Bei einer dekorativen Trennlinie ist das folgenlos, die trägt keine Information. Bei der Umrandung eines Eingabefelds ist es das nicht, denn dieser Rahmen ist die einzige Auskunft darüber, wo das Feld anfängt und wo es aufhört. Das hellste neutrale Grau, das die 3:1 gegen Weiß schafft, ist #949494 mit 3,03:1. Schon #959595 rutscht auf 3,00:1 und liegt damit knapp darunter.

Der Fokusring ist der zweite blinde Fleck. outline: none steht in unzähligen Stylesheets, weil der Standardring des Browsers als unschön gilt. Wer mit der Tastatur navigiert, verliert damit jede Orientierung auf der Seite. Bau stattdessen einen eigenen Ring über :focus-visible, gib ihm zwei bis drei Pixel Stärke und einen Versatz nach außen, und prüf ihn gegen beide Nachbarfarben: gegen die Schaltfläche, auf der er sitzt, und gegen den Seitenhintergrund, der um ihn herumliegt. Ein Ring, der nur gegen eine der beiden Farben besteht, verschwindet genau an der Seite, an der die andere liegt.

Der Test, den du in zwei Minuten machst

1. Öffne deine Seite in Chrome oder Edge, klick mit der rechten Maustaste auf den fraglichen Text und wähle Untersuchen.
2. Such rechts im Bereich Styles die Zeile color und klick auf das kleine Farbquadrat davor. Der Farbwähler geht auf.
3. Lies die Zeile Contrast ratio, auf deutscher Oberfläche Kontrastverhältnis. Ein Haken bedeutet bestanden, ein Ausrufezeichen bedeutet durchgefallen.
4. Klick auf den Pfeil neben der Zahl. Im Farbfeld erscheint eine geschwungene Linie für die Schwelle 4,5:1, bei ausgeklapptem zweiten Wert kommt eine Linie für 7:1 dazu. Alles unterhalb einer Linie erfüllt die jeweilige Schwelle.
5. Zieh den Kreis knapp unter die Linie. Oben im Farbwähler steht jetzt der neue Hex-Wert, den überträgst du in dein CSS.
6. Für die ganze Seite auf einmal nimmst du Firefox: Entwicklerwerkzeuge öffnen, Reiter Barrierefreiheit, dort Auf Probleme prüfen und Kontrast wählen. Der Browser listet jede Textstelle auf, die durchfällt, samt ihrem Verhältnis.

Beides steckt schon im Browser, du installierst nichts. Mach den Durchlauf einmal für die Startseite, einmal für ein Formular und einmal für die Fußzeile, dann hast du die drei Stellen erwischt, an denen die schwachen Werte üblicherweise sitzen.

Damit die Werte nicht zurückrutschen

Definier jeden dieser Töne genau einmal, als Variable, und lass die Bausteine deiner Seite nur noch die Variable benutzen. Wer #999999 an vierzig Stellen im Stylesheet stehen hat, repariert es einmal und holt es sich mit dem nächsten neuen Baustein wieder herein. Unser Widget bringt zwar ein Kontrastprofil mit, das Besucher selbst einschalten können, aber das ist ein Netz für die Fälle, die du übersehen hast. Die Werte in deinem Stylesheet wirken für alle, auch für die vielen, die nie einen Knopf drücken.