Sie verwenden derzeit einen Browser, der nicht mehr unterstützt wird und bei dem es daher zu Darstellungsfehlern kommen kann. Wechseln sie den Browser, um ein noch schöneres Design zu erleben.

Cookies helfen uns bei der Bereitstellung unserer Dienste. Durch die Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies setzen. Mehr erfahren.

Close

Über den Tellerrand geschaut

Die Wahrheit ist Schwarz auf Weiß

Jonas Stallmeister

Schwarzer Text auf weißem Hintergrund ist glaubwürdig. Fakten sind Schwarz auf Weiß. Schwarz auf Weiß wird gedruckt und auf Bildschirmen angezeigt. Die Wahrheit ist Schwarz auf Weiß – bis auf die Ausnahmen. Beim Programmieren ist die Wahrheit Weiß auf Schwarz. Und in der Schule stand die Wahrheit Weiß auf Schwarz an der Tafel. Diese Ausnahmen haben Gründe,  genauso wie es Gründe für die Regel gibt. Einige für Interface Designer interessante Gründe habe ich hier gesammelt.

Blackboard_SchwarzAufWeiss

Eine Einschränkung zu Beginn: in diesem Artikel geht es um Schwarz, Weiß und Schwarz-Weiß-Entscheidungen. Ich beschränke mich auf diese Themen und gehe nicht auf der andere Kontrastverhältnisse oder auf Farbe ein, obwohl beide ebenfalls die Lesbarkeit stark beeinflussen. In diesem Artikel schließt „Schwarz auf Weiß“ alle dunklen Texte auf hellem Hintergrund ein, und „Weiß auf Schwarz“ steht für alle hellen Texte auf dunklem Hintergrund.

Weißer Code auf schwarzem Hintergrund ist eine der Ausnahmen von der Vorherrschaft von Schwarz auf Weiß – aus technischen Gründen. Einige alte CRT-Monitore erreichten nicht die Pixel-Wiederholrate von 60 Hertz, über der wir ein flimmerfreies Bild sehen. Auf diesen Monitoren flimmerten Pixel deutlich und ermüdeten nach einiger Zeit die Augen der Benutzer. Die Lösung war, so wenige helle Pixel wie möglich darzustellen: schwarze Pixel des Bildschirms werden vom Strahl der Kathodenröhre ausgelassen werden und flimmern nicht.

Für die Bastler und Hacker: ein DEC VT220 Monitor an einem Rechner, auf dem ELinks läuft, der m.twitter.com anzeigt. David Glover, CC BY-NC-SA 2.0

Darum verwendeten Kommandozeilen-Interfaces weißen Text auf schwarzem Untergrund – wenn das Interface nur aus Text besteht, zahlt sich die geringere Ermüdung der Augen aus, vor allem bei längerer Arbeit. Dunkle Monitore mit hellem Text wurden zum Symbol für Programmieren. Das Klischee vom Hacker im abgedunkelten Zimmer entstand und mündete in die grün über Schwarz rieselnden Zeichen der Matrix. Die technischen Einschränkungen beeinflussten das Interface Design und wurden zu einer kulturellen Konvention.

Ich habe keine Ahnung, warum die Schultafel ebenfalls eine Ausnahme ist. Sie ist ein nützliches wiederbeschreibbares Medium, um schreiben zu üben. Kreide (Weiß) und Schiefer (Schwarz) waren, historisch gesehen, häufig und günstig. Aber andere historische wiederbeschreibbare Materialien wie Sand und Ton- oder Wachstafeln verwendeten kein Weiß-auf-Schwarz-Schema. Wahrscheinlich waren für schnelle Notizen Verfügbarkeit und Preis einfach die wichtigsten Faktoren.

Schwarz auf Weiß – die Geschichte

Bücher werden praktisch immer mit schwarzer Tinte auf weißem Papier gedruckt. Papier entstand als günstigere Alternative zum ebenfalls weißen Pergament. Andere historische Beschreibstoffe wie Birkenrinde oder Papyrus waren ebenfalls hell.

