@charak
terziffer

Gleichmäßig wirkende Graustufen

neunte Wurzel aus

Achtung, es folgt ein ziemlich nerdiger Blogartikel mit einigem an Mathematik!

Angenommen, eine Infografik soll verschiedene Intensitätswerte ausdrücken, von ganz schwach bis sehr stark. Klingt zunächst ziemlich einfach und sofort hat man eine Palette gebastelt, bei der die Farbdichte von 5 % bis 95 % gleichmäßig zunimmt:

Grauskala mit 10 Helligkeitsstufen, jeweils um 11% dunkler werdend

Doch komisch: Obwohl die Helligkeit von einer Stufe zur nächsten jeweils um 10 % abnimmt, wirkt die Verteilung überhaupt nicht gleichmäßig. Gerade an den Enden der Skala scheinen die Unterschiede stärker zu sein. Zwischen 5 % und 15 % scheint die Helligkeit mehr abzunehmen als in der Mitte von 35 % bis 65 % Grau. Auch von 85 % zu 95 % wirken die Unterschiede größer.

Unsere Wahrnehmung ist relativ

Mathematisch lineare Graustufen erscheinen uns Menschen ungleichmäßig, weil wir Intensitäten nicht absolut wahrnehmen, sondern immer im Verhältnis zueinander. Als Vergleich ein Beispiel aus der Akustik: Zwischen absoluter Stille und einem Uhrticken erscheint uns der Lautstärkeunterschied viel größer als zwischen einem hupenden Auto und einem hupenden Auto, auf dem noch eine Uhr tickt. Dabei ist der Lautstärke-Unterschied in beiden Fällen gleich groß, nämlich die Lautstärke einer tickenden Uhr.

Um die Intensitäten der grauen Felder in der Skala vergleichen zu können, muss man die Prozente erst mal in ein Schwarz-Weiß-Verhältnis umrechnen (genannt v). Man stelle sich vor, auf jedem Feld liegen 100 Kügelchen, entweder schwarz oder weiß. Zum Beispiel beinhaltet die Fläche mit 15 % dann 15 schwarze Kügelchen und 85 weiße (= 100 – 15). Das Verhältnis von Schwarz zu Weiß ist für dieses Feld 15 zu 85 oder als Dezimalzahl ausgedrückt 0,18 (= 15 ÷ 85). Auf unsere Grauskala übertragen sieht das dann folgendermaßen aus:

Grauskala mit 10 Helligkeitsstufen und den entsprechenden Schwarz-Weiß-Verhältnissen

Mit den Schwarz-Weiß-Verhältnissen lässt sich jetzt nachrechnen, wie stark die Farbdichte von Stufe zu Stufe zunimmt – und zwar relativ betrachtet: Mit welchem Faktor muss man das Schwarz-Weiß-Verhältnis eines Feldes multiplizieren, um zum nächsten Feld zu kommen? Zur Info: Ich habe mit den genauen Brüchen gerechnet, nicht mit den gerundeten Zahlen in der Skizze; also nicht 0,18÷0,05 sondern (15/85)÷(5/95).

Grauskala, zwischen den Feldern jeweils der Faktor von einer Farbdichte zur nächsten

Und jetzt bestätigt, was wir am Anfang wahrgenommen haben: Am linken und rechten Rand der Skala sind die Faktoren zwischen den Felder viel größer (3,35) als in der Mitte (1,48). Der Grauwert ändert sich außen tatsächlich stärker als innen – zumindest relativ, so wie wir Menschen es eben sehen.

Gleichmäßig abnehmende Helligkeit

Das Ziel ist natürlich, eine Grauskala zu bestimmen, bei der die Unterschiede zwischen den Stufen gleichmäßig erscheinen, also jeweils den gleichen Faktor haben. Voraussetzung für die Berechnung ist, dass die erste und letzte Stufe nicht ganz 0 oder 100 sind, sonst liegen deren Schwarz-Weiß-Verhältnisse bei 0/100 bzw. 100/0 (mit 0 und unendlich lässt sich schwer rechnen). Bleiben wir also bei 5 % für „Weiß“ und 95 % für „Schwarz“.

Es ergeben sich die Schwarz-Weiß-Verhältnisse (v) wie oben: 5/95 (0,05…) für Weiß und 95/5 (19,0) für Schwarz. Zwischen diesen Verhältnissen liegt ein Gesamtfaktor von 361 (= 95/5 ÷ 5/95). Diesen Faktor verteilen wir jetzt auf neun Zwischenschritte (genannt w), nämlich vom ersten bis zum zehnten Feld: Weiß × w = Feld2; Feld2 × w = Feld3; … Feld9 × w = Schwarz. Abgekürzt: Weiß × w9 = Schwarz.

