Stellen Sie einen hohen Kontrast von Texten auf Bildern sicher

by Aurora Bedford (deutsche Übersetzung) - 18.10.2015

Ein gut gewähltes visuelles Element kann Interesse wecken und tonangebend für eine Website sein – ausserdem hat es (hoffentlich) auch eine Bedeutung. Eyetracking-Studien haben gezeigt, dass Menschen von Fotos angezogen werden, die Informationen enthalten sofern die Bilder mit der aktuellen Aufgabe des Nutzers in Verbindung stehen. (Falls die Bilder stattdessen rein dekorativ sind, werden sie mit grosser Wahrscheinlichkeit komplett ignoriert.) Bilder können bei Betrachtern schnell eine emotionale Reaktion auslösen und sie zu Handlungen motivieren. Die Fähigkeit eines Bildes, eine positive viszerale Reaktion hervorzurufen, motivierte viele Designer dazu, höchst visuelle Nutzeroberflächen zu erstellen, Texte zu vernachlässigen und grosse Hintergrundbilder oder Videos zu verwenden. (Grosse Bilder sind häufig in Verbindung mit Minimalismus zu sehen, obwohl sie diesen Designtrend nicht wirklich definieren.)

Da Bilder eine so wichtige Rolle spielen, platzieren Designer Texte häufig über einem Bild, um die publikumswirksamen Eigenschaften des Fotos zu nutzen, wonach die textbasierten Inhalte tatsächliche Informationen kommunizieren. Dieses Vorhaben scheitert normalerweise aber – meist ist der Grund dafür, dass der Kontrast zwischen dem Text und dem Hintergrund zu gering ist. Laut den Voraussetzungen für Barrierefreiheit von Farbkontrasten, sollten Texte, die nicht rein dekorativ oder Teil eines Logos sind, ein Kontrastverhältnis von mindestens 4,5:1 (oder 3:1 für grosse Zeichen, definiert als Schriftgrösse 18 oder fettgedruckte Schriftgrösse 14) aufweisen.

Subtile Anpassungen können starke Veränderungen der Usability zur Folge haben

Es muss nicht komplett vermieden werden, Texte über einem Bild zu platzieren. Es ist allerdings besondere Vorsicht notwendig, um sicherzustellen, dass der Text sichtbar und lesbar für die Nutzer ist. (Eine Erinnerung: Sichtbarkeit bezieht sich auf die Fähigkeit, die einzelnen Zeichen zu erkennen, während Lesbarkeit bedeutet, dass die Bedeutung der Wörter erfasst werden kann.) Wenn Texte schwer zu entziffern sind, sind die Leser gezwungen, entweder ihre Augen zu überanstrengen oder den Inhalt zu überspringen. Anstatt zu riskieren, dass Ihr Text von den Nutzern ignoriert wird, sollten Sie kleine Designänderungen implementieren, um den Kontrast zwischen Text und Hintergrund zu erhöhen.

Don’t:

Links: Das Hintergrundbild, das für die dritte Folie des Karussells auf der Startseite von Spire.com verwendet wird, ist sowohl verschwommen als auch visuell überladen, was den Text schwer lesbar macht. Rechts: Ein Instrument zur Kontrastverhältnis-Analyse bestätigt, dass der weisse Text keinen ausreichenden Kontrast zum Hintergrund aufweist (die dunklen, nicht umrandeten Bereiche sind jene, die das empfohlene Kontrastverhältnis von 4,5:1 für klein gedruckte Texte nicht erreichen).

Do:

Links: Den Hintergrund mit einem radial verlaufenden Overlay zu verdunkeln, ermöglicht einen stärkeren Kontrast des weissen Texts, ohne den visuellen Eindruck des Bildes zu stark zu verändern. Rechts: Die editierte, verdunkelte Version respektiert das Kontrastverhältnis von 4,5:1, das für Barrierefreiheit notwendig ist.

Wenn Sie Texte über einem Bild platzieren, sollten Sie sowohl über die Textfarbe als auch die Hauptfarbe des Bildes nachdenken. Bilder mit vorwiegend dunklen Hintergründen – oder Bilder, die bearbeitet wurden, um unscharf zu erscheinen – eignen sich nicht gut für weisse Texte, da die Farben zu ähnlich sind. In diesen Situationen muss der Hintergrund verdunkelt werden, um genügend Kontrast zu bieten. Das kann erreicht werden, indem das Bild selbst bearbeitet wird oder indem im CSS ein halbtransparenter schwarzer Farbverlauf über das Bild gelegt wird. Ein Tool, wie die Color Contrast Analyzer Chrome Browser-Erweiterung von NCSU, kann Ihnen dabei helfen, festzustellen, ob der Hintergrund dunkel genug ist, um ausreichend Kontrast zum darüber liegenden Text zu bieten.

Don’t:

