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

[Canonical HTML page](https://gradiently.design/de/guide/auto-ink-legibility)

Ein Farbverlauf ist an einer Stelle hell und an einer anderen dunkel, also passt keine einzelne Textfarbe überall. Die Automatische Farbe entscheidet Zeile für Zeile, und der Mark hilft von hinten.

## The short version

- Die Automatische Farbe ist eine Einstellung in Gradiently, die für jede Textzeile helle oder dunkle Schrift wählt, je nachdem, was auf dem Teil des Marks direkt dahinter besser lesbar ist.
- Beide Schriftfarben stammen aus der eigenen Palette des Marks, die Schrift gehört also immer zum Hintergrund, statt auf reines Weiß oder Schwarz zurückzufallen.
- Text lässt sich auch fest auf die helle oder die dunkle Farbe stellen, wenn du unabhängig vom Hintergrund eine einzige Farbe willst.
- Die Automatische Farbe arbeitet mit der Reaktion des Marks zusammen, die das Material hinter Worten beruhigt, von Aus über Unsichtbar, Dezent und Klar bis Kräftig.
- Keine von beiden nutzt Kästen, Schatten oder Weichzeichner, und du bestimmst, wie stark der Mark reagiert.

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](https://gradiently.design/de/guide/text-on-gradient), und die üblichen Lösungen, Kästen hinter Worten und Schlagschatten, verdecken genau den Hintergrund, den du gewählt hast.

Eine Story im Hochformat, die einen Studio-Sale ankündigt, wobei die Textfarbe gegen hellere und dunklere Bereiche des Verlaufs ankämpft

Eine feste Farbe auf einem wechselnden Hintergrund: Teile der Schrift kämpfen mit dem Material.

Dieselbe Story zum Studio-Sale, jede Zeile in der hellen oder dunklen Farbe, die am besten lesbar ist, mit ruhigerem Material hinter den Worten

Automatische Farbe mit reagierendem Mark: Jede Zeile bekommt die lesbare Farbe, und das Material beruhigt sich dahinter.

## 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.

- Helle Farbe: #fbf3ea
- Pfirsich hell: #e9a27c
- Rosé Mitte: #9c4f6b
- Pflaumenschatten: #3b1f3f
- Dunkle Farbe: #1a0f1f

Eine Beispielpalette eines Marks mit den beiden Schriftfarben an den Enden. Sie sind mit der Wärme des Marks getönt, nicht reines Weiß und reines Schwarz.

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.

```js
// 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
```

Nur das Prinzip, nicht der Code von Gradiently. Ein echter Hintergrund ändert sich unter einer Zeile, also muss die Fläche dahinter gemessen werden, nicht ein einzelnes Pixel.

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](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt die Verhältnisse, und mit dem [Kontrastprüfer von WebAIM](https://webaim.org/resources/contrastchecker/) kannst du jedes Paar testen.

## Automatisch, Hell oder Dunkel: die drei Farbmodi

| Modus | Was er macht | Nutze ihn, wenn |
| --- | --- | --- |
| Automatisch | Wählt pro Zeile die helle oder dunkle Farbe je nach Hintergrund | Fast immer: Überschriften, Details, Bildunterschriften auf wechselndem Hintergrund |
| Hell | Nutzt immer die helle Farbe des Marks | Bei einem dunklen Mark, auf dem jede Zeile gleich aussehen soll, etwa einer Zitatkarte |
| Dunkel | Nutzt immer die dunkle Farbe des Marks | Bei einem blassen, papierartigen Mark oder im Druck, wenn du eine einheitliche Farbe willst |

Text beginnt auf Automatisch. Eine Zeile auf eine feste Farbe zu stellen ist eine Wahl in den Einstellungen der Schriftfarbe, und Zurück zu Automatischer Farbe macht es rückgängig.

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](https://gradiently.design/de/guide/text-reacts-to-background). Die Automatische Farbe wählt dann die Farbe für diese beruhigte Fläche, sodass sich beide gegenseitig verstärken.

| Reaktion | Was hinter deinen Worten passiert |
| --- | --- |
| Aus | Das Material ignoriert deine Worte |
| Unsichtbar | Nur wo es nötig ist; niemand wird es bemerken |
| Dezent | Ausgewogen: Der Look bleibt, die Worte sind lesbar |
| Klar | Die Worte gewinnen immer |
| Kräftig | Der stärkste Kontrast, ruhig auch etwas weiter drumherum |

Die Reaktionsstufen, die du für ein Design wählen kannst, vom Material, das Worte ignoriert, bis zum größtmöglichen Kontrast.

Ü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

### Vermeiden

- Ein deckender Kasten hinter jeder Zeile
- Schlagschatten, die die Kanten der Buchstaben verwischen
- Den Hintergrund hinter dem Text weichzeichnen
- Reinweiße Schrift auf einer blassen Ecke

### So geht es

- Jede Zeile die lesbare Farbe nehmen lassen
- Den Mark hinter Worten eine ruhigere Fläche bilden lassen
- Die Schriftfarben in der Palette des Marks halten
- Die Reaktionsstufe für kleinen oder langen Text erhöhen

Kästen und Schatten funktionieren, aber sie drängen sich auf und verdecken den Hintergrund. [Alternativen zu Textschatten](https://gradiently.design/de/guide/text-shadow-alternatives) erklärt, warum, und [Text auf unruhigem Hintergrund](https://gradiently.design/de/guide/type-on-busy-backgrounds) zeigt weitere Wege, Worte ohne sie lesbar zu halten.

## Das Beste aus der Automatischen Farbe holen

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. **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. **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. **Ü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.

## FAQ

### Was ist die Automatische Farbe in Gradiently?

Eine Einstellung der Schriftfarbe, die für jede Zeile die helle oder dunkle Farbe des Marks wählt, je nachdem, was auf dem Teil des Hintergrunds dahinter besser lesbar ist.

### Kann ich die Automatische Farbe ausschalten?

Ja. Stell eine Zeile so ein, dass sie immer die helle oder die dunkle Farbe nutzt, oder gib ihr eine beliebige Farbe. Zurück zu Automatischer Farbe macht es rückgängig.

### Fügt die Automatische Farbe Schatten oder Kästen hinter Text hinzu?

Nein. Sie ändert nur die Schriftfarbe. Der Mark selbst bildet hinter den Worten eine ruhigere Fläche, ohne Kästen, Schatten oder Weichzeichner.

### Welches Kontrastverhältnis sollte Text auf einem Hintergrund haben?

Die WCAG verlangen mindestens 4,5:1 für Fließtext und 3:1 für großen Text.

### Warum hat mein Text nach dem Ändern der Größe die Farbe gewechselt?

In einer neuen Größe fällt das Licht an eine andere Stelle, also wählt die Automatische Farbe für jede Zeile neu, damit sie lesbar bleibt.