Taschenbuch-Ausgabe von Catch-22

Druck auf Papier: Taschenbuch-Ausgabe von Catch-22

Manuskript auf Pergament: “Treatises On Natural Science, Philosophy, And Mathematic”, England ca. 1300

Manuskript auf Birkenrinde: das Rupavatra, ein Grammatik-Buch auf Basis der Sanskrit-Grammatik von Panini, Kaschmir, 1663, Wellcome-Bibliothek, London, CC BY 4.0

Hieroglyphen auf Papyrus, Radek Szuban, CC BY-NC 2.0

Dieses Muster geht zurück bis zu den ersten Zeichen von Menschenhand: die ältesten Höhlenmalereien in Europa in der Höhle von El Castillo in Nordspanien verwendeten schwarze und rote Farbe auf weißem Kalkstein – vor 40.800 Jahren. Tatsächlich wurden die meisten Höhlenbilder mit roten, braunen und schwarzen Pigmenten auf hellem Untergrund gemalt. Das könnte an der Geologie liegen: Kalkstein hat viele Höhlen, die in der Steinzeit zu Wohn- und Ritualorten wurden. Wenn Höhlenmenschen die hellen Wände markieren wollten, mussten sie dunkle Pigmente verwenden. An dieser Stelle habe ich die Spur verloren – mit vielen Beispielen für die Vorherrschaft von Schwarz auf Weiß, aber ohne eine wirkliche Erklärung. „Wir haben es immer so gemacht“ ist meistens ein schlechtes Argument, anderseits sind 40.800 Jahre praktisch „immer“, was unsere Kulturgeschichte betrifft. Damit sind schwarze Zeichen auf weißem Hintergrund eine ziemlich fest etablierte Konvention.

Die Höhle von El Castillo

Diese Konvention nutze Xerox, als die Firma 1973 überlegte, was nach dem Druckergeschäft kommen würde. Sie gründete PARC, das Palo Alto Research Center, und entwickelte dort Alto, den ersten Computer, der eine Desktop-Metapher nutzte. Heute ist er noch bekannt als Inspiration für Windows und Mac OS, aber damals war er eine Revolution. Xerox wollte einen einsteigerfreundlicheren Computer entwickeln und begann dabei aus der Perspektive eines Drucker-Herstellers: der Monitor des Alto hatte die Abmessungen eines US-Letter-Briefbogens, Hochformat, und eine Auflösung von 72 dpi, an die 72 typographischen Punkt pro Inch aus dem Druck angelehnt. Folgerichtig stellte Bravo, die Textverarbeitung auf dem Alto, Text schwarz auf weiß dar, um ebenfalls der gedruckten Seite möglichst nahe zu kommen. Damit war Bravo die erste WYSIWYG-Textverarbeitung und wahrscheinlich das erste Interface, das die Schwarz-auf-Weiß-Tradition vom Papier auf den Bildschirm übertrug. Xerox‘ Vorgabe wurde Textverarbeitungs-Software zur Norm. Sie zeigt, wie Konventionen Interfacedesign beeinflussen: verbreitete, wiedererkennbare Muster machen Interfaces leichter zugänglich.

Xerox_Alto_Bravo

Die Textverarbeitung Bravo auf dem hochformatigen Bildschirm des Xerox Alto.

Schwarz auf Weiß – die Wahrnehmung

Widmen wir einen Absatz dem Irrglauben, dass weißer Text auf schwarzem Grund schlechter zu lesen ist, weil weiße Buchstaben den Hintergrund überstrahlen und miteinander verschmelzen. Die Beobachtung stimmt: die Leserlichkeit leidet. Aber die Schlussfolgerung ist falsch, denn auch schwarzer Text auf weißem Grund hat dieses Problem: hier ist der Hintergrund heller als der Text und überstrahlt die schwarzen Buchstaben. In beiden Fällen senkt nicht überstrahlendes Licht die Lesbarkeit, sondern schlechte Typographie: leichte Schriftarten sind auf grell weißem Hintergrund schwer zu lesen, fette Schriftarten auf Schwarz ebenso. In beiden Fällen müssen die Designer den Schwarz-Anteil des Texts erhöhen, um die Leuchtkraft des weißen Teils auszugleichen: die Lesbarkeit wird durch leichte Schriftschnitte für Weiß auf Schwarz und robuste Schriftschnitte für Schwarz auf Weiß verbessert.

