# So wird Text auf Fotos lesbar, ganz ohne Box

[Canonical HTML page](https://gradiently.design/de/guide/readable-text-on-photos)

Eine feste Box hinter der Headline funktioniert, aber sie lässt jeden Post wie ein Meme aussehen. Diese Techniken halten das Foto ganz und die Wörter klar, mit Code fürs Web und Einstellungen für Social Posts.

## The short version

- Am verlässlichsten wird Text auf Fotos lesbar, wenn du die Wörter auf die ruhigste, gleichmäßigste Fläche des Bildes setzt.
- Ein Verlauf-Scrim, ein weicher Übergang von transparent zu dunkel an einem Rand des Fotos, gibt Text Kontrast ohne sichtbare Box.
- Ein Foto in einer oder zwei Farben zu tönen senkt Kontrast und Detail und macht jeden Text darüber leichter lesbar.
- Kräftigere, größere Schrift übersteht ein unruhiges Foto weit besser als dünne oder kleine.
- Text über Fotos sollte weiter die Kontrastempfehlungen erfüllen, grob 4,5 zu 1 für kleinen Text und 3 zu 1 für große Headlines.

Um **Text auf Fotos lesbar zu machen**, ohne ihn in eine Box zu setzen, beginne mit der Platzierung: Finde oder schaffe die ruhigste Fläche des Bildes und setze die Wörter dorthin. Reicht das nicht, füge ein **Verlauf-Scrim** hinzu, einen weichen Übergang von klar zu dunkel an einem Rand, senke dann mit einer Tönung den eigenen Kontrast des Fotos und mache zuletzt die Schrift kräftiger und größer. In dieser Reihenfolge bleiben Foto und Wörter intakt und klar. Eine Box ist die letzte Zuflucht, kein Ausgangspunkt.

Diese Seite behandelt speziell den Weg ohne Box. Für alle Techniken einschließlich Boxen, Bänder und Freisteller siehe [Text über Bild](https://gradiently.design/de/guide/text-over-image).

## Warum Text auf Fotos verloren geht

Text braucht einen Helligkeitsunterschied zwischen den Buchstaben und dem, was dahinter liegt. Ein Foto wechselt die Helligkeit ständig: ein weißes Hemd neben einem dunklen Türrahmen, Blätter vor Himmel. Wo ein Buchstabe von hell zu dunkel wechselt, verschwindet ein Teil von ihm. Feines Detail verschlimmert es, weil das Auge den Rand des Buchstabens nicht von der Textur dahinter trennen kann.

Ein Hochformat-Post, bei dem die Headline über einen unruhigen, ungleichmäßigen Hintergrund läuft und Teile der Buchstaben schwer lesbar sind

Das Problem auf einem Mark-Hintergrund: Wörter direkt über einer unruhigen Fläche verlieren Buchstaben, wo der Grund hell wird.

Derselbe Hochformat-Post mit ruhigerer, gleichmäßigerer Fläche hinter der Headline, sodass jedes Wort lesbar ist

Dieselben Wörter mit einer ruhigen, gleichmäßigen Fläche dahinter, der Effekt, den du von einem gut gewählten Ausschnitt willst. Keine Box, und jeder Buchstabe liest sich.

## Sechs Wege, Text auf Fotos lesbar zu machen

### 1. Für Freiraum auswählen und zuschneiden

Die beste Lösung passiert, bevor du ein Wort tippst. Wähle Fotos mit einer leeren Fläche: Himmel, eine Wand, eine Tischplatte, ein unscharfer Hintergrund. Schneide dann so zu, dass diese Fläche dort sitzt, wo die Headline hinkommt. Ein Hochformat-Post mit 1080×1350 gibt dir Platz, das Motiv nach unten zu schieben und das obere Drittel ruhig zu lassen. Fotografiere darauf hin, wenn du kannst: Tritt zurück und lass Raum über dem Motiv. [Schrift auf unruhigen Hintergründen](https://gradiently.design/de/guide/type-on-busy-backgrounds) behandelt Muster und Texturen, die sich wie unruhige Fotos verhalten.

### 2. Ein Verlauf-Scrim hinzufügen

Ein Scrim ist ein Verlauf über dem Foto, dunkel am Rand, wo der Text sitzt, und ausblendend bis ganz klar. Weil er ausblendet, liest das Auge ihn als abfallendes Licht statt als Form. Beschränke ihn auf das Drittel des Bildes, das die Wörter trägt, und nimm einen dunklen Ton aus dem Foto statt reines Schwarz.

- Scrim unten, warmes Schwarz: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)`
- Scrim oben, Marineblau: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)`
- Scrim seitlich, für Text links: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)`

Drei Scrims einzeln gezeigt. Über ein Foto gelegt, dunkelt jeder nur die Fläche mit den Wörtern ab und blendet vor dem Motiv aus.

### 3. Das Foto tönen

Ein Foto in einer oder zwei Farben zu tönen verengt seinen Hell-Dunkel-Bereich, sodass Text darüber überall leichter zu lesen ist. Ein dunkles Duotone, etwa tiefes Blau zu weichem Flieder, wirkt besonders gut hinter weißer Schrift; [Duotone-Effekt](https://gradiently.design/de/guide/duotone-effect) zeigt, wie du eines baust. Tönen lässt außerdem eine Reihe uneinheitlicher Fotos wie zu einer Marke gehörig aussehen.

### 4. Lokal abdunkeln oder aufhellen

Die meisten Bildeditoren lassen dich Belichtung oder Lichter in einem Bereich senken. Einen hellen Himmel direkt hinter der Headline um eine Blende zu senken, reicht oft allein und ist für jeden unsichtbar, der das Original nicht kennt.

### 5. Die Schrift robuster machen

Dünne, kleine Schrift verschwindet zuerst. Nimm Semibold oder Bold, geh eine Größe hoch und öffne den Buchstabenabstand bei kleinen Zeilen leicht. Eine schwere Grotesk mit 110 px hält über einem Foto, wo eine leichte Serife mit 70 px nie besteht. [Fette Schriften](https://gradiently.design/de/guide/bold-fonts) nennt verlässliche Schriften.

### 6. Das Foto neben die Wörter stellen

Manchmal ist die ehrliche Antwort, gar nicht zu überlappen. Schneide das Foto zu einem Kreis, Bogen oder der Hälfte des Bildes und setze die Wörter auf einen einfarbigen oder Verlaufgrund daneben. Das Foto bleibt ganz, und die Wörter bekommen perfekten Kontrast.

## Welche Technik zu welchem Foto passt

| Foto | Beginne mit | Dann |
| --- | --- | --- |
| Klarer Himmel oder schlichte Wand | Platzierung | Mehr ist nicht nötig |
| Motiv in der Mitte, unruhige Ränder | Zuschneiden, um einen Rand freizubekommen | Scrim an diesem Rand |
| Überall unruhig (Menge, Markt, Laub) | Tönung oder Duotone | Kräftigere Schrift |
| Helles, High-Key-Produktfoto | Dunkle Schrift auf der hellsten Fläche | Lichter lokal senken |
| Nacht oder dunkler Innenraum | Weiße Schrift über der dunkelsten Fläche | Leichtes Scrim, wenn Lichter die Wörter kreuzen |
| Detailreiches Foto, das du nicht ändern kannst | Foto neben den Wörtern | Gemeinsame Farbe, um beides zu verbinden |

Beginne mit der am wenigsten sichtbaren Technik und höre auf, sobald die kleinste Zeile lesbar ist.

## So legst du in CSS einen Verlauf-Overlay über ein Bild

Lege auf einer Website Scrim und Foto in einer `background`-Deklaration übereinander. Der Verlauf steht zuerst, damit er oben liegt. So bleibt der Effekt in CSS und passt sich jedem Zuschnitt des Layouts an.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}
```

Ein Scrim unten über einem Titelfoto, mit dunkler Fallback-Farbe, damit der Text lesbar ist, bevor das Bild ankommt.

Prüfe das Ergebnis an den Kontrastempfehlungen: grob 4,5 zu 1 für normalen Text und 3 zu 1 für große Headlines, wie im [Kontrastleitfaden von WebAIM](https://webaim.org/articles/contrast/) beschrieben. Teste den hellsten Punkt hinter den Wörtern, nicht den Durchschnitt. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt die Zahlen.

## Fehler bei Text auf Fotos, die du vermeiden solltest

### Vermeiden

- Leuchten oder verschwommene Höfe um jeden Buchstaben
- Ein schweres schwarzes Overlay über dem ganzen Foto
- Dünne Schreibschrift über einer detailreichen Szene
- Text quer über ein Gesicht legen
- Einen schlechten Zuschnitt mit immer stärkeren Effekten retten

### Besser

- Ein weiches Scrim nur an einem Rand
- Eine Tönung, die die Stimmung des Fotos bewahrt
- Ein kräftiger Schnitt in großzügiger Größe
- Wörter in dem Raum neben dem Motiv
- Neu zuschneiden oder ein anderes Foto wählen

Höfe und Leuchten um Buchstaben sind der häufigste Rettungsversuch und der, der am billigsten aussieht. Sie verwischen die Buchstabenränder, das Gegenteil dessen, was Lesen braucht. Wenn du in Versuchung bist, lies zuerst [Textschatten und bessere Alternativen](https://gradiently.design/de/guide/text-shadow-alternatives).

In Gradiently lassen sich Fotos in den Farben des Marks als Mono, Duotone oder Wash tönen und in Bögen, Kreise und Blobs zuschneiden, damit sie neben den Wörtern sitzen. Bei Designs, in denen der Mark durchscheint, schiebt er seine ruhigste Fläche hinter den Text, und Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift, ohne Boxen, Schatten oder Unschärfe.

## FAQ

### Wie hebe ich Text auf einem unruhigen Foto hervor?

Setze ihn auf die ruhigste Fläche, füge an diesem Rand ein weiches Verlauf-Scrim hinzu, töne das Foto, um den Kontrast zu senken, und nimm einen kräftigeren, größeren Schnitt.

### Was ist ein Scrim im Design?

Ein Scrim ist ein Verlauf-Overlay, das einen Teil eines Bildes abdunkelt oder aufhellt und bis klar ausblendet, damit dort platzierter Text genug Kontrast hat.

### Soll ich einen Textschatten nutzen, um Text auf einem Foto lesbar zu machen?

Ein weiches Leuchten oder ein Hof wirkt meist billig und verwischt die Buchstaben. Platzierung, ein Scrim oder eine Tönung geben sauberere Ergebnisse.

### Welches Kontrastverhältnis braucht Text auf einem Foto?

Ziele auf etwa 4,5 zu 1 für normalen Text und 3 zu 1 für große Headlines, gemessen am hellsten Punkt hinter den Wörtern.