Links: Die Möbel-Website Compliments zeigt Links zu Produktkategorien in weisser Schrift über Fotos an. Diese Kategorielinks sind aufgrund des geringen Kontrasts schwer zu lesen und werden daher mit grosser Wahrscheinlichkeit ignoriert (bzw. werden leichter erkennbare Elemente bevorzugt). Rechts: Der Grossteil der Bereiche, in denen Texte über einem Hintergrundfoto platziert wurden, erreicht das Kontrastverhältnis von 3:1 für grosse Texte nicht.

Do:

Links:In dieser editierten Version ist die Unterseite der Fotos, die den Text enthält, verschwommen. Die Schriftfarbe ist jetzt nicht mehr Weiss, sondern die dunkle Standardfarbe. Ausserdem wurde der Text nach unten verschoben, damit seine Platzierung mit den anderen Elementen übereinstimmt, wodurch ein kleinerer Bereich des Bildes unscharf angezeigt werden muss. Rechts: Der Text weist jetzt das benötigte Kontrastverhältnis von 3:1 auf, das für Barrierefreiheit notwendig ist. Noch besser ist, dass der Text auch das 4,5:1 Verhältnis für klein gedruckte Texte einhält, was eine gute Lesbarkeit sicherstellt.

Fotos einen verschwommenen Effekt hinzuzufügen, hat definitiv Auswirkungen auf die Ästhetik und das Branding der Website – es ist aber eine gute Alternative zur Verdunkelung jedes einzelnen Bildes. Ausserdem werden Probleme mit der Lesbarkeit reduziert, indem jener Teil des Fotos, auf dem sich der Text befindet, unscharf angezeigt wird. Durch die grosse Anzahl von Farben und Helligkeitsstufen sind die Umrisse der Zeichen nämlich schlechter zu erkennen. Den Textbereich in der Nähe des Bildrands zu platzieren, ermöglicht es ausserdem, die Unschärfe auf einen bestimmten Bereich zu beschränken, wodurch das Bild weniger stark verändert wird. Der untere Teil von Fotos eignet sich besonders gut für Effekte, wie Unschärfe, verdunkelnde Farbverläufe (auch „Floor Fade“ genannt) oder halbtransparent gefärbte Hintergründe.

Don’t:

Links: Die REI-Website platziert ein halbdurchsichtiges schwarzes Kästchen hinter Texten, die sich über einem Bild befinden. Der Kontrast ist aber immer noch zu gering, um die Lesbarkeit des weissen Texts auf hellen Hintergrundfotos zu fördern. Rechts: Die Hauptüberschrift, die sich über Wolken befindet, erreicht die 3:1 Grenze des Kontrastverhältnisses für grosse Texte nicht.

Do:

Links: In unserem Redesign wurde die Verdunkelung aller schwarzen Textfelder auf 50% (statt 30%) erhöht, wodurch der Gesamteindruck der Marke erhalten bleibt und gleichzeitig der Kontrast erhöht wird, der für den weissen Text über den Wolken notwendig ist. Rechts: Der Text im Kästchen besteht jetzt den 3:1 Kontrastverhältnis-Test.

Ziehen Sie alle möglichen Bilder, die verwendet werden können, in Erwägung, bevor Sie eine der Techniken anwenden, um den Kontrast des überlagernden Textes zu erhöhen. Die Lösungen eignen sich oft nur für eine Art von Bild – zum Beispiel für dunkle Fotos mit geringer Tiefenschärfe – aber nicht unbedingt für alle anderen. Falls das Design sowohl dunkle als auch helle Bilder enthält, stellen Sie sicher, dass die gewählte Methode einen ausreichenden Kontrast für das potenziell am schlechtesten geeignete Hintergrundbild und die schlechteste Textplatzierung bietet. Etwas zu tun, um den Kontrast zu erhöhen, bedeutet nicht notwendigerweise, dass der Kontrast ausreicht, um den Text wirklich lesbar zu machen.

Schlussfolgerung

Sie müssen sich nicht entscheiden, ob Sie ein nutzbares Design oder ein ästhetisch ansprechendes Design schaffen möchten – Sie können beide Kriterien erfüllen, indem Sie beiden Zielen Ihre Aufmerksamkeit widmen. Wenn Sie emotionsauslösende Bilder mit informativen Texten kombinieren, sollten Sie sicherstellen, dass die Texte lesbar sind, indem ein hohes Kontrastverhältnis zwischen Text und Hintergrund gewählt wird. Verwenden Sie Effekte, wie halbtransparente Overlays (die entweder das ganze Bild oder nur den Textteil bedecken), Unschärfe, Textschatten oder Umrisse (oder eine Kombination dieser Techniken). Denken Sie daran, dass es nicht ausreicht, es Menschen zu ermöglichen, die Website zu verwenden, was die Definition von Barrierefreiheit ist. Die Website muss auch einfach und angenehm zu verwenden sein: Eigenschaften, die eine gute Usability und eine geringe Belastung der Augen notwendig machen.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.