In Schwarz auf Weiß werden die feinen Linien der Baskerville vom benachbarten Weißraum und den Punzen angefressen. In Weiß auf Schwarz bleiben sie unversehrt. Die kurvige Cooper Black kommt Schwarz auf Weiß gut zur Geltung. In Weiß auf Schwarz erdrücken die fetten Formen der Buchstaben die Zwischen- und Binnenräume. In diesem Fall sollte sie mit mehr Laufweite als üblich gesetzt werden.

Hornhautverkrümmung ist eine weit verbreitete Sehstörung des menschlichen Auges, die bei ungefähr einem Drittel der Bevölkerung auftritt. Durch eine Hornhautverkrümmung kann das Auge einfallendes Licht nicht mehr vollständig in einem Brennpunkt bündeln. Kanten werden unscharf, was bei Text besonders auffällt. Jedoch zieht sich in hellen Umgebungen die Pupille zusammen, der Sehfehler verkleinert sich und die Kantenschärfe nimmt wieder zu. Schwarzer Text auf weißen Hintergrund sorgt für eine solche hellere Leseumgebung, in der Text für Leser mit Hornhautverkrümmung schärfer und lesbarer wird.

Eine weitere Sehstörung ist hohe Lichtempfindlichkeit, die etwa zehn Prozent der Bevölkerung betrifft. Je höher die Lichtempfindlichkeit einer Leserin ist, desto schneller werden helle Hintergründe sie ermüden und zu Unbehagen führen. Die Textdarstellung in Schwarz auf Weiß, die Lesern mit Hornhautverkrümmung hilft, ist für lichtempfindliche Leser auf Dauer problematisch. Umgekehrt ist die Darstellung in Weiß auf Schwarz, die Ermüdung lichtempfindlicher Augen vorbeugt, für Leser mit Hornhautverkrümmung verschwommener. Ein Ausweg aus diesem Dilemma ist es, Leser die Darstellung selbst wählen zu lassen. Aber auch dann muss die Typographie unsere menschliche visuelle Wahrnehmung mit ihren Besonderheiten berücksichtigen.

Schwarz auf Weiß – im Kontext

Das Auge passt sich der Helligkeit der Umgebung an, zum Beispiel wenn man von der sonnigen Straße in ein Haus kommt, oder auf einer Nachtfahrt von Scheinwerfern geblendet wird. Dieser Adaptation genannte Vorgang kostet das Auge Zeit und Kraft, wobei der Aufwand mit zunehmendem Alter steigt. Wiederholte Adaptation – beim Lesen auf einem hellen Bildschirm in dunkler Umgebung oder auf einem dunklen Bildschirm in grellem Sonnenlicht – verschlechtert die Wahrnehmung von Kontrasten. Wenn dagegen Helligkeit des Texts und Helligkeit der Umgebung übereinstimmen, sinkt der Adaptations-Aufwand.

Kindle_BlackOnWhite

Der Text im hellen Layout ist durch die Reflektion hindurch lesbar.

KindleWhiteOnBlack

Im dunklen Layout ist der Text hinter der gespiegelten Lampe unleserlich.

Text auf Schwarz ist in dunklen Umgebungen angenehm: in Cockpits bei Nacht, abgedunkelten Räumen oder beim Lesen im Bett. Umgekehrt ist Text auf Weiß in hellen Büros oder unter freiem Tageshimmel angemessen. Diese Darstellung ist auch bei Reflektionen besser lesbar, während Texte mit schwarzem Hintergrund auf Bildschirmen oder Hochglanzpapier durch Reflektionen schnell unleserlich werden.

