Text auf Farbverlauf-Hintergrund: so bleibt er immer lesbar

Damit Text auf einem Farbverlauf-Hintergrund immer lesbar ist, setz die Worte über den ruhigsten Abschnitt des Verlaufs, wähle helle oder dunkle Schrift nach der Helligkeit der Farbe direkt dahinter, halte kleinen Text von Mitteltönen fern und prüf den Kontrast an der schlechtesten Stelle, nicht im Durchschnitt. Größe und Gewicht erledigen den Rest: Große, robuste Schrift übersteht einen wechselnden Hintergrund, an dem dünne, kleine Schrift scheitert.

Warum Text auf einem Farbverlauf schwieriger ist, als er aussieht

Auf einer flachen Farbe ist der Kontrast zwischen Text und Hintergrund eine Zahl. Auf einem Farbverlauf ändert er sich entlang des Übergangs. Weiße Schrift kann am dunklen Ende gestochen scharf und am hellen Ende fast unsichtbar sein, manchmal innerhalb eines einzigen Wortes. Der Verlauf unten zeigt, wie schnell das passiert.

Die Schwellen stammen aus der WCAG-Erläuterung zum Kontrast: 4,5:1 für normalen Text und 3:1 für großen Text, etwa ab 24 Pixeln oder ab rund 19 Pixeln fett. Farbkontrast erklärt die Regeln in einfachen Worten.

Schritt 1: die ruhige Zone finden

Jeder Farbverlauf hat Abschnitte, in denen sich die Farbe langsam ändert, und Abschnitte, in denen sie sich schnell ändert. Text gehört in den langsamen Teil, weil der Kontrast darunter nahezu gleich bleibt. Bei einem linearen Verlauf ist das meist ein Ende, bei einem radialen die Mitte oder der äußere Rand, bei einem Mesh- oder Aurora-Verlauf die größte und gleichmäßigste Farbpfütze.

Hast du den Farbverlauf in der Hand, bau die ruhige Zone ein: Halte eine Farbe länger, indem du einen Stopp wiederholst, wie im ersten Beispiel. Ist der Verlauf vorgegeben, verschieb lieber den Text, statt gegen ihn zu kämpfen.

Schritt 2: die Schriftfarbe nach Helligkeit wählen, nicht nach Farbton

Beim Kontrast geht es um Helligkeit. Ein leuchtendes Violett und ein leuchtendes Orange können gleich stark wirken, und doch ist Weiß auf dem Violett gut und auf dem Orange schlecht lesbar, weil das Orange viel heller ist. Ignoriere beim Wählen der Schriftfarbe den Farbton und frag: Ist die Farbe hinter dieser Zeile dunkel oder hell?

Getönte Schriftfarben wirken durchdachter als reines Weiß und Schwarz. Nimm eine sehr blasse Tönung der hellsten Farbe des Verlaufs und eine sehr tiefe Abschattung seiner dunkelsten; sie tragen die Palette in die Schrift und haben meist genug Kontrast. Schlammige Farbverläufe erklärt, warum mittlere Übergänge überhaupt Helligkeitskontrast verlieren.

Schritt 3: raus aus der Mittelton-Falle

Schau auf die Magenta-Zeile in der Tabelle: 4,7:1 mit Weiß und 4,2:1 mit fast Schwarz. Keine Schriftfarbe hat viel Reserve. Mittelhelle Farben liegen in der Mitte der meisten Farbverläufe, und genau dort zentrieren Leute gern ihren Text. Kleiner Text ist dort grenzwertig, egal welche Schriftfarbe du wählst.

• Verschieb den Text zum dunkleren oder helleren Ende.
• Verschieb den Farbverlauf, damit der Stopp hinter dem Text dunkler oder heller ist.
• Mach den Text groß und fett, damit die niedrigere Schwelle von 3:1 für großen Text gilt.
• Reservier die Mitteltöne für Dekoration, Formen und Raum, nicht für Worte.

.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Schritt 4: Größe und Gewicht nutzen

Schwerere, größere Buchstaben haben mehr Fläche und werden als Formen gelesen, also vertragen sie einen wechselnden Hintergrund besser. Haarfeine und leichte Schnitte zerfallen, wenn sich die Farbe dahinter verschiebt. Setz Fließtext auf einem Farbverlauf in Normal, Medium oder Fett statt in leichten Schnitten und halte Überschriften großzügig. Schriften für Social Media listet robuste Schriften, die auf Handys lesbar sind.

Schritt 5: in Handygröße und in Graustufen testen

1. 1

   Miss die schlechteste Stelle

   Nimm die hellste Farbe hinter heller Schrift oder die dunkelste hinter dunkler Schrift auf und prüf das Verhältnis.

2. 2

   Sieh es dir in Graustufen an

   Entsättige eine Kopie des Designs. Ohne Farbton ist schwacher Helligkeitskontrast offensichtlich.

3. 3

   Schau es auf einem Handy an

   Auf Armlänge, wenn möglich bei Tageslicht. Kleiner Text auf Farbverläufen scheitert dort zuerst.

4. 4

   Kneif die Augen zusammen

   Schließ die Augen halb. Der Text sollte sich weiter als Form vom Hintergrund abheben.

Für Hintergründe, die unruhiger sind als ein Farbverlauf, etwa Fotos und Texturen, siehe Schrift auf unruhigen Hintergründen. In Gradiently schieben Marks ihren ruhigsten Bereich hinter die Worte, und Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift aus der Palette des Marks, also passiert die Methode oben schon beim Tippen.