-
Notifications
You must be signed in to change notification settings - Fork 2
/
graustufen.html
executable file
·197 lines (147 loc) · 16.4 KB
/
graustufen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
Hallo Fremde:r,
schön, dass du dich umschaust! Falls du Fragen hast oder wissen
möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
schreib doch einfach an postfach2b [ät] web.de oder sende einen
Post an @charakterziffer@typo.social.
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Gleichmäßig wirkende Graustufen // @cz+</title>
<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">
<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Wer eine Skala aus Grautönen erstellt, sollte die Helligkeit nicht linear abnehmen lassen, sonst erscheinen die Graustufen ungleich verteilt.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">
<style> /* QR-Code mit URL für Ausdrucke, siehe smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */
@media print { header:after {
content: url('https://chart.googleapis.com/chart?cht=qr&chs=110x110&chl=https://charakterziffer.github.io/graustufen.html&choe=UTF-8');
position: absolute; right: .5em; top:.2em; z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>
<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>
<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
<nav class="no-hyphens no-print"><ul>
<li><a href="/archiv.html">Archiv</a></li>
<li><a href="/extra/index.html">Extra</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>
<main>
<article>
<time datetime="2020-02-20">Do, 20. Febr. 2020</time>
<h1>Gleichmäßig wirkende Graustufen</h1>
<style>
p { font-variant: lining-nums; }
@media screen and (prefers-color-scheme: dark) {
img[src*='grauskala'] { filter:brightness(1); } }
</style>
<!-- SVG-Symbol ⁹√ für weiter unten -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="9sqr" preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 20"><title>neunte Wurzel aus</title>
<path d="M3.512 0C2.054 0 .935 1.14.935 2.637c0 1.48.88 2.497 2.438 2.497.739 0 1.398-.28 1.957-.82-.12 2-1.058 2.938-2.217 2.938-.54 0-.959-.22-1.339-.48l-.54.9c.46.32 1.02.6 1.919.6 1.918 0 3.396-1.4 3.396-4.335C6.55 1.479 5.37 0 3.512 0zm.02 1.02c.98 0 1.679.78 1.798 2.317-.599.64-1.118.86-1.718.86-.959 0-1.498-.66-1.498-1.58 0-.94.6-1.6 1.418-1.6zm5.658.7L5.634 16.922c-.08.42-.16.86-.24 1.28h-.08c-.1-.42-.2-.86-.34-1.28L2.658 10.01 0 11.191l.38.9 1.418-.64L4.795 20h1.258L10.39 1.72h-1.2z" /></symbol>
</svg>
<p class="hinterlegt">Achtung, es folgt ein ziemlich nerdiger Blogartikel mit einigem an Mathematik!</p>
<p>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<small> </small>% bis 95<small> </small>% gleichmäßig zunimmt:</p>
<p><img src="material/grauskala-1.svg" alt="Grauskala mit 10 Helligkeitsstufen, jeweils um 11% dunkler werdend" /></p>
<p>Doch komisch: Obwohl die Helligkeit von einer Stufe zur nächsten jeweils um 10<small> </small>% abnimmt, wirkt die Verteilung überhaupt nicht gleichmäßig. Gerade an den Enden der Skala scheinen die Unterschiede stärker zu sein. Zwischen 5<small> </small>% und 15<small> </small>% scheint die Helligkeit mehr abzunehmen als in der Mitte von 35<small> </small>% bis 65<small> </small>% Grau. Auch von 85<small> </small>% zu 95<small> </small>% wirken die Unterschiede größer.</p>
<h2 id="unsere-wahrnehmung-ist-relativ">Unsere Wahrnehmung ist relativ</h2>
<p>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.</p>
<p>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 <em>v</em>). Man stelle sich vor, auf jedem Feld liegen 100 Kügelchen, entweder schwarz oder weiß. Zum Beispiel beinhaltet die Fläche mit 15<small> </small>% 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:</p>
<p><img src="material/grauskala-2.svg" alt="Grauskala mit 10 Helligkeitsstufen und den entsprechenden Schwarz-Weiß-Verhältnissen" /></p>
<p>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).</p>
<p><img src="material/grauskala-3.svg" alt="Grauskala, zwischen den Feldern jeweils der Faktor von einer Farbdichte zur nächsten" /></p>
<p>Und jetzt bestätigt sich, 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.</p>
<h2 id="gleichmäßig-abnehmende-helligkeit">Gleichmäßig abnehmende Helligkeit</h2>
<p>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<small> </small>% für „Weiß“ und 95<small> </small>% für „Schwarz“.</p>
<p>Es ergeben sich die Schwarz-Weiß-Verhältnisse (<em>v</em>) 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 <em>w</em>), nämlich vom ersten bis zum zehnten Feld: Weiß × w = Feld<sub>2</sub>; Feld<sub>2</sub> × w = Feld<sub>3</sub>; … Feld<sub>9</sub> × w = Schwarz. Abgekürzt: Weiß × w<sup>9</sup> = Schwarz.</p>
<p>Der Zwischenfaktor w lässt sich jetzt berechnen mit <svg width=".65em" height="1.1em" style="position:relative; top:.1em; left:.1em"><use xlink:href="#9sqr"></use></svg>(Schwarz<small> </small>÷<small> </small>Weiß). In unserem Beispiel: w = <svg width=".65em" height="1.1em" style="position:relative; top:.1em; left:.1em"><use xlink:href="#9sqr"></use></svg>380 = 380<sup>1/9</sup> = 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:</p>
<h2 id="der-richtige-faktor">Der richtige Faktor</h2>
<p>Mit dem berechneten Faktor <em>w</em> gerundet auf 1,924 ergibt sich eine Grauskala mit den folgenden Schwarz-Weiß-Verhältnissen <em>v</em>:</p>
<p><img src="material/grauskala-4.svg" alt="Grauskala mit angeglichenen Schwarz-Weiß-Verhältnissen, jeweils mit dem gleichen Faktor dazwischen" /></p>
<p>(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.)</p>
<p>Das Schwarz-Weiß-Verhältnis <em>v</em> haben wir ja erhalten aus Schwarzanteil ÷ Weißanteil, wobei der Weißanteil die Menge zu den fehlenden 100<small> </small>% war. Wir können uns die Prozentzahl von Schwarz (genannt <em>x</em>) 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:</p>
<p><img src="material/grauskala-5.svg" alt="Grauskala mit 10 Helligkeitsstufen, die Prozentwerte diesmal berechnet für eine gleichmäßig wirkende Verteilung" /></p>
<p>Zum Vergleich nochmal die anfängliche Skala:</p>
<p><img src="material/grauskala-1.svg" alt="Grauskala mit 10 Helligkeitsstufen, jeweils um 11% dunkler werdend" /></p>
<p>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“.</p>
<p>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.</p>
<h2 id="abschließendes-beispiel">Abschließendes Beispiel</h2>
<p>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 = 3201<sup>1/6</sup> = 3,83896…, was ich mal auf 3,839 runde.</p>
<p>Beginnend 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:</p>
<p><img src="material/grauskala-6.svg" alt="Grauskala mit 7 Helligkeitsstufen von 3% bis 99%" /></p>
<p>(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 <a href="https://learnui.design/tools/data-color-picker.html">Data Color Picker</a> oder der <a href="https://gka.github.io/palettes">Chroma.js Color Palette Helper</a>.</p>
<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i> <a href="archiv.html?methodik">#methodik</a> </p>
</article>
<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>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.</p>
<form name="kommentarformular" id="kommentarformular" method="post" action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/graustufen">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="1">
<div>
<label for="name">Name</label>
<div><input name=" name" id="name" type="text" size="25" spellcheck="false">
<i>(Pseudonym möglich)</i></div>
<!-- fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
<label for="mail">E-Mail</label>
<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
<label for="link">Website</label>
<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
<label for="comment">Kommentar</label><br>
<textarea name="comment" id="comment" rows="8" cols="50" required spellcheck="true"></textarea>
</div>
<input type="hidden" name=" --- Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>
<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small> </small>B. <em><em>betont</em></em>, <strong><strong>hervor­gehoben</strong></strong> oder <code><code>Quelltext</code></code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="10-jahre-twitter.html">← 10 Jahre Twitter</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="stoffkrokodil.html">Ein Stoffkrokodil als Nähprojekt →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>
<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen­fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres­sum/Daten­schutz</a>)</span>. Über Fragen, Kritik und Anmer­kungen freue ich mich sehr – z.<small> </small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto­don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt­lich über neue Artikel. Alle bis­herigen Ein­träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea­tive-Commons-Lizenz 4.0 (Deutsch­land)</a> mit Namens­nennung und Weiter­gabe unter gleichen Bedin­gungen.</p>
</aside>
<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>