Taschenbuch-Ausgabe von Catch-22

Optimiert für Lesen bei guter Beleuchtung: helles, aber nicht hoch-weißes Papier. Heller als der Hinergrund, ohne ihn zu überstrahlen.

Leser sind an Texte gewöhnt, die etwas heller sind als die Leseumgebung. Der hellere Inhalt bindet ihre Aufmerksamkeit, während der Adaptationsaufwand niedrig bleibt. In Interfaces können so wichtige Texte Schwarz auf Weiß hervorgehoben werden – der helle Hintergrund signalisiert unauffällig ihre Bedeutung. Umgekehrt tritt zweitrangiger Text wie Menus in Weiß auf Schwarz in den Hintergrund, während sich die Benutzer auf wichtigere Elemente konzentrieren. Kontext ist der wohl wichtigste der Faktoren, die Interface Design beeinflussen – für eine bekannte Umgebung können viele Elemente des Interface optimiert werden, von denen Textfarbe nur eine ist.

XING-Windows8

Wir verwendeten Schwarz auf Weiß für die XING Windows 8 App. Sie wird in gut beleuchteten Büros, Hotels, Zügen und Flugzeugen verwendet.

OmicronCMControl

Für das Interface der OMICRON CMControl wählten wir weißen Text auf Schwarz. Dieses Diagnosegerät für die Energieversorgung muss auch in schlecht beleuchteten Umspannwerken lesbar sein.

Fazit

Die Wahrheit ist Schwarz auf Weiß – für Inhalt, für helle Umgebungen, für scharfes Sehen. Die Wahrheit ist Weiß auf Schwarz – für Menus, für dunkle Umgebungen, für lichtempfindliche Leser. Bei einigen Websites, E-Book-Readern und Navigationsgeräten können Benutzer die bevorzugte Darstellung selbst wählen. Auch wenn Designer diese Entscheidung treffen, hängt sie von Technologie, kulturellen Konventionen, visueller Wahrnehmung und vom Kontext ab. Designer müssen all diese Faktoren berücksichtigen. Sie bewegen sich zwischen diesen benachbarten Gebieten, wofür Wissen aus allen notwendig ist. Aber ihre Aufgabe ist es nicht, Experten zu werden, sondern alle Faktoren zu kennen und trotzdem stimmige Symbole, Typographie, Layouts und Interfaces zu gestalten. Leichter geschrieben als getan.

Wenn Sie Interesse daran haben sollten, sich bei Design Arbeiten unterstützen zu lassen, können Sie auf unserer Design Service Seite mehr über unsere Dienstleistungen erfahren.

 

 

Windows ist eine Marke oder eingetragene Marke der Microsoft Corporation in den USA und/oder anderen Ländern. Mac OS ist eine Marke oder eingetragene Marke der Apple Inc. in den USA und/oder anderen Ländern. Xerox und Alto sind Marken oder eingetragenen Marken der Xerox Corporation in den USA und/oder anderen Ländern. XING ist eine Marke oder eingetragene Marke der XING AG den USA und/oder anderen Ländern. OMICRON und CMControl sind Marken oder eingetragenen Marken der OMICRON electronics GmbH in den USA und/oder anderen Ländern.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Corporate Experience Manager
+49 681 959 3110
Kontaktformular

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.
  • Saarbrücken

    Science Park Saar, Saarbrücken

    Standort Südwest

    Hauptsitz Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Deutschland
    Saarland
    Auf der Karte

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    Standort Nordwest

    Geschäftsstelle Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Deutschland
    Nordrhein-Westfalen
    Auf der Karte

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · München

    Haar / München

    Standort Süd

    Geschäftsstelle München
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · München
    Deutschland
    Bayern
    Auf der Karte

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Standort Mitte

    Geschäftsstelle Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Deutschland
    Hessen
    Auf der Karte

    +49 69 241 827 91

    +49 681 959 3119