
Text auf Hintergrundbild
Tricks zum Gewährleisten des Kontrastminimums
Wenn Text auf einem Hintergrundbild erscheint, treten vielfach Kontrastmängel auf. In diesem Artikel findest du Strategien zur Behebung von Problemen.
Optimieren der Schriftfarbe
Helle Schrift auf hellem Hintergrund und dunkle Schrift auf dunklem Hintergrund führen generell zu Kontrastproblemen. Nicht die Farbunterschiede, sondern die Helligkeitswerte gewährleisten die erforderlichen Kontraste.
Eine hellgrüne Schrift auf der hellblauen und wolkenweißen Hintergrundfläche ist dafür ein Negativbeispiel:

Steht eine durchgehend hellere Bildfläche zur Verfügung, sollte darauf positionierter Text mit einer dunklen Schriftfarbe versehen werden:

Positionieren der Beschriftung
Vielfach wird Text aus Unbedacht oder aus vermeintlichen ästhetischen Gründen auf einer Hintergrundfläche mit niedrigem Helligkeitskontras dargestellt:

Das Kontrastproblem kann dabei gelegentlich gelöst werden, indem der Text auf einen Bildabschnitt positioniert wird, auf dem die Schrift ausreichend kontrastiert:

Monochromer Texthintergrund
Weist ein Bild über die gesamte Fläche hellere und dunklere Bereiche nahe nebeneinander auf, lässt sich darüberliegender Text nicht ohne technische Maßnahmen mit ausreichend Kontrast darstellen.
Das folgende Foto eines Gebäudes zeigt helle Wandflächen unmittelbar neben dunklen Fensterrahmen mit buntem Blumenschmuck am Fensterbalken. Die Schrift erscheint teilweise unmittelbar neben schwarzen oder sehr dunklen Pixeln, wodurch der erforderliche Kontrast nicht gewährleistet wird:

Um Kontrastanforderungen zu entsprechen, wird der Text mit einer einfärbigen Fläche hinterlegt. Die Farbe der Fläche muss zum Text einen ausreichenden Kontrast aufweisen. Ein kleiner Teil des Bildes wird dadurch gänzlich verborgen, ohne dass wesentliche Bildinhalte verloren gehen.

Technische Realisierung
Hier kannst du mit den Developer Tools die auf Zweiter Blick verwendeten Techniken analysieren:

Goldenes Dachl Innsbruck
Transparenter Texthintergrund
Die Hintergrundfläche kann zum Bild auch eine Transparenz aufweise. Alle zur Schrift benachbarten Pixel müssen dabei den erforderlichen Kontrastverhältnissen entsprechen.

Technische Realisierung von Transparenz
Um im obigen Beispiel den Effekt aus Kontrast und Transparenz zu erzielen, wird bei einer schwarzen Schrift vor das Bild eine transparente weiße Fläche gelegt. Dafür wurden dafür folgende CSS-Anweisungen für den Texthintergrund festgelegt:
background: white; opacity: .46;
Schwellenwerte für Kontrast bei Transparenz
Das erzielte Kontrastverhältnis hängt vom Wert für die Eigenschaft opacity
ab. Für relevante Schwellenwerte habe ich dabei folgende Zusammenhänge ermittelt:
Kontrast | Opacity | Farbcode |
---|---|---|
3∶1 | 0.355 |
≙ #5b5b5b |
4,5∶1 | 0.46 |
≙ #757575 |
7∶1 | 0.59 |
≙ #969696 |
Kontrast | Opacity | Farbcode |
---|---|---|
3∶1 | 0.415 |
≙ #949494 |
4,5∶1 | 0.532 |
≙ #767676 |
7∶1 | 0.647 |
≙ #595959 |
Vorgehen: Zur Ermittlung der Schwellenwerte wurde die transparente Fläche jeweils auf eine völlig schwarze beziehungsweise völlig weiße Fläche positioniert. Mit der Farbpipette von Firefox wurde der erzielte Farbwert ermittelt und daraus das Kontrastverhältnis zur Schriftfarbe eruiert.
Varianten von Transparenz
Die Hintergrundfarbe für den transparenten Bereich kann für das grafische Design an den Bildhintergrund angepasst werden. Die Hintergrundfläche für den Text muss also nicht Grau sein. Entscheidend ist, dass der Kontrast zwischen Text und umgebenden Pixeln den Anforderungen entspricht.
Im folgenden Beispiel erscheint der Text auf einer Wiese. Als transparente Hintergrundfarbe wurde Grün gewählt. Der Texthintergrund erscheint zur Bildumgebung daher unauffälliger:
