/
contrast-minimum.html
507 lines (342 loc) · 24.3 KB
/
contrast-minimum.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
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<title>Understanding Contrast (Minimum)</title>
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
</head>
<body>
<h1>Understanding Contrast (Minimum)</h1>
<section id="intent">
<h2>Intent of Contrast (Minimum)</h2>
<p>The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with limited vision, including color vision deficiencies.
This user group does not typically use contrast-enhancing assistive technology.
For people without color deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991).
Some vision impairments impact perception of luminance contrast.
People who have a color vision deficit (often colloquially referred to as <q>color blindness</q>) will also require adequate contrast between the text and the background.</p>
The luminance and contrast calculations associated with this criterion are formulated in such a way that color (hue) is not a key factor.</p>
<p>The contrast ratio thresholds address the needs of people with the four types of red-green color blindness (deuteranomaly, protanomaly, protanopia, and deuteranopia) and the two types of blue-yellow color blindness (tritanomaly and tritanopia). Monochromacy is also addressed.</p>
<p>While end-user needs are the primary consideration behind the contrast ratios used, a ratio of 4.5:1 provides content authors a wide range of color options for foreground and background colors. A contrast ratio of 4.5:1 also allows content authors some limited options for three colors that each contrast with each other. For example, a web page could use use a middle gray background color while featuring white headings and black body text.</p>
<p>Text that is decorative and conveys no information is excluded. For example, if random
words are used to create a background and the words could be rearranged or substituted
without changing meaning, then it would be decorative and would not need to meet this
criterion.
</p>
<p>Text that is larger and has wider character strokes is easier to read at lower contrast.
The contrast requirement for larger text is therefore lower. This allows authors to
use a wider range of color choices for large text, which is helpful for design of
pages, particularly titles. 18 point text or 14 point bold text is judged to be large
enough to require a lower contrast ratio. (See The American Printing House for the
Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large
Print under
<a href="#resources">Resources</a>). "18 point" and "bold" can both have different meanings in different fonts but,
except for very thin or unusual fonts, they should be sufficient. Since there are
so many different fonts, the general measures are used and a note regarding fancy
or thin fonts is included.
</p>
<div class="note">
<p>When evaluating this success criterion, the font size in points should be obtained
from the user agent or calculated on font metrics in the way that user agents do.
Point sizes are based on the CSS pt size as defined in
<a href="https://www.w3.org/TR/css-values-3/#reference-pixel">CSS3 Values</a>. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt
and 18pt are equivalent to approximately 18.5px and 24px.
</p>
<p>Because different image editing applications default to different pixel densities
(e.g. 72 PPI or 96 PPI), specifying point sizes for fonts from within an image editing
application can be unreliable when it comes to presenting text at a specific size.
When creating images of large-scale text, authors should ensure that the text in the
resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the
default size for body text. For example, for a 72 PPI image, an author would need
to use approximately 19 pt and 24 pt font sizes in order to successfully present images
of large-scale text to a user.
</p>
</div>
<p>The previously-mentioned contrast requirements for text also apply to images of text
(text that has been rendered into pixels and then stored in an image format) as stated
in Success Criterion 1.4.3.
</p>
<p>This requirement applies to situations in which images of text were intended to be
understood as text. Incidental text, such as in photographs that happen to include
a street sign, are not included. Nor is text that for some reason is designed to be
invisible to all viewers. Stylized text, such as in corporate logos, should be treated
in terms of its function on the page, which may or may not warrant including the content
in the text alternative. Corporate visual guidelines beyond logo and logotype are
not included in the exception.
</p>
<p>In this provision there is an exception that reads "that are part of a picture that
contains significant other visual content,". This exception is intended to separate
pictures that have text in them from images of text that are done to replace text
in order to get a particular look.
</p>
<div class="note">
<p>Images of text do not scale as well as text because they tend to pixelate. It is also
harder to change foreground and background contrast and color combinations for images
of text, which is necessary for some users. Therefore, we suggest using text wherever
possible, and when not, consider supplying an image of higher resolution.
</p>
</div>
<p>The minimum contrast success criterion (1.4.3) applies to text in the page, including
placeholder text and text that is shown when a pointer is hovering over an object
or when an object has keyboard focus. If any of these are used in a page, the text
needs to provide sufficient contrast.
</p>
<p>Although this Success Criterion only applies to text, similar issues occur for content presented in charts, graphs, diagrams, and other non-text-based information.
Content presented in this manner should also have good contrast to ensure that more
users can access the information.
</p>
<p>See also
<a href="contrast-enhanced">1.4.6: Contrast (Enhanced)</a>.
</p>
<section>
<h3>Rationale for the Ratios Chosen</h3>
<p>Text that is larger and has wider character strokes is easier to read at lower contrast.
The contrast requirement for larger text is therefore lower. This allows authors to
use a wider range of color choices for large text, which is helpful for design of
pages, particularly titles. 18 point text or 14 point bold text is judged to be large
enough to require a lower contrast ratio. (See The American Printing House for the
Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large
Print under
<a href="#resources">Resources</a>). "18 point" and "bold" can both have different meanings in different fonts but,
except for very thin or unusual fonts, they should be sufficient. Since there are
so many different fonts, the general measures are used and a note regarding fancy
or thin fonts is included.
</p>
<div class="note">
<p>When evaluating this success criterion, the font size in points should be obtained
from the user agent or calculated on font metrics in the way that user agents do.
Point sizes are based on the CSS pt size as defined in
<a href="">CSS3 Values</a>. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt
and 18pt are equivalent to approximately 18.5px and 24px.
</p>
<p>Because different image editing applications default to different pixel densities
(e.g. 72 PPI or 96 PPI), specifying point sizes for fonts from within an image editing
application can be unreliable when it comes to presenting text at a specific size.
When creating images of large-scale text, authors should ensure that the text in the
resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the
default size for body text as rendered by the browser.
</p>
</div>
<p>Hues are perceived differently by users with color vision deficiencies (both congenital
and acquired) resulting in different colors and relative luminance contrasts than
for normally sighted users. Because of this, effective contrast and readability are
different for this population. However, color deficiencies are so diverse that prescribing
effective general use color pairs (for contrast) based on quantitative data is not
feasible. Requiring good luminance contrast accommodates this by requiring contrast
that is independent of color perception. Fortunately, most of the luminance contribution
is from the mid and long wave receptors which largely overlap in their spectral responses.
The result is that effective luminance contrast can generally be computed without
regard to specific color deficiency, except for the use of predominantly long wavelength
colors against darker colors (generally appearing black) for those who have protanopia.
(We provide an advisory technique on avoiding red on black for that reason). For more
information see [[ARDITI-KNOBLAUCH-1994]]
[[ARDITI-KNOBLAUCH-1996]]
[[ARDITI]].
</p>
<div class="note">
<p>Some people with cognitive disabilities require color combinations or hues that have
low contrast, and therefore we allow and encourage authors to provide mechanisms to
adjust the foreground and background colors of the content. Some of the combinations
that could be chosen may have contrast levels that will be lower than those found
in the Success Criteria. This is not a violation of this Success Criterion provided
there is a mechanism that will return to the default values set out in the Success
Criteria.
</p>
</div>
<p>A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] for standard text and vision. The 4.5:1 ratio is used in this provision to account
for the loss in contrast that results from moderately low visual acuity, congenital
or acquired color deficiencies, or the loss of contrast sensitivity that typically
accompanies aging.
</p>
<p>The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable
contrast for normal observers, in the ANSI standard, and b) the empirical finding
that in the population, visual acuity of 20/40 is associated with a contrast sensitivity
loss of roughly 1.5 [[ARDITI-FAYE]]. A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following
analogous empirical findings and the same logic, the user with 20/80 visual acuity
would require contrast of about 7:1.
</p>
<p>The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the
loss in contrast sensitivity usually experienced by users with vision loss equivalent
to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is
commonly reported as typical visual acuity of elders at roughly age 80. [[GITTINGS-FOZARD]]
</p>
<p>The contrast ratio of 7:1 was chosen for level AAA because it compensated for the
loss in contrast sensitivity usually experienced by users with vision loss equivalent
to approximately 20/80 vision. People with more than this degree of vision loss usually
use assistive technologies to access their content (and the assistive technologies
usually have contrast enhancing, as well as magnification capability built into them).
The 7:1 level therefore generally provides compensation for the loss in contrast sensitivity
experienced by users with low vision who do not use assistive technology and provides
contrast enhancement for color deficiency as well.
</p>
<div class="note">
<p>Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast ratio is provided for text that is much larger.</p>
</div>
</section>
<section>
<h3>Notes on formula</h3>
<p>Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [[IEC-4WD]].</p>
<p>The formula (L1/L2) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.</p>
<p>The ANSI/HFS 100-1988 standard calls for the contribution from ambient light to be
included in the calculation of L1 and L2. The .05 value used is based on Typical Viewing
Flare from [[IEC-4WD]].
</p>
<p>This Success Criterion and its definitions use the terms "contrast ratio" and "relative
luminance" rather than "luminance" to reflect the fact that Web content does not emit
light itself. The contrast ratio gives a measure of the relative luminance that would
result when displayed. (Because it is a ratio, it is dimensionless.)
</p>
<div class="note">
<p>
Refer to
<a href="#resources">related resources</a> for a list of tools that utilize the contrast ratio to analyze the contrast of Web
content.
</p>
<p>See also
<a href="focus-visible">2.4.3: Focus Visible</a> for techniques for indicating keyboard focus.
</p>
<p>It is sometimes helpful for authors to not specify colors for certain sections of
a page in order to help users who need to view content with specific color combinations
to view the content in their preferred color scheme. Refer to
<a href="images-of-text">1.4.3: Images of Text</a> for more information.
</p>
</div>
</section>
</section>
<section id="benefits">
<h2>Benefits of Contrast (Minimum)</h2>
<ul>
<li>People with low vision often have difficulty reading text that does not contrast with
its background. This can be exacerbated if the person has a color vision deficiency
that lowers the contrast even further. Providing a minimum luminance contrast ratio
between the text and its background can make the text more readable even if the person
does not see the full range of colors. It also works for the rare individuals who
see no color.
</li>
</ul>
</section>
<section id="examples">
<h2>Examples of Contrast (Minimum)</h2>
</section>
<section id="resources">
<h2>Resources for Contrast (Minimum)</h2>
<ul>
<li>
<a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a>
</li>
<li>
<a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
</li>
<li>
<a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a>
</li>
<li>
<a href="http://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a>
</li>
<li>
<a href="http://www.msfw.com/accessibility/tools/contrastratiocalculator.aspx">Contrast Ratio Calculator</a>
</li>
<li>
<a href="https://color.adobe.com/create/color-contrast-analyzer">Adobe Color - Color Contrast Analyzer Tool</a>
</li>
<li>
<a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a>
</li>
<li>
<a href="http://www.colorsontheweb.com/colorcontrast.asp">Colors On the Web Color Contrast Analyzer</a>
</li>
<li>
<a href="http://www.vischeck.com/daltonize/runDaltonize.php">Tool to convert images based on color loss so that contrast is restored as luminance
contrast when there was only color contrast (that was lost due to color deficiency)
</a>
</li>
<li>
<a href="http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/">List of color contrast tools</a>
</li>
<li>
<a href="https://www.aph.org/research/design-guidelines/">The American Printing House for the Blind Guidelines for Large Printing</a>
</li>
<li>
<a href="https://www.loc.gov/nlsold/reference/guides/largeprint.html">National Library Service for the Blind and Physically Handicapped (NLS), The Library of Congress Guidelines for Large Print</a>
</li>
<li>
<a href="https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-blindness">Types of Color Blindness, National Eye Institute (NEI), National Institutes of Health (NIH), U.S. Department of Health and Human Services (HHS)</a>
</li>
</ul>
</section>
<section id="techniques">
<h2>Techniques for Contrast (Minimum)</h2>
<section id="sufficient">
<h3>Sufficient Techniques for Contrast (Minimum)</h3>
<section class="situation" id="contrast-minimum-situation-0">
<h4>Situation A: text is less than 18 point if not bold and less than 14 point if bold</h4>
<ol>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G18" class="general">Ensuring that contrast of at least 4.5:1 exists between text (and images of text)
and background behind the text
</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
features that change those defaults
</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
a presentation that uses sufficient contrast
</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL13" class="silverlight">Providing A Style Switcher To Switch To High Contrast</a>
</li>
</ol>
</section>
<section class="situation" id="contrast-minimum-situation-1">
<h4>Situation B: text is at least 18 point if not bold and at least 14 point if bold</h4>
<ol>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G145" class="general">Ensuring that a contrast ratio of at least 3:1 exists between text (and images of
text) and background behind the text
</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
features that change those defaults
</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
a presentation that uses sufficient contrast
</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL13" class="silverlight">Providing A Style Switcher To Switch To High Contrast</a>
</li>
</ol>
</section>
</section>
<section id="advisory">
<h3>Additional Techniques (Advisory) for Contrast (Minimum)</h3>
<ul>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G156" class="general">G156</a>
</li>
</ul>
</section>
<section id="failure">
<h3>Failures for Contrast (Minimum)</h3>
<ul>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F24" class="failure">Failure due to specifying foreground colors without specifying background colors or
vice versa
</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F83" class="failure">Failure of 1.4.3 and 1.4.6 due to using background images that do not provide sufficient
contrast with foreground text (or images of text)
</a>
</li>
</ul>
</section>
</section>
</body>
</html>