-
Notifications
You must be signed in to change notification settings - Fork 266
/
Copy pathvisual-audio-contrast7.xml
258 lines (257 loc) · 17.8 KB
/
visual-audio-contrast7.xml
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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE div2
SYSTEM "../xmlspec.dtd">
<div2 id="visual-audio-contrast7" role="extsrc">
<head>1.4.6</head>
<div3 role="intent"><!--BBC: Note that this is identical to 1.4.3 intent -->
<head>Intent of this Success Criterion</head>
<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 moderately low vision (who do not 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). Color deficiencies can affect luminance contrast somewhat. Therefore, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background.</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 <loc href="#visual-audio-contrast7-resources-head">Resources</loc>). "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>
<note>
<p>The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does when evaluating this success criterion. Point sizes are based on the CSS pt size as defined in <loc ref="https://www.w3.org/TR/css3-values/#absolute-lengths">CSS3 Values</loc>. 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>When fonts have anti-aliasing applied to make them look smoother, they can lose darkness or lightness. Thus, the actual contrast can be reduced. Thicker stem widths will reduce this effect (thin fonts could have the full stem lightened rather than just the ends). Using larger fonts and testing for legibility in user agents with font smoothing turned on is recommended.
</p>
<p>Because different image editing applications default to different pixel densities (ex. 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>
</note>
<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.5
</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 users. 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>
<p>Although this Success Criterion only applies to text, similar issues occur for <phrase>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.</phrase></p>
<div4>
<head>Rationale for the Ratios Chosen</head>
<!-- BBC: Note that next sentence needs to differ slightly from 1.4.3 wrt. "this provision" -->
<p>A contrast ratio of 3:1 is the minimum level recommended by <bibref ref="ISO-9241-3"/> and <bibref ref="ANSI-HFES-100-1988"/> for standard text and vision. The 4.5:1 ratio is used in Success Criterion 1.4.3 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 <bibref ref="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>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 <bibref ref="ARDITI-KNOBLAUCH-1994"/>
<bibref ref="ARDITI-KNOBLAUCH-1996"/>
<bibref ref="ARDITI"/>.</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. <bibref ref="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>
<note>
<p>Calculations in <bibref ref="ISO-9241-3"/> and <bibref ref="ANSI-HFES-100-1988"/> are for body text. A relaxed contrast ratio is provided for text that is much larger.</p>
</note>
</div4>
<div4>
<head>Notes on formula</head>
<p>Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 <bibref ref="IEC-4WD"/> and on "A Standard Default Color Space for the Internet - sRGB" <bibref ref="sRGB"/>.</p>
<p>The formula (L1/L2) for contrast is based on <bibref ref="ISO-9241-3"/> and <bibref ref="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 <bibref ref="IEC-4WD"/> and the <bibref ref="sRGB"/> paper by M. Stokes et al.</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>
<note>
<p>
Refer to <loc href="#visual-audio-contrast7-resources-head">related resources</loc> for a list of tools that utilize the contrast ratio to analyze the contrast of Web content.
</p>
<p>See also <specref ref="navigation-mechanisms-focus-visible"/> for techniques for indicating keyboard focus.</p>
</note>
</div4>
<div4 role="benefits">
<head/>
<ulist>
<item>
<p>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. </p>
</item>
</ulist>
</div4>
</div3>
<div3 role="examples">
<head/>
</div3>
<div3 role="resources">
<head>Resources</head>
<ulist>
<item>
<p>
<loc href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</loc>
</p>
</item>
<item>
<p>
<loc href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</loc>
</p>
</item>
<item>
<p>
<loc href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</loc>
</p>
</item>
<item>
<p>
<loc href="http://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</loc>
</p>
</item>
<item>
<p>
<loc href="http://www.msfw.com/accessibility/tools/contrastratiocalculator.aspx">Contrast Ratio Calculator</loc>
</p>
</item>
<item>
<p>
<loc href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</loc>
</p>
</item>
<item>
<p>
<loc href="http://www.w3.org/Graphics/atypical-color-response">Atypical colour response</loc>
</p>
</item>
<item>
<p>
<loc href="http://www.colorsontheweb.com/colorcontrast.asp">Colors On the Web Color Contrast Analyzer</loc>
</p>
</item>
<item>
<p>
<loc href="http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/">6 Surprising Bad Practices That Hurt Dyslexic Users</loc>
</p>
</item>
<item>
<p>
<loc href="http://accessites.org/site/2006/11/designing-for-dyslexics-part-3-of-3">Design for Dyslexics</loc>
</p>
</item>
<item>
<p>
<loc href="http://www.iansyst.co.uk/articles/article/articles/2012/10/18/fonts-for-dyslexia">Typefaces for Dyslexia</loc>
</p>
</item>
<item>
<p>
<loc href="http://www.dyslexia.com/library/webdesign.htm">Web Design for Dyslexia</loc>
</p>
</item>
</ulist>
</div3>
<div3 role="techniques">
<head>Techniques for Addressing Success Criterion 1.4.6</head>
<div4 role="sufficient">
<head/>
<div5 role="situation">
<head>Situation A: text is less than 18 point if not bold and less than 14 point if bold</head>
<olist>
<item>
<p>
<loc href="G17"
linktype="general">Ensuring that contrast of at least 10:1 exists between text and background behind the text</loc>
</p>
</item>
<item>
<p>
<loc href="G148"
linktype="general">Not specifying background color, not specifying text color, and not using technology features that change those defaults</loc>
</p>
</item>
<item>
<p>
<loc href="G174"
linktype="general">Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</loc>
</p>
</item>
<item>
<p>
<loc href="SL13"
linktype="silverlight"/>
</p>
</item>
</olist>
</div5>
<div5 role="situation">
<head>Situation B: text is as least 18 point if not bold and at least 14 point if bold</head>
<olist>
<item>
<p>
<loc href="G18"
linktype="general">Ensuring that a contrast ratio of at least 4.5:1 exists between text and background behind the text</loc>
</p>
</item>
<item>
<p>
<loc href="G148"
linktype="general">Not specifying background color, not specifying text color, and not using technology features that change those defaults</loc>
</p>
</item>
<item>
<p>
<loc href="G174"
linktype="general">Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</loc>
</p>
</item>
<item>
<p>
<loc href="SL13"
linktype="silverlight"/>
</p>
</item>
</olist>
</div5>
</div4>
<div4 role="tech-optional">
<head>Additional Techniques (Advisory) for 1.4.6</head>
<ulist>
<item>
<p>
<loc href="G156"
linktype="general">G156</loc>
</p>
</item>
<item>
<p>
Using a higher contrast value for text that is over a patterned background (future link)
</p>
</item>
<item>
<p>Using Unicode text and style sheets instead of images of text (future link)
</p>
</item>
<item>
<p>Using a higher contrast values for lines in diagrams (future link)</p>
</item>
<item>
<p>Using greater contrast level for red-black text/background combinations</p>
</item>
<item>
<p>Using colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark</p>
</item>
<item>
<p>Using a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast (future link)</p>
</item>
<item>
<p>Making icons using simple line drawings that meet the contrast provisions for text (future link)
</p>
</item>
<item>
<p>Providing sufficient <phrase>contrast ratio</phrase> in graphs and charts (future link)
</p>
</item>
<item>
<p>Using a 3:1 contrast ratio or higher as the default presentation (future link) </p>
</item>
<item>
<p>Providing sufficient color contrast for empty text fields (future link) </p>
</item>
</ulist>
</div4>
<div4 role="failures">
<head/>
<ulist>
<item>
<p>
<loc href="F24"
linktype="failure">Failure of Success Criterion 1.4.3 due to specifying foreground colors without specifying background colors or vice versa</loc>
</p>
</item>
<item>
<p>
<loc href="F83"
linktype="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)</loc>
</p>
</item>
</ulist>
</div4>
</div3>
</div2>