Layoutsystem

Text auf Bildern

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

Dieser Guide enthält

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.

Um den nötigen Kontrast herzustellen, haben wir den Highlight-Verlauf nach unten erweitert, sodass sich der schwarze Text auf dem leicht transparenten Gelb abhebt.

In diesem Bild ist der Text schlecht lesbar, weil das Hintergrundbild nicht genügend Kontrast bietet.

In diesem Beispiel haben wir die Layoutfläche in zwei Sektionen unterteilt und den Vollformat-Verlauf gewählt.

Hier ist der Text ebenfalls schlecht lesbar, weil das Hintergrundbild nicht genügend Kontrast bietet.

Ä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ß.

Wenn wir die Schriftfarbe in Weiß ändern, verstärkt sich der Kontrast und die Überschrift ist mühelos lesbar.

Wie wir hier sehen, bietet Schwarz keinen idealen Kontrast auf dem eher dunklen Hintergrundbild.

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.

Durch das Einfügen eines linearen Verlaufs, der sich von oben nach unten von Schwarz in transparent ändert (Deckkraft: 40 %), verdunkeln wir das Hintergrundbild und schaffen den nötigen Kontrast, ohne die bildliche Wirkung zu mindern.

Im obigen Beispiel stimmen zwar die Schriftfarben (Postgelb und Weiß) der Überschrift, Topline und des Fließtexts, der Kontrast ist dennoch ungenügend und der Text schlecht lesbar.

Durch das Einfügen eines Verlaufs mit einer Deckkraft von 40 %, der sich von Schwarz in transparent ändert, verdunkeln wir das Bild gerade so viel, dass der Text lesbar wird.

Weiß passt zwar gut ins Bild, die Lesbarkeit ist jedoch schlecht.

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.

Durch das Einfügen eines durchgängig transparenten schwarzen Overlays über dem gesamten Bild verdunkeln wir es. Damit erreichen wir den gewünschten Kontrast und eine bessere Lesbarkeit.

Im obigen Bild bieten die weiße Überschrift und die Topline nicht ausreichend Kontrast zum Hintergrundbild, was die Lesbarkeit erschwert.