Der Zwischenfaktor w lässt sich jetzt berechnen mit (Schwarz ÷ Weiß). In unserem Beispiel: w = 380 = 3801/9 = 1,92383… – das klingt plausibel, denn es liegt zwischen den extremen Faktoren 3,60 und 1,48. Dann wollen wir mal rückwärts gehen:

Der richtige Faktor

Mit dem berechneten Faktor w gerundet auf 1,924 ergibt sich eine Grauskala mit den folgenden Schwarz-Weiß-Verhältnissen v:

Grauskala mit angeglichenen Schwarz-Weiß-Verhältnissen, jeweils mit dem gleichen Faktor dazwischen

(Bitte wieder berücksichtigen, dass die Zahlen in der Skizze gerundet sind! Ich habe die Berechnung nicht mit 0,05 gestartet, sondern mit dem genauen Bruch 5/95.)

Das Schwarz-Weiß-Verhältnis v haben wir ja erhalten aus Schwarzanteil ÷ Weißanteil, wobei der Weißanteil die Menge zu den fehlenden 100 % war. Wir können uns die Prozentzahl von Schwarz (genannt x) berechnen aus der Formel für das Schwarz-Weiß-Verhältnis v = x ÷ (100 – x), umgestellt: x = 100v ÷ (1 + v). Und schon können wir die eben erstellte Grauskala mit Prozentwerten füllen:

Grauskala mit 10 Helligkeitsstufen, die Prozentwerte diesmal berechnet für eine gleichmäßig wirkende Verteilung

Zum Vergleich nochmal die anfängliche Skala:

Grauskala mit 10 Helligkeitsstufen, jeweils um 11% dunkler werdend

Und, erscheint die korrigierte Version nicht viel gleichmäßiger? Übrigens habe ich die Infos zu diesem Phänomen und die ganze Berechnung aus Jacques Bertins Standardwerk „Graphische Semiologie“ (dt. 1974). Dort findet sich dieses Thema auf den Seiten 82/83 unter der Überschrift „Konstruktion äquidistanter Helligkeitswert-Stufen“.

Der Autor empfiehlt am Ende der Berechnung noch eine Korrektur der hellen Farbwerte vorzunehmen und kommt letztlich zur Prozentreihe Weiß, 9, 19, 31, 45, 60, 74, 84, 91 und Schwarz. Ich vermute aber, das hat mit dem nicht ganz reinweißen Papier zu tun. Hier am Bildschirm würde ich persönlich eher die dunkleren Grautöne ein wenig aufhellen.

Abschließendes Beispiel

Als schnelle Zusammenfassung noch ein zweites Beispiel. Gesucht ist eine siebenstufige Skala von 3%-Weiß zu 99%-Schwarz. Der Gesamtfaktor zwischen dem Schwarz (v = 99/1) und Weiß (v = 3/97) ist (99/1)÷(3/97) = 3201. Das dann verteilt auf sechs Zwischenschritte w = 32011/6 = 3,83896…, was ich mal auf 3,839 runde.

Beginnende mit 3/97 für Weiß ergeben sich folgende Schwarz-Weiß-Verhältnisse: 0,03 / 0,12 / 0,46 / 1,75 / 6,72 / 25,8 / 99,0. Daraus lassen sich schließlich mit x = 100v ÷ (1 + v) folgende Prozentwerte berechnen: 3% / 11% / 31% / 64% / 87% / 96% / 99%. Und so siehst das ganze aus:

Grauskala mit 7 Helligkeitsstufen von 3% bis 99%

(Und hier müsste man auf jeden Fall die dunklen Werte anpassen – glaube nie der reinen Mathematik, wenn es um Wahrnehmung geht!) Wer übrigens keine Lust auf diese Rechnerei hat, es mit der Helligkeitszunahme nicht ganz so genau nehmen muss oder für eine Infografik mehr braucht, als eine monochrome Farbskala, dem hilft der Data Color Picker oder der Chroma.js Color Palette Helper.

---
Rubrik(en):  #methodik 

Artikel kommentieren

Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.

 (Pseudonym möglich)
 (wird nicht veröffentlicht)

Formatierungen mit HTML sind möglich, z. B. <em>betont</em>, <strong>hervor­gehoben</strong> oder <code>Quelltext</code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).

← 10 Jahre Twitter

Ein Stoffkrokodil als Nähprojekt →