Kontrastarme Texte sind keine Lösung

by Katie Sherwin (deutsche Übersetzung) – 07.06.2015

Der Trend des kontrastarmen Designs spukt derzeit im Internet herum und hat es eindeutig auf die Lesbarkeit und Auffindbarkeit abgesehen. Er strapaziert unsere Augen und sorgt dafür, dass wir uns alt und weniger leistungsfähig fühlen. Basierend auf dem Trend des Minimalismus, verabschieden sich Websites von ihren kontrastreichen Traditionen und wechseln auf die dunkle Seite (oder vielleicht eher die mittelgraue Seite). Für Websites, die bereit sind, die Lesbarkeit einem trendigen Design zu opfern, ist kontrastarmer Text eine logische Wahl – mit vorhersagbaren, immerwährenden Usability-Problemen.

Bevor Sie kontrastarme Farben auf einer Website verwenden (was vor allem für Texte gilt), sollten Sie sich Gedanken über die Gründe machen, aus denen Sie die Usability verschlechtern möchten. Überlegen Sie danach, aus welchen Gründen Sie sich für ein kontrastarmes Design entschieden haben und informieren Sie sich über Alternativen, die Ihnen dabei helfen, diese anfänglichen Designziele zu erreichen, ohne das Nutzererlebnis zu verschlechtern.

Es ist offensichtlich, dass Squarespace.com Nutzer dazu bringen möchte, auf den kontrastreichen Button Get Started in der oberen rechten Ecke zu klicken. Doch möchte das Unternehmen auch, dass sich Kunden über die Funktionen informieren und die Navigation verwenden? Der graue Text auf hellgrauem Hintergrund kommuniziert Gleichgültigkeit. Der Kontrast des Menüs und des Haupttexts ist so gering, dass nur wenige Nutzer die Inhalte lesen werden.

Kontrastarmer Text verschlechtert die Usability (doch das wussten Sie bereits)

Ein zu geringer Kontrast zwischen Textfarbe und Hintergrund verschlechtert die User Experience aus folgenden Gründen:

• Die Lesbarkeit leidet. Ein zu geringer Kontrast belastet die Augen der Nutzer, während diese versuchen, die Wörter zu entziffern. Forschung zeigt, dass Menschen Texten, die schwer zu lesen sind, auch weniger vertrauen – ein Relikt aus der Zeit des «Kleingedruckten». (Mehr über Vertrauenswürdigkeit erfahren Sie in unserem Kurs Überzeugendes Webdesign (engl.))
• Die Erkennbarkeit und Auffindbarkeit werden reduziert. Nutzer, die ein Element auf einer Website nicht wahrnehmen können, können es auch nicht verwenden. Wenn es an einer ungewöhnlichen Stelle der Website platziert wurde, fällt ein kontrastarmes Element nicht auf, während der Nutzer die Seite überfliegt. Dazu gehören zum Beispiel ein graues Suchsymbol auf grauem Hintergrund oder ein Login-Link in der oberen linken Ecke (statt der oberen rechten Ecke). Bedenken Sie, dass das Überprüfen der Erkennbarkeit und Auffindbarkeit mehr als nur Analytics voraussetzt, da Ihnen Click-Through Daten zwar verraten, welche Dinge wenige Klicks erhalten – aber nicht warum.
• Das Nutzervertrauen sinkt. Was würden Sie lieber verwenden: eine Website, die Ihnen das Gefühl gibt, wie erwartet zu funktionieren, oder eine Website, die Ihnen das Gefühl gibt, dass mit Ihnen etwas nicht stimmt, da Sie das Gesuchte nicht finden können? Im Rahmen von Tests beobachtete ich viele Nutzer, die sich selbst die Schuld dafür geben, dass sie Aufgaben auf einer modern gestalteten Website nicht erledigen können, da sie den Text nicht sehen oder Probleme mit der Lesbarkeit hatten. Wenn sich Personen auf einer Website nicht wohl fühlen, werden sie sie mit grosser Wahrscheinlichkeit verlassen und sich an anderer Stelle umsehen.
• Die mobile Nutzung wird noch schwieriger. Stellen Sie sich vor, kontrastarme Texte auf einem mobilen Gerät zu lesen, während Sie im grellen Sonnenlicht spazieren. Sogar kontrastreicher Text ist aufgrund des blendenden Lichts schwer zu lesen – kontrastarmer Text wird praktisch unlesbar.
• Die Erreichbarkeit wird für Nutzer mit Sehbehinderungen oder kognitiven Beeinträchtigungen stark reduziert. Wenn wir älter werden, reduziert sich unsere Sehkraft. Millionen Menschen auf der ganzen Welt leiden unter Sehbehinderungen, inklusive Altersweitsichtigkeit (Schwierigkeiten, nahe Objekte scharf zu sehen), Makuladegeneration, Grüner Star und Katarakten. Doch nicht nur Nutzer, die schlecht sehen, sind betroffen: die kognitiven Bedingungen könnten das Kurzzeitgedächtnis und die Konzentrationsfähigkeit beeinträchtigen, was die Verwendung von kaum erkennbaren Texten extrem schwierig macht.
• Die kognitive Belastung wird erhöht. Wenn Nutzer falsche Aufforderungen oder irreführende Hinweise sehen, dauert es länger, bis sie Informationen richtig interpretieren können. Normalerweise werden deaktivierte Funktionen verdunkelt oder grau angezeigt. Kontrastarme Texte könnten dem Nutzer falsche Informationen über die Verfügbarkeit einer Option liefern.

