Kontraste
 Contrast

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:

Screenshot Heller Himmel über grüner Wiese. Über dem Himmel der Schriftzug: Frühling im Inntal.

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

Screenshot Heller Himmel über grüner Wiese. Über dem Himmel der Schriftzug: Frühling im Inntal in dunkelgrüner Farbe.

Positionieren der Beschriftung

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

Screenshot Dunkelgrüner Schriftzug auf Wiese im Hintergrund

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

Screenshot Dunkelgrüner Schriftzug auf hellem Himmel im Hintergrund

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:

Screenshot Goldenes Dachl als Hintergrund mit Schriftzug Goldenes Dachl Innsbruck unmittelbar auf dem Foto

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.

Screenshot Goldenes Dachl als Hintergrund mit Schriftzug Goldenes Dachl Innsbruck auf grauer Hintergrundfläche
Technische Realisierung

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

Goldenes Dachl von Innsbruck

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.

Screenshot Goldenes Dachl als Hintergrund mit Schriftzug Goldenes Dachl Innsbruck auf transparenter Hintergrundfläche

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:

Schwarze Schrift auf transparentem weißen Hintergrund
Kontrast Opacity Farbcode
3∶1 0.355 ≙ #5b5b5b
4,5∶1 0.46 ≙ #757575
7∶1 0.59 ≙ #969696
Weiße Schrift auf transparentem schwarzen Hintergrund
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:

Wiese hinter dem Schriftzug: Frühling im Inntal