wcag/understanding/20/contrast-enhanced.html at 466047c5293e82a1e034698f07f928c483c1cc08 · w3c/wcag · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Understanding Contrast (Enhanced)</title>
   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
</head>
<body>
   <h1>Understanding Contrast (Enhanced)</h1>

   <section id="brief">
      <h2>In brief</h2>
      <dl>
         <dt>Goal</dt><dd>Text can be seen by people who need strong contrast.</dd>
         <dt>What to do</dt><dd>Strongly contrast text against its background.</dd>
         <dt>Why it's important</dt><dd>Some people cannot read text with minimum contrast.</dd>
      </dl>

   </section>

   <section id="intent">
      <h2>Intent of Contrast (Enhanced)</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 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
         <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 thin or unusual
         fonts is included in the definition for <a>large-scale</a> text.
      </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 <code>pt</code> 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 <code>1pt = 1.333px</code>, therefore <code>14pt</code>
            and <code>18pt</code> are equivalent to approximately <code>18.5px</code> and <code>24px</code>.
         </p>
         <p>Because different image editing applications default to different pixel densities
            (e.g., <code>72ppi</code> or <code>96ppi</code>), 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 <code>72ppi</code> image, an author would need
            to use approximately 19pt and 24pt font sizes in order to successfully present images
            of large-scale text to a user.
         </p>
         <p>The 7:1 and 4.5:1 contrast ratios referenced in this success criterion are intended to be
            treated as threshold values. When comparing the computed contrast ratio to the Success Criterion
            ratio, the computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold).</p>
      </div>

      <div class="note">
         <p>Because authors do not have control over user settings for font smoothing/anti-aliasing, when evaluating this
            Success Criterion, refer to the foreground and background colors obtained from the user agent, or the underlying
            markup and stylesheets, rather than the text as presented on screen.</p>
         <p>Due to anti-aliasing, particularly thin or unusual fonts may be rendered by user agents with a much fainter
            color than the actual text color defined in the underlying CSS. This can lead to situations where text has
            a contrast ratio that nominally passes the Success Criterion, but has a much lower contrast in practice.
            In these cases, best practice would be for authors to choose a font with stronger/thicker lines,
            or to aim for a foreground/background color combination that exceeds the normative requirements
            of this success criterion.
         </p>
      </div>

      <p>The contrast requirements for text also apply to images of text
         (text that has been rendered into pixels and then stored in an image format) - see
         <a href="images-of-text">Success Criterion 1.4.5 Images of Text</a>.
      </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. See <a href="images-of-text">1.4.5: Images of Text</a>.

         </p>

      </div>

      <p>This success criterion 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, which is covered by
         <a href="non-text-contrast">Success Criterion 1.4.11 Non-Text Contrast</a>.
      </p>

      <section>

         <h3>Rationale for the Ratios Chosen</h3>

         <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 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 [[ARDITI-FAYE]]. A user with 20/40 would thus require a contrast ratio of
            <code>3 * 1.5 = 4.5 to 1</code>. Following analogous empirical findings and the same logic,
            the user with 20/80 visual acuity would require contrast of about 7:1. This ratio is used in
            this success criterion.
         </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 [[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
               specified here. This is not a violation of this Success Criterion, provided
               there is a mechanism that will return to the required values set out here.
            </p>

         </div>

         <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 (<code>L1/L2</code>) 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 <code>.05</code> 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.7: Focus Visible</a> for techniques for indicating keyboard focus.
            </p>
         </div>

      </section>

      <section id="inactive-controls">
         <h3>Inactive User Interface Components</h3>

         <p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
         <figure id="figure-grey-button-and-text">
            {% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
            <figcaption> An inactive button using default browser styles</figcaption>
         </figure>
      </section>

   </section>
   <section id="benefits">
      <h2>Benefits of Contrast (Enhanced)</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 (Enhanced)</h2>


   </section>

   <section id="resources">
      <h2>Resources for Contrast (Enhanced)</h2>


      <ul>

         <li>
            <a href="https://www.tpgi.com/color-contrast-checker/">Colour Contrast Analyser application</a>
         </li>

         <li>
            <a href="https://juicystudio.com/services/luminositycontrastratio.php">Luminosity Colour Contrast Ratio Analyser</a>
         </li>

         <li>
            <a href="https://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a>
         </li>

         <li>
            <a href="https://www.msfw.com/Services/ContrastRatioCalculator">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="https://www.iansyst.co.uk/fonts/">Reading with Dyslexia - Fonts that can help alleviate visual stress.</a>
         </li>

         <li>
            <a href="https://blog.dyslexia.com/good-fonts-for-dyslexia-an-experimental-study/">Good Fonts for Dyslexia - An Experimental Study</a>
         </li>

      </ul>

   </section>

   {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %}
   {% include "understanding/techniques.html" %}
</body>
</html>