Sehen Sie, auf welcher Seite sich der Nutzer gerade befindet? Der aktuell geöffnete Karteireiter (Support) auf der Apple.com Website wird kommuniziert, indem der graue Text etwas dunkler eingefärbt wird. Die Navigation ist ein besonders risikoreicher Ort für kontrastarme Texte, da Nutzer glauben könnten, dass ihre Optionen beschränkt sind. Ausserdem könnten sie Zeit verschwenden, während sie versuchen, ihren Standort auf der Seite zu ermitteln.

Auf GitHub ist das Suchfeld mit dem Text Search Showcases grau eingefärbt, was den Eindruck erweckt, dass es nicht verfügbar ist.

Warum Designer kontrastarme Texte verwenden

Wir leben wohl oder übel in einem Zeitalter des Minimalismus.

Der Minimalismus im Webdesign begann als Gegenbewegung zur jahrzehntelangen Entwicklung von Nutzeroberflächen, auf denen so viele Elemente hervorgehoben wurden, dass diese um Aufmerksamkeit kämpften und zu visueller Überforderung führten.

Ein positiver Aspekt des Minimalismus ist die Entfernung unwesentlicher Elemente. In den meisten Fällen ist das eine empfohlene Vorgehensweise.

Der Minimalismus wird allerdings zum Problem, wenn sich auf einer Seite sehr viele wichtige Inhalte befinden. Grosse Mengen von Inhalten passen nicht zum minimalistischen Designzugang. Der Kompromiss der Designer war es, den Kontrast dieser Elemente zu reduzieren, damit die Website auf den ersten Blick immer noch minimiert «aussieht».

Ja, kontrastarme Texte sehen minimiert aus – ähnlich, wie ein verschwommenes Foto auf Instagram den Retro-Stil verkörpern kann. Doch Sie würden Ihre Website sicherlich nicht verschwommen darstellen, selbst wenn es modern wäre. Verringern Sie daher auch nicht den Kontrast.

Der Trend ist vor allen auf Websites zu beobachten, die ein hochwertiges und anspruchsvolles Elite-Erscheinungsbild kommunizieren möchten. Wenn im Internet ein neuer Trend, wie kontrastarme Texte, auftaucht, beobachten Unternehmen meist andere grosse Marken, die mit dem Trend gehen, und nehmen an, dass dieser getestet und für gut befunden wurde. Das ist allerdings nicht immer der Fall.

Ich wage die Vorhersage, dass wir in zehn Jahren über die kontrastarmen Texte lachen werden – genau wie wir über Websites mit langen Flash-Ladezeiten (engl.) aus den 1990er Jahren lachen.

Bevor Sie sich also für hellgrauen Text auf mittelgrauem Hintergrund entscheiden, fragen Sie sich, weshalb Sie diese Entscheidung treffen. Falls Sie versuchen, ein Element weniger auffällig zu machen, um andere Elemente hervorzuheben, stehen Ihnen bessere Möglichkeiten zur Verfügung. Falls Sie sich aufgrund ihres tollen Aussehens für die Kontrastarmut entscheiden, nehmen Sie nicht an, dass das Prinzip eine gute Idee ist, nur weil es auf anderen Websites umgesetzt wurde.

Auf den Artikelseiten von Quartz.com wird die linke Navigationsleiste zuerst kontrastreich angezeigt (links). Sobald der Nutzer allerdings den Mauszeiger über einen Artikel der Liste hält, wird die Zelle so stark verdunkelt, dass der Text fast unleserlich wird (rechts). Der Text, für den sich der Nutzer am meisten interessiert, ist plötzlich extrem schwer erkennbar.

Strategien zur Erhöhung oder Reduktion der Auffälligkeit, ohne die Usability zu beeinträchtigen

Falls Sie kontrastarme Texte in Erwägung ziehen, möchten Sie wahrscheinlich die Auffälligkeit eines Elements reduzieren – oder ein anderes Element stärker hervorheben. Es gibt allerdings andere, nutzerfreundlichere Möglichkeiten, um das zu tun.

• Reduzieren Sie die Informationsdichte. Einige Designer nehmen an, dass die Reduktion des Kontrasts vollgepackte Seiten weniger überladen wirken lässt. Leider werden dadurch nur die Lesbarkeit reduziert und die kognitive Belastung erhöht. Finden Sie stattdessen Möglichkeiten, um unwichtige Dinge zu entfernen, oder testen Sie Alternativen, um Informationen weniger konzentriert anzuzeigen (auf mobilen Geräten – aber auch in anderen Situationen – können Sie zum Beispiel sekundäre Inhalte auf sekundäre Websites verschieben.)
• Passen Sie die Schriftgrösse an. Wenn Nutzer Text auf einer Website überfliegen (sie lesen nur selten (engl.), obwohl es dennoch manchmal der Fall ist), werden zuerst grössere Texte gelesen. Es ist in Ordnung, einige Texte grösser und andere kleiner anzuzeigen, sofern die Schriftgrösse nicht zu klein ist und den Text unlesbar macht. Verwenden Sie mindestens eine Schriftgrösse von 8pt.
• Informieren Sie sich über barrierefreie Farbkombinationen. Viele kostenlose Tools kontrollieren, ob der Kontrast von Farbkombinationen ausreichend hoch ist. Stellen Sie sicher, dass Sie diese Kombinationen unter Berücksichtigung Ihrer Schriftgrösse überprüfen, da einige Kombinationen die Anforderungen erfüllen, sofern die Schriftgrösse gross genug ist.
• Platzieren Sie weniger wichtige Elemente an anderer Stelle. Falls Sie bemerken, dass Nutzer durch kontrastreiche Texte abgelenkt werden, variieren Sie die Position des Texts am Bildschirm. Häufig reicht es aus, die Platzierung eines Elements zu verändern oder seine Umrisse auszupolstern, um seinen Stellenwert auf der Seite zu verändern.
• Denken Sie über Akkordeons nach. In einigen Fällen können erweiterbare Bereiche das Durcheinander reduzieren, deren Details nur dann angezeigt werden, wenn der Nutzer durch einen Klick oder ein Tippen Interesse bekundet. Seien Sie aber vorsichtig, da sich Akkordeons nicht gut für Informationen eignen, die der Reihe nach bearbeitet werden müssen.

Schlussfolgerung

Es ist wichtig, die Gründe hinter jedem Trend zu verstehen und in Frage zu stellen, ob er sich für Ihre Website eignet oder nicht. Die meisten Websites verfügen über keinen bekannten Namen und haben keine Armee von treuen Anhängern, die sich sogar mit einem frustrierenden Nutzererlebnis zufriedengeben. Anstatt sich für kontrastarme Designs zu entscheiden, sollten Sie über andere Möglichkeiten nachdenken, um die Auffälligkeit der Elemente auf dem Bildschirm zu verändern, ohne die Usability oder Erreichbarkeit zu beeinträchtigen.

Referenz:

W3.org, ‹Contrast (Minimum), Understanding Success Criterion 1.4.3›. (engl.) (enthält eine Liste von Ressourcen zur Überprüfung von Farbkontrasten).

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