Texte auf Hintergrund-Bildern lesbar gestalten
Texte, die vor Hintergrundfotos oder Videos platziert werden, sind ein beliebtes Gestaltungsmerkmal auf Websites. Leider ist die Lesbarkeit der Texte oft schlecht, da das Hintergrundbild entweder sehr unruhig ist, oder sehr viele verschiedene Farben beinhaltet. Um dieses Problem zu lösen, wird das Bild häufig mit einer Farbe überlagert um die Lesbarkeit wieder herzustellen.
Das perfekte Overlay für Bilder
Wenn das Kontrastverhältnis zwischen Text und Hintergrund den AA-Kriterien der WCAG entsprechen soll, wird es mit einem Foto als Hintergrund etwas komplizierter als mit einem einfarbigen Hintergrund.
Im Falle von weißem Text, müsste man beispielsweise zunächst die hellste Stelle im Bild finden. Anschließend muss entschieden werden, mit welcher Farbe das Foto überlagert wird. Im dritten Schritt muss berechnet werden, mit welcher Deckkraft die hellste Stelle überlagert werden muss, damit das Kontrastverhältnis ausreichend ist. Ziemlich lästig. Glücklicherweise wurde zu diesem Zweck ein Tool entwickelt.
Moin,
als Erstes möchte ich mal sagen, dass ich den Eindruck habe, Ihr versteht viel von der Materie!
Warum aber, ist diese Schriftfarbe so blass (Zeitgeist?)? Es muss ja nicht
gerade „pechschwarz“ sein, aber doch lesbar (Auch für Menschen OHNE Leseschwäche).
Haltet durch und weiterhin viel Erfolg.
Klaus F. Schmidt
Welche zu blasse Schrift meinst du denn konkret?