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.

Das Tool »Optimal Overlay Finder« zeigt die perfekte Deckkraft für das Overlay an

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.

Direkter Link zum Tool

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Klaus F. Schmidt
    schrieb am 27.05.2021 um 03:54 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 27.05.2021 um 07:23 Uhr:

      Welche zu blasse Schrift meinst du denn konkret?

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Barrierefreie Projekte mit kulturbanause

Wir setzen regelmäßig digitale Produkte barrierefrei um und kennen die Anforderungen im konzeptinellen, gestalterischen, redaktionellen und technischen Bereich.

Leistungsangebot Barrierefreiheit →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →