Hintergrund für Text: was Worte leicht lesbar macht

Ein guter Hintergrund für Text hat im Bereich hinter den Worten drei Dinge: starken Kontrast zu den Buchstaben, sehr wenig feine Details und einen gleichmäßigen Tonwertbereich statt heller und dunkler Flecken. Farbe zählt viel weniger, als viele denken. Ein violetter Verlauf kann Text wunderbar tragen, und ein graues Foto kann ihn ruinieren, je nach diesen drei Eigenschaften. Dieser Guide zeigt, wie du jeden Hintergrund beurteilst, ob Foto, Verlauf oder Textur, und was zu tun ist, wenn einer versagt.

Kontrast: die erste Eigenschaft

Kontrast ist der Helligkeitsunterschied zwischen den Buchstaben und dem, was direkt dahinter liegt. Die Web Content Accessibility Guidelines setzen die messbare Grenze: ein Verhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Der Kontrastrechner von WebAIM berechnet es für zwei beliebige Farben.

Auf einer flachen Farbe reicht eine Prüfung. Auf einem Verlauf oder Foto ändert sich der Hintergrund unter jedem Wort, also prüf die hellste Stelle hinter heller Schrift und die dunkelste hinter dunkler Schrift. Dort versagt Text zuerst. Farbkontrast und Barrierefreiheit geht tiefer auf die Standards ein.

Details: warum unruhige Hintergründe schwer lesbar sind

Kontrast ist nötig, aber nicht genug. Ein Hintergrund voller Details in Buchstabengröße erschwert das Lesen, selbst wenn das Verhältnis besteht, weil das Auge die Formen der Buchstaben nicht von den Formen dahinter trennen kann. Blätter, Kies, Menschenmengen, feine Streifen und kleine Muster sind die schlimmsten. Große, weiche Formen sind am besten: ein Himmel, eine unscharfe Wand, ein glatter Verlauf.

Textur ist in Ordnung, wenn ihre Körnung viel kleiner ist als die Buchstaben, wie Filmkorn oder Papierstruktur. Zum Problem wird sie, wenn ihre Elemente sich der Strichstärke deiner Schrift nähern. Wenn du ein Muster liebst, skalier es hoch, bis seine Formen deutlich größer sind als die Buchstaben, oder halte es von den Worten fern. Text auf unruhigen Hintergründen behandelt Muster ausführlicher, und lesbarer Text auf Fotos behandelt Bilder.

Tonwertbereich: helle und dunkle Flecken unter einer Zeile

Die dritte Eigenschaft erwischt viele. Wenn eine einzige Textzeile sowohl einen hellen als auch einen dunklen Fleck kreuzt, kann keine einzelne Schriftfarbe funktionieren: Weiß verschwindet auf dem hellen Teil und Schwarz auf dem dunklen. Ein guter Hintergrund für Text hält unter jeder Zeile einen schmalen Tonwertbereich, ganz hell oder ganz dunkel.

So testest du jeden Hintergrund für Text

1. 1

   Augen zusammenkneifen

   Schließ die Augen halb. Details verblassen, nur der Tonwert bleibt. Lösen sich die Worte im Hintergrund auf, ist der Kontrast zu niedrig.

2. 2

   Weichzeichnen

   Leg einen starken Weichzeichner auf eine Kopie des Hintergrunds allein. Was unter dem Textbereich übrig bleibt, ist der Ton, auf dem die Buchstaben wirklich sitzen.

3. 3

   In Graustufen ansehen

   Farbe kann dich glauben lassen, der Kontrast sei in Ordnung. Graustufen zeigen nur die Helligkeit, und davon hängt Lesbarkeit ab.

4. 4

   Die Extreme prüfen

   Miss den Kontrast an der hellsten und dunkelsten Stelle hinter den Worten, nicht im Durchschnitt.

5. 5

   Auf einem Handy ansehen

   Auf Armlänge, bei Tageslicht, in der Größe, in der man es wirklich sieht.

Einen Hintergrund reparieren, der gegen den Text kämpft

Die meisten Lösungen fügen etwas hinzu: einen Kasten, einen Schatten, ein dunkles Band. Sie funktionieren, aber jede ist ein Flicken, der das Design gerettet aussehen lässt. Probier die Lösungen in dieser Reihenfolge, von der unsichtbarsten zur sichtbarsten.

Im Web ist eine sanfte Verlaufsüberlagerung auf einer Seite eines Hero-Bildes eine ordentliche Version der fünften Lösung: Sie vertieft nur den Bereich unter den Worten und lässt den Rest des Bildes in Ruhe.

.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}

Gradiently baut die unsichtbarsten Lösungen direkt in den Hintergrund ein. Ein Mark weiß, wo deine Worte stehen: Sein ruhigster, kontrastreichster Bereich wandert hinter den Text, Farben nahe den Buchstaben werden tiefer oder heller, unruhige Details beruhigen sich, und die automatische Schriftfarbe wählt für jede Zeile helle oder dunkle Schrift aus der Palette des Marks. Es gibt keine Kästen, Schatten oder Unschärfe, und du bestimmst, wie stark er reagiert. So funktioniert die automatische Schriftfarbe erklärt die Details, und Text auf einem Verlauf zeigt die manuelle Methode für jeden Verlauf.