Kontrastraster für Paletten

Warum man eine Palette als Ganzes prüft

Markenfarben werden meist nebeneinander auf einem Board ausgewählt, als Farbfelder. Selten werden sie als Paare ausgewählt, eine auf der anderen geschrieben. Das rächt sich später, wenn eine Entwicklerin eine Linkfarbe auf dem blassen Hintergrund braucht, eine Bildunterschrift auf der Akzentfläche und eine Beschriftung auf dem Haupt-Button, und nach Augenmaß aus der Palette wählt.

Die Zahl der Paare wächst schnell. Mit n Farben gibt es n × (n − 1) Möglichkeiten, eine auf eine andere zu setzen, also 12 bei vier Farben, 30 bei sechs und 132 bei zwölf. Sie einzeln durchzugehen ist so langsam, dass es niemand tut. Ein Raster macht es sofort und zeigt Ihnen auch, wie die Palette aufgebaut ist: welche Farben als „Tinte“ taugen, welche als „Papier“ und welche nur zur Dekoration.

Das Raster lesen

Jede Zeile ist eine Textfarbe und jede Spalte ein Hintergrund. Eine Zelle zeigt ein Beispiel „Aa“ in diesen beiden Farben, das WCAG-Kontrastverhältnis auf zwei Nachkommastellen gekürzt und eine von vier Bezeichnungen:

Das Verhältnis ist gleich, egal welche Farbe oben liegt, die Tabelle spiegelt sich also an der Diagonale. Wir behalten beide Hälften, weil die Beispiele nicht gleich aussehen. Dunkel auf Hell und Hell auf Dunkel wirken selbst bei identischer Zahl verschieden. Das Menü Behalten blendet alle Paare unter der gewählten Schwelle aus. Wählen Sie eine Zelle aus, um eine größere Vorschau mit Überschrift, Absatz, kleiner Schrift und Button zu öffnen. Dort gibt es auch einen Link, der das Paar an den Kontrastrechner schickt, der einen nahen Farbton vorschlagen kann, der besteht.

Die drei Listen unter dem Raster

Text in normaler Größe

Bis zu acht Paare ab 4,5:1, das stärkste zuerst. Jedes Paar erscheint einmal, mit der helleren Farbe als Hintergrund, da das der übliche Fall ist.

Nur großer Text und Überschriften

Bis zu sechs Paare zwischen 3:1 und 4,5:1. Sie sind verlockend, weil sie in einem Mockup bei 40 px gut aussehen. In einem Absatz fallen sie durch.

Button-Kombinationen

Ein Button umfasst drei Farben und zwei Tests. Seine Beschriftung muss gegenüber dem Button 4,5:1 erreichen, und der Button selbst muss gegenüber der Seite 3:1 erreichen, sonst sieht man gar nicht, dass da ein Button ist. Für jede mögliche Button-Farbe nennt die Liste die Beschriftung mit dem höchsten Kontrast und den hellsten Seitenhintergrund, der beides erfüllt.

Bleibt die erste Liste leer, hat die Palette kein Paar aus Tinte und Papier. Fügen Sie ein Fast-Schwarz wie #1a1a1a oder ein Fast-Weiß hinzu, und das Raster füllt sich.

Eine Palette reparieren, die nicht reicht

Die meisten Paletten scheitern auf dieselbe Weise, mit mehreren mittleren Tönen ähnlicher Helligkeit. Petrol, Koralle, Senfgelb und Violett sehen völlig verschieden aus, und doch kann keine davon Text auf einer der anderen tragen. Drei Ergänzungen lösen fast jeden Fall:

1. Ein dunkles Neutral für Fließtext. Eine tiefe Version des Hauptfarbtons der Marke erfüllt den Zweck so gut wie Schwarz und sieht trotzdem nach der Marke aus.
2. Ein helles Neutral für Seiten- und Kartenhintergründe, etwa ein Gebrochenweiß mit einem Hauch des Markenfarbtons.
3. Eine dunklere Stufe der Akzentfarbe für Links und Buttons. Senken Sie die Helligkeit, bis weißer Text darauf 4,5:1 erreicht, und behalten Sie den ursprünglichen Akzent für große Formen und Illustrationen.

Schreiben Sie das Ergebnis dann als Regeln über Paare in Ihren Styleguide, zum Beispiel „Akzent nur auf Weiß, nie unter Fließtext“. Mit einer Liste erlaubter Paare machen Menschen weniger Fehler als mit einer Liste von Farben.

Eingabe, Teilen und Grenzen

Trennen Sie die Farben mit Kommas oder Zeilenumbrüchen. Hex mit oder ohne #, rgb(), hsl() und CSS-Farbnamen funktionieren alle. Duplikate werden zusammengeführt, und alles nach der zwölften Farbe wird ignoriert. Die Adressleiste enthält immer die aktuelle Palette als ?c=1d3557,f1faee,…, der kopierte Link öffnet also dasselbe Raster wieder. Alles wird in Ihrem Browser berechnet.