Layoutsystem

Text auf Bildern

Dieser Guide zeigt einige Möglichkeiten auf, wie sich die Lesbarkeit von Text auf Bildern verbessern lässt.

Text auf Bildern
  • Anpassung der Designelemente
  • Änderung der Schriftfarbe
  • Verwendung einer halbtransparenten Verlaufsebene
  • Aufhellen der Hintergrundzone
  • Überlagern des Gesamtbilds

Anpassung der Designelemente

Wenn die Bildkomposition unausgewogen ist oder das Hintergrundbild nicht genug Kontrast bietet, um den Text mühelos zu lesen, können Sie Designelemente wie den Farbverlauf anpassen.

Änderung der Schriftfarbe

Sie können die Schriftfarbe ändern, um ausreichenden Kontrast herzustellen und die Lesbarkeit zu verbessern (siehe auch Web Content Accessibility Guidelines). Für Überschriften verwenden wir Schwarz mit DHL Rot als optionalem Highlight, Postgelb oder Weiß. Auf dunklen Bildern empfiehlt sich Weiß.

Verwendung einer halbtransparenten Verlaufsebene

Eine weitere Möglichkeit, die Lesbarkeit von Text auf dunklen, unruhigen Bildern zu verbessern, ist die Verwendung eines undurchsichtigen bis transparenten Verlaufs hinter der Textebene. Als Verlaufsfarbe empfehlen wir Schwarz, Weiß, Postgelb oder eine im Bild enthaltene Schattenfarbe.

Aufhellen der Hintergrundzone

Zu dunkle oder ungleichmäßige Hintergründe können die Lesbarkeit von rotem oder schwarzem Text erschweren. Dies lässt sich, wie unten gezeigt, durch Aufhellen der Zone hinter dem Verlauf beheben. Dabei muss jedoch der Gesamteindruck des Bildes erhalten bleiben, da sonst die Hauptaussage des Designs verloren geht. Achten Sie darauf, die hellere Zone im Hintergrund zu platzieren und an der Form des gelben Highlight-Verlaufs auszurichten.

Überlagern des Gesamtbilds

Abhängig vom jeweiligen Bild kann auch das Überlagern mit einer durchgängig transparenten schwarzen Ebene das Bild verdunkeln und den erforderlichen Kontrast liefern.