Text auf unruhigem Hintergrund: gut lesbar ohne Kasten

Ob Text auf unruhigem Hintergrund lesbar ist, hängt an zwei Dingen: was direkt hinter den Buchstaben liegt und welche Farbe die Buchstaben haben. Die gängigen Lösungen, ein Kasten, ein Schatten oder Unschärfe, ändern das, was hinter den Buchstaben liegt, indem sie es verdecken. Die besseren Lösungen setzen die Wörter dorthin, wo der Hintergrund schon ruhig ist, wählen die Schriftfarbe für jede Zeile und lassen, wo das Werkzeug es erlaubt, den Hintergrund Platz machen, statt ihn zu überkleben.

Warum sich unruhige Hintergründe und Text bekämpfen

Lesen hängt vom Kontrast zwischen jedem Buchstaben und seiner Umgebung ab. Auf einer flachen Farbe ist dieser Kontrast überall gleich. Auf einem Foto, einem Muster oder einem lebhaften Farbverlauf ändert er sich ständig: Ein Buchstabe sitzt auf einem Glanzlicht, der nächste im Schatten, und das Wort zerfällt in Stücke. Details machen es schlimmer, weil die eigenen Kanten und Formen des Hintergrunds ein wenig wie Buchstabenstriche aussehen und das Auge beides trennen muss.

Deshalb lassen sich Kontrastrichtlinien, etwa die Verhältnisse aus dem Artikel zum Farbkontrast, auf unruhigen Hintergründen schwer anwenden: Es gibt keine einzelne Hintergrundfarbe, an der man messen könnte. Der ehrliche Test ist die schlechteste Stelle, der hellste Bereich hinter heller Schrift oder der dunkelste hinter dunkler.

Die üblichen Lösungen und was jede kostet

Jede Standardlösung funktioniert, indem sie ändert, was direkt hinter den Buchstaben liegt. Alle sind legitim, und alle nehmen dem Hintergrund, den du gewählt hast, etwas weg.

Wenn du eine davon nutzt, dann behutsam. Eine Abdunklung, die über eine große Fläche ausläuft, fällt weniger auf als ein Kasten, und ein weicher, breiter Schatten wirkt weniger altmodisch als ein harter. Hier eine zurückhaltende Version fürs Web:

.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}

Besser: die Wörter dorthin, wo der Hintergrund ruhig ist

Die meisten unruhigen Hintergründe haben eine ruhigere Zone: ein Stück Himmel, eine weiche Farbfläche, einen unscharfen Bereich. Den Text dorthin zu setzen oder so zuzuschneiden, dass diese Zone unter dem Text landet, löst das Problem, ohne etwas zu verdecken. Wenn du einen Hintergrund wählst oder machst, suche einen mit einer ruhigen Stelle dort, wo deine Wörter meist stehen.

Dieselbe Idee gilt für Fotos, wo Zuschnitt, Unschärfe und Duotone Ruhe schaffen können; Text auf Bildern geht sieben Techniken durch. Auf Farbverläufen ist die ruhige Zone meist dort, wo sich die Farbe am langsamsten ändert; Text auf einem Farbverlauf zeigt, wie du sie findest.

Die Schriftfarbe für jede Zeile wählen

Ein Hintergrund, der von hell nach dunkel läuft, kommt mit einer einzigen Schriftfarbe nicht aus. Weiße Schrift ist auf der dunklen Hälfte lesbar und verschwindet auf der hellen. Statt ein Feld dahinterzuzwingen, wähle die Schriftfarbe pro Zeile: helle Schrift, wo der Hintergrund hinter dieser Zeile dunkel ist, dunkle Schrift, wo er hell ist. Nimm beide Farben aus der eigenen Palette des Hintergrunds, einen tiefen und einen blassen Ton, damit sie zum Design gehören und nicht aufgeklebt wirken.

Den Hintergrund bewegen, nicht die Wörter

Die leiseste Lösung von allen ist ein Hintergrund, der weiß, wo die Wörter stehen. So verhält sich ein Mark von Gradiently: Statt verdeckt zu werden, ordnet er sich neu. Das ganze Material gleitet so, dass sein ruhigster, kontrastreichster Bereich hinter dem Text liegt; nahe den Buchstaben werden die Farben unter heller Schrift tiefer und unter dunkler Schrift heller; unruhige Grate entspannen sich. Nichts davon ist eine Form, auf die man zeigen könnte. Es wirkt wie das Design, weil es das Design ist.

Die andere Hälfte ist die Schriftfarbe. Stell den Text auf Automatische Farbe, und jede Zeile wählt die helle oder dunkle Schrift, die vor dem, was wirklich dahinter liegt, am besten lesbar ist, aus einem Paar, das aus der eigenen Palette des Marks stammt. Schiebst du eine Überschrift von einer hellen Stelle auf eine dunkle, wechselt sie still. Du entscheidest, wie stark der Hintergrund reagiert: kaum merklich, ausgewogen oder als klare Bühne für eine Überschrift, die sitzen muss.

Die beste Lösung für Lesbarkeit ist die, die niemand bemerkt.

Eine Checkliste für Text auf unruhigen Hintergründen

1. 1

   Zuerst die ruhige Stelle finden

   Platziere oder schneide so zu, dass die Wörter über dem gleichmäßigsten Teil des Hintergrunds stehen.

2. 2

   Die schlechteste Stelle prüfen

   Teste den Kontrast an der hellsten Stelle hinter heller Schrift oder der dunkelsten hinter dunkler, nicht am Durchschnitt.

3. 3

   Schriftfarbe pro Zeile wählen

   Hell auf dunkel, dunkel auf hell, beide aus der Palette des Hintergrunds.

4. 4

   Stärke und Größe nutzen

   Kräftigere, größere Schrift übersteht unruhigere Hintergründe. Haarfeine Schnitte nicht. Schriften für Social Media nennt Schriften, die standhalten.

5. 5

   Flächen nur als letzten Ausweg

   Wenn es sein muss, nimm die sanfteste Lösung: eine weiche Abdunklung statt eines Kastens, einen breiten, schwachen Schatten statt eines harten.