Text auf Bild: sieben Wege, damit Worte lesbar bleiben

Text auf Bild bleibt lesbar, wenn die Fläche direkt hinter den Buchstaben ruhig und deutlich heller oder dunkler als der Text ist. Sieben Techniken bringen dich dorthin: den Ausschnitt so wählen, dass die Worte auf eine ruhige Fläche fallen, einen Scrim hinzufügen, das Foto tönen, es weichzeichnen, den Text rahmen, die Schriftfarbe nach Helligkeit wählen und Worte dort platzieren, wo das Auge ohnehin ruht. Die meisten guten Designs kombinieren zwei davon, und keine braucht einen massiven Kasten über dem Foto.

Dasselbe Problem tritt bei Farbverläufen und gemusterten Hintergründen auf; Text auf Farbverlauf und Schrift auf unruhigen Hintergründen behandeln diese Fälle. Dieser Leitfaden konzentriert sich auf Fotos.

Warum Text auf Fotos verschwindet

Zwei Dinge machen Buchstaben auf einem Bild schwer lesbar: geringer Kontrast und Details. Geringer Kontrast heißt, die Buchstaben liegen in der Helligkeit zu nah an dem, was dahinter ist, etwa weißer Text über hellem Himmel. Details heißt, der Hintergrund hat Kanten und Texturen in derselben Größenordnung wie die Buchstaben, etwa Blätter, Menschenmengen oder Stoff, sodass das Auge beides nicht trennen kann. Jede Technik unten reduziert eines davon oder beides.

Sieben Techniken für lesbaren Text auf Bildern

1. Auf eine ruhige Fläche zuschneiden

Bevor du irgendetwas hinzufügst, verschieb das Foto. Die meisten Fotos haben eine ruhige Region: Himmel, eine Wand, Wasser, Schatten, einen unscharfen Hintergrund. Schneide zu oder positioniere neu, damit die Worte dorthin fallen. Das ist die einzige Technik, die nichts hinzufügt, deshalb sieht sie am saubersten aus. Wenn du für ein Design fotografierst, lass diesen Raum bewusst frei.

2. Einen Scrim hinzufügen

Ein Scrim ist ein weicher Verlauf von dunkel zu transparent, nur dort gesetzt, wo der Text steht, meist unten oder oben im Bild. Er dunkelt die Fläche hinter den Worten ab und läuft aus, bevor er das Motiv erreicht, sodass der Großteil des Fotos unberührt wirkt. Er ist die Standardtechnik für Karten, Hero-Bilder und Video-Thumbnails.

.photo-card {
  position: relative;
  isolation: isolate;
}

.photo-card img {
  position: relative;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim: dark at the bottom, clear by 60% up. */
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72) 0%,
    rgb(0 0 0 / 0.38) 30%,
    rgb(0 0 0 / 0) 60%
  );
}

.photo-card h2 {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.5rem;
  color: #fff;
  text-wrap: balance;
}

3. Das Foto tönen: Duotone oder Farbschleier

Ein Foto auf zwei Farben abzubilden (ein Duotone) oder einen einzelnen Farbschleier darüberzulegen, staucht seinen Helligkeitsumfang. Das Foto wird ruhiger und gleichmäßiger, und Text in kontrastierender Farbe ist überall darauf lesbar. Außerdem holt es Fotos in deine Markenfarben, was nützlich ist, wenn Bilder aus vielen Quellen kommen.

4. Hinter den Worten weichzeichnen

Unschärfe entfernt die feinen Details, die mit Buchstaben kämpfen, und behält Farbe und Licht des Fotos. Zeichne das ganze Bild weich für einen sanften Hintergrund oder nur ein Band hinter dem Text. Nimm genug Unschärfe, dass Kanten verschwinden; eine leichte Unschärfe sieht nur wie ein Fehler aus. Unscharfer Hintergrund zeigt, wie viel du nehmen solltest.

5. Den Text rahmen

Manchmal ist die richtige Antwort ein klarer Raum: ein Band in Vollfarbe, ein Panel oder ein geteiltes Layout mit dem Foto auf einer Seite und Worten auf der anderen. Das ist ehrlich und immer lesbar. Nimm die Farbe des Rahmens aus dem Foto, damit er zum Bild gehört, statt es zu verdecken.

6. Die Schriftfarbe nach Helligkeit wählen

Entscheide zwischen heller und dunkler Schrift nach der Helligkeit der Fläche dahinter, nicht nach der Farbe, die dir gefällt. Dann prüf es: Ziel auf mindestens 4,5:1 für normalen Text und 3:1 für großen Text, die Kontraststufen der WCAG. Nimm die hellsten und dunkelsten Pixel hinter den Buchstaben auf und teste beide mit einem Tool wie dem Kontrastprüfer von WebAIM. Ein weicher Schatten wie text-shadow: 0 1px 12px rgb(0 0 0 / 0.45) kann kleiner Schrift helfen, einen schlechten Ausschnitt rettet er aber nicht.

7. Worte dort platzieren, wo das Auge ruht

Setz Text dorthin, wohin das Foto den Blick führt: entlang eines Horizonts, in den Raum, in den eine Person schaut, oder gegenüber dem Motiv. Leg keine Worte über Gesichter, Hände oder das Produkt, und halte sie von Rändern fern, die Plattformen mit Buttons verdecken oder auf manchen Bildschirmen abschneiden.

Welche Technik zu welchem Foto passt

Text auf Bildern in einer Marke einheitlich halten

Machen mehrere Leute Posts, wähl eine oder zwei Techniken und schreib sie auf: zum Beispiel einen Scrim unten in fester Stärke für jeden Fotopost und ein Duotone in Markenfarben für Zitate. Im Studio von Gradiently lassen sich Fotos zuschneiden und in den Farben des Marks als Mono, Duoton oder Wash tönen, sodass Fotoposts in derselben Familie liegen wie deine übrigen Designs. Halte die Regel in deinem Marken-Styleguide fest.