-
Notifications
You must be signed in to change notification settings - Fork 0
/
contrast.html
513 lines (475 loc) · 21.3 KB
/
contrast.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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Kontrast</title>
<link
rel="stylesheet"
href="assets/css/style.css"
/>
</head>
<body class="#blurred-vision">
<header>
<h1>Kontrast</h1>
<p>
Kontrast bezieht sich auf den Unterschied in Helligkeit oder
Farbe zwischen zwei visuellen Elementen. Kontrast ist wichtig,
weil er dazu beiträgt, dass Objekte oder Text deutlich erkennbar
und unterscheidbar sind. Ein höherer Kontrast macht es leichter,
Formen, Farben und Text zu erkennen, während ein niedriger
Kontrast dazu führen kann, dass Inhalte verschwimmen oder schwer
zu sehen sind.
</p>
<p>
In Design und Typografie ist ausreichender Kontrast besonders
wichtig, um sicherzustellen, dass Informationen für alle Nutzer,
einschließlich Menschen mit Sehbehinderungen, gut lesbar und
zugänglich sind.
</p>
</header>
<main>
<article>
<h2>Automatisiertes Testen von Kontrasten</h2>
<p>
Es gibt viele Tools, die den Kontrast von Texten und
Elementen auf einer Webseite überprüfen können. Sie helfen
für einen schnellen Überblick, haben aber auch Schwächen.
Zum Beispiel werden Farbverläufe oder Hintergrundbilder
nicht erfasst. Hier sind einige Beispiele für Chrome
Extensions:
</p>
<ul>
<li>
<a
href="https://chromewebstore.google.com/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe"
>Colour Contrast Checker</a
>
</li>
<li>
<a
href="https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf"
>WCAG Color contrast Checker</a
>
</li>
</ul>
<div class="contrast-container">
<div class="box green-1">
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption">
<small>Michelson-Kontrast 3:1</small>
</p>
</div>
<div class="box green-2">
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption">
<small>Michelson-Kontrast 3:1</small>
</p>
</div>
<div class="box blue-yellow-1">
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption">
<small>Michelson-Kontrast 2:1</small>
</p>
</div>
<div class="box blue-yellow-2">
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption">
<small>Michelson-Kontrast 2:1</small>
</p>
</div>
<div class="box image">
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption">
<small>Der Kontrast ist nicht messbar.</small>
</p>
</div>
<div class="box gradient">
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption">
<small>Der Kontrast ist nicht messbar.</small>
</p>
</div>
</div>
</article>
<article>
<h2>Regeln für Kontrast</h2>
<h3>Kontraste von Texten</h3>
<p>
Text (Überschriften, Fließtexte, Text auf Buttons etc.)
müssen zum Hintergrund einen Mindestkontrast von 4,5:1
haben. Das gilt für Texte, die kleiner als 18pt (24px) sind.
Texte, die größer sind, dürfen einen Kontrast von 3:1 haben.
</p>
<figure aria-hidden="true">
<div
style="
border: 2px solid #000000;
background-color: white;
color: hsl(0, 0%, 0%);
padding: 0.5rem;
margin-block-end: 0.5rem;
"
>
Luminanz 0: Text mit ausreichend Kontrast (21 : 1)
</div>
<div
style="
border: 2px solid hsl(0, 0%, 46%);
background-color: white;
color: hsl(0, 0%, 46%);
padding: 0.5rem;
margin-block-end: 0.5rem;
"
>
Luminanz 46%: Text mit ausreichend Kontrast (4,5 : 1)
</div>
<div
style="
border: 2px solid hsl(0, 0%, 46%);
background-color: white;
color: hsl(0, 0%, 58%);
padding: 0.5rem;
margin-block-end: 0.5rem;
"
>
<b>Luminanz 58%: fetter Text</b>
<big>und grosser Text</big>
<b>mit ausreichend Kontrast (3 : 1)</b>
</div>
<div
style="
border: 2px solid hsl(0, 0%, 46%);
background-color: white;
color: hsl(0, 0%, 83%);
padding: 0.5rem;
margin-block-end: 0.5rem;
"
>
Luminanz 83%: Text mit zu wenig Kontrast (1,5 : 1)
</div>
</figure>
<h3>Kontraste von Texten in Grafiken</h3>
<p>
Text in oder auf Bildern müssen die Kontrastanforderungen
von 4,5:1 erfüllen. Ab einer Schriftgröße von 18pt (24px)
darf der Kontrast 3:1 betragen.
</p>
<p>
Da der Hintergrund in Bildern nicht immer vorhersehbar ist,
kann eine Textkontur oder eine Fläche den Kontrast
unterstützen. Die Messung des Kontrasts ist ebenfalls
schwierig.
</p>
<figure aria-hidden="true">
<div
class="box image"
style="display: inline-block; color: white"
>
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption"><small>weißer Text</small></p>
</div>
<div
class="box image"
style="display: inline-block; color: black"
>
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption"><small>schwarzer Text</small></p>
</div>
<div
class="box image"
style="
display: inline-block;
color: white;
-webkit-text-stroke: 1px #000;
"
>
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption">
<small>weißer Text mit Outline</small>
</p>
</div>
<div
class="box image"
style="
display: inline-block;
color: black;
text-shadow: 0px 0px 3px #fff;
"
>
<h3>headline</h3>
<h3 class="not-bold">not bold</h3>
<p>copy</p>
<p><strong>bold</strong></p>
<p class="figcaption">
<small>Text mit weissem Schatten</small>
</p>
</div>
<div
class="box image"
style="display: inline-block; color: white"
>
<h3 style="background: #0004">headline</h3>
<h3
style="background: #0004"
class="not-bold"
>
not bold
</h3>
<p style="background: #0004">copy</p>
<p style="background: #0004"><strong>bold</strong></p>
<p class="figcaption"><small>Text mit Fläche</small></p>
</div>
<div
class="box image"
style="display: inline-block; color: black"
>
<h3 style="background: #fff4">headline</h3>
<h3
style="background: #fff4"
class="not-bold"
>
not bold
</h3>
<p style="background: #fff4">copy</p>
<p style="background: #fff4"><strong>bold</strong></p>
<p class="figcaption"><small>Text mit Fläche</small></p>
</div>
<figcaption>
Verschiedene Kontraste von Text auf Grafik: Schwarz und
Weiss auf Bild, Text mit Outline, Text mit Schatten,
Text mit Fläche.
</figcaption>
</figure>
<h3>Kontraste von Elementen in Infografiken</h3>
<p>
Die Kontraste von Elemente in Infografiken müssen mindestens
3:1 sein – soweit sie für das Verständnis der Grafik nötig
sind. Und auch die Elemente zueinander müssen einen Kontrast
von 3:1 haben.
</p>
<h3>Kontraste von Bedienelementen</h3>
<p>
Bedienelemente (Buttons, klickbare Icons, Inputfelder)
müssen einen Kontrast von 3:1 zum Hintergrund haben.
</p>
<h3>Kontraste von Bedienelementen mit Text</h3>
<p>
Wenn der Text eines Bedienelements (z. B. Button) die
Kontrastanforderung (4,5:1) zum Hintergrund schon erfüllt,
muss es das Bedienelement selbst nicht tun.
</p>
<figure aria-hidden="true">
<div
style="
border: 2px solid hsl(0, 0%, 46%);
background-color: white;
color: hsl(0, 0%, 0%);
padding: 0.5rem;
margin-block-end: 0.5rem;
"
>
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: 24px; height: 24px"
viewBox="0 0 24 24"
>
<path
fill="#898989"
d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
/>
</svg>
</button>
<span class="figcaption">
<small
>Bedienelement nur Icon, ohne Text: Kontrast
3:1.</small
>
</span>
</div>
<div
style="
border: 2px solid hsl(0, 0%, 46%);
background-color: white;
color: hsl(0, 0%, 46%);
padding: 0.5rem;
margin-block-end: 0.5rem;
"
>
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: 24px; height: 24px"
viewBox="0 0 24 24"
>
<path
fill="lightgrey"
d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
/>
</svg>
Suchen
</button>
<span class="figcaption">
<small
>Bedienelement mit Icon und Text: Text mit
4,5:1.</small
>
</span>
</div>
</figure>
<h3>Kontraste von Links</h3>
<p>
Linktexte benötigen einen Kontrast von 4,5:1 zum
Hintergrund, in all ihren Zuständen (Hover, Aktiv, Fokus
etc.)
</p>
<h3>Kontraste von Links in Texten</h3>
<p>
Links, die sich in Texten (Fließtexten, Labels etc.)
befinden, müssen einen Mindestkontrast von 3:1 zu den
anderen Texten drumherum aufweisen, wenn der Link nur durch
Farbe gekennzeichnet ist.
</p>
<p>
Ein unterstrichener Link erfüllt die
Mehr-als-ein-Merkmal-Forderung und benötigt keinen
zusätzlichen Kontrast.
</p>
<figure>
<div
style="
border: 2px solid hsl(0, 0%, 46%);
background-color: white;
padding: 0.5rem;
margin-block-end: 0.5rem;
"
>
<p>
<span style="color: blue; text-decoration: none">
>> Link, noch nicht besucht</span
>
(Farbwert "blue", Kontrast 8,7)
</p>
<p>
<span style="color: purple; text-decoration: none">
>> Link, bereits besucht</span
>
(Farbwert "purple", Kontrast 9,4)
</p>
<p>
<span
style="
color: darkorange;
text-decoration: underline;
"
>
>> Link, im Mouseover-Zustand</span
>
(Farbwert "darkorange", Kontrast 2,3)
</p>
<p>
<span
style="color: red; text-decoration: underline"
>
>> Link, im Gedrückt-Zustand</span
>
(Farbwert "red", Kontrast 4,0)
</p>
</div>
</figure>
<h3>Kontraste von Fokusrahmen</h3>
<p>
Der Kontrast von Fokusrahmen um Bedienelemente muss
mindestens 3:1 zu seinem Hintergrund haben.
</p>
<p>
Um dem Problem wechselnder Hintergundfarben zu begegnen, ist
ein doppelter Fokusrahmen mit dunkler und heller Linienfarbe
eine gute Lösung.
</p>
<p>
<a
href="https://www.sarasoueidan.com/blog/focus-indicators/"
>Sara Soueidan: A guide to designing accessible,
WCAG-conformant focus indicators
</a>
</p>
<h3>Kontraste von disabled oder inaktiven Elemente</h3>
<p>
Bedienelemente (Buttons, Icons etc.), die nicht klickbar
sind, müssen keine Kontrastanforderungen erfüllen.
</p>
<p>
Wenn ein inaktives Element für das Verständnis des Kontextes
wichtig ist, so ist ein Mindestkontrast von 3:1
empfehlenswert. Das ist zum Beipiel der Fall, wenn ein
Button deaktiviert ist, weil ein Pflichtfeld noch nicht
ausgefüllt wurde.
</p>
<h3>Kontraste von Logos</h3>
<p>Logos müssen keine Kontrastanforderungen erfüllen.</p>
<p>
Wenn sie allerdings als Schaltfläche, etwa als Verlinkung
zur Startseite verwendet werden und es keine Alternative
gibt, dann müssen sie einen Kontrast von 3:1 zum Hintergrund
haben.
</p>
<h2>Relevante Prüfschritte</h2>
<ul>
<li>
<a
href="https://bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-1-4-3-kontraste-von-texten-ausreichend"
>Prüfschritt Kontraste von Texten</a
>
</li>
<li>
<a
href="https://bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-1-4-11-kontraste-von-grafiken-und-grafischen-bedienelementen-ausreichend"
>
Prüfschritt Kontraste von Grafiken und grafischen
Bedienelementen.
</a>
</li>
<li>
<a
href="https://bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-1-4-1-ohne-farben-nutzbar"
>Prüfschritt Ohne Farbe nutzbar</a
>
</li>
</ul>
</article>
</main>
<script src="assets/js/scaffold.js"></script>
</body>
</html>