Automatische Farbe: wie Gradiently helle oder dunkle Schrift wählt

Die Automatische Farbe ist die Art, wie Gradiently die Farbe deiner Schrift wählt. Für jede Textzeile, die auf Automatisch steht, sieht sie sich den Teil des Marks direkt dahinter an und wählt die helle oder die dunkle Farbe, je nachdem, was dort besser lesbar ist. Beide Farben stammen aus der eigenen Palette des Marks, eine Überschrift über einer blassen Ecke wird also tief, eine Bildunterschrift über einem dunklen Streifen hell, und beide sehen trotzdem nach derselben Marke aus.

Warum eine einzige Textfarbe auf einem Verlauf scheitert

Auf einem flachen Hintergrund wählst du eine Textfarbe einmal. Ein Verlauf verändert sich unterwegs: Der obere Teil einer Story kann fast weiß sein und der untere fast schwarz. Weißer Text, der unten wunderbar lesbar ist, verschwindet oben, und eine lange Überschrift kann beides kreuzen. Das ist das Kernproblem bei Text auf einem Farbverlauf, und die üblichen Lösungen, Kästen hinter Worten und Schlagschatten, verdecken genau den Hintergrund, den du gewählt hast.

Wie die Automatische Farbe hell oder dunkel wählt

Jeder Mark trägt eine helle und eine dunkle Farbe aus seiner Palette: einen blassen und einen tiefen Ton, die zu seinen Farben gehören. Steht eine Zeile auf Automatisch, misst Gradiently das Material in der Fläche, die diese Zeile bedeckt, und gibt ihr die Farbe, die sich stärker abhebt. Verschiebst du den Text, folgt die Wahl. Bringst du das Design auf eine Story oder ein Banner, wo das Licht woanders liegt, wird jede Zeile neu gewählt.

Die Idee dahinter ist dasselbe Kontrastmaß, das die Richtlinien zur Barrierefreiheit im Web verwenden: Vergleiche, wie hell der Text ist, mit der Helligkeit des Hintergrunds. Hier das Prinzip in ein paar Zeilen Code, für alle, die im Web etwas Ähnliches bauen.

// Relative luminance of an sRGB colour, as defined in WCAG
function luminance([r, g, b]) {
  const c = [r, g, b].map((v) => {
    v /= 255
    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
}

const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

// Pick whichever ink contrasts more with the colour behind the line
function pickInk(behind, lightInk, darkInk) {
  return contrast(behind, lightInk) >= contrast(behind, darkInk) ? lightInk : darkInk
}

pickInk([156, 79, 107], [251, 243, 234], [26, 15, 31]) // the light ink

Bei den Zahlen selbst verlangen die WCAG ein Kontrastverhältnis von mindestens 4,5:1 für Fließtext und 3:1 für großen Text. Farbkontrast und Barrierefreiheit erklärt die Verhältnisse, und mit dem Kontrastprüfer von WebAIM kannst du jedes Paar testen.

Automatisch, Hell oder Dunkel: die drei Farbmodi

Du kannst Text weiterhin in jeder Farbe aus deinem Markenkit oder der Palette des Marks einfärben. Die Automatische Farbe ist der Standard, weil sie die Wahl ist, die weiter funktioniert, wenn das Design in eine andere Größe wandert.

Wie der Mark von hinten hilft

Die richtige Schriftfarbe zu wählen ist die halbe Arbeit. Die andere Hälfte ist der Hintergrund selbst. Ein Mark weiß, wo die Worte stehen: Seine ruhigste, kontrastreichste Fläche wandert hinter den Text, Farben nahe den Buchstaben werden tiefer oder heller, und unruhige Details entspannen sich. Den ganzen Mechanismus erklärt Ein Hintergrund, der sich an Text anpasst. Die Automatische Farbe wählt dann die Farbe für diese beruhigte Fläche, sodass sich beide gegenseitig verstärken.

Über die Voreinstellungen hinaus kannst du es mit vier Reglern feinjustieren: Ton, wie weit sich das Material für Kontrast hinter Worten beruhigt; Ruhe, wie stark Verzerrung und Unruhe nachlassen; Biegung, eine leichte Biegung des Musters am Rand der Worte; und Reichweite, wie weit um die Worte herum es reagiert. Du bestimmst, wie stark es wirkt, ein Plakat kann also wild bleiben, während eine Speisekarte ruhig bleibt.

Was die Automatische Farbe bewusst vermeidet

Kästen und Schatten funktionieren, aber sie drängen sich auf und verdecken den Hintergrund. Alternativen zu Textschatten erklärt, warum, und Text auf unruhigem Hintergrund zeigt weitere Wege, Worte ohne sie lesbar zu halten.

Das Beste aus der Automatischen Farbe holen

1. 1

   Text auf Automatisch lassen

   Stell eine Zeile nur dann fest auf Hell oder Dunkel, wenn du einen konkreten Grund hast, etwa die Abstimmung auf eine gedruckte Serie.

2. 2

   Eine Reaktion passend zur Aufgabe wählen

   Dezent passt zu den meisten Social Posts. Wähle Klar oder Kräftig für kleine Schrift, lange Details oder alles, was aus der Distanz gelesen wird.

3. 3

   Jede Größe prüfen

   Sieh dir nach dem Anpassen der Größe jedes Format an. Die Farbe wird für jedes neu gewählt, und das ist meist genau, was du willst.

4. 4

   Überschriften kurz halten

   Eine Zeile, die vom hellsten zum dunkelsten Teil eines Marks reicht, ist für jede Farbe schwieriger. Teile sie in zwei Zeilen.