-
Notifications
You must be signed in to change notification settings - Fork 230
/
G145.html
179 lines (177 loc) · 9.18 KB
/
G145.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text)
and background behind the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text)
and background behind the text</h1><section class="meta"><p class="id">ID: G145</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Any technology that produces visual output.</p>
</section><section id="description"><h2>Description</h2>
<p>The objective of this technique is to make sure that users can read text
that is presented over a background. This technique relaxes the 4.5:1
contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold).</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 <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>
</div>
<p>If the background is a solid color (or all black or all white) then the
contrast ratio of the larger-scale text can be maintained by making sure that each
of the text letters have a 3:1 contrast ratio with the background.</p>
<p>If the background or the letters vary in relative luminance (or are patterned), then
the background around the letters can be chosen or shaded so that the
letters maintain a 3:1 contrast ratio with the background behind them
even if they do not have that contrast ratio with the entire background.</p>
<p>The contrast ratio can sometimes be maintained by changing the
relative luminance of the letters as the relative luminance of the background changes across
the page.</p>
<p>Another method is to provide a halo around the text that provides the
necessary contrast ratio if the background image or color would not
normally be sufficiently different in relative luminance.</p>
</section><section id="examples"><h2>Examples</h2>
<ul>
<li>
<p>A black background is chosen so that light colored letters that match the company's logo can be used.</p>
<p>Larger-scale text is placed over a picture of the college campus. Since a wide variety of colors and darknesses appear in the picture, the area behind the text is fogged white so that the picture is very faint and the maximum darkness is still light enough to maintain a 3:1 contrast ratio with the black text written over the picture.</p>
</li>
</ul>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>
<p>Measure the relative luminance of each letter (unless they are all
uniform) using the formula:</p>
<ul>
<li>
<p>L = 0.2126 *
<strong>R</strong>
+ 0.7152 *
<strong>G</strong>
+ 0.0722 *
<strong>B</strong>
where
<strong>R</strong>,
<strong>G</strong>
and
<strong>B</strong>
are defined as:</p>
<ul>
<li>if R
sRGB
<= 0.04045 then
<strong>R</strong>
= R
sRGB
/12.92 else
<strong>R</strong>
= ((R
sRGB
+0.055)/1.055) ^ 2.4</li>
<li>if G
sRGB
<= 0.04045 then
<strong>G</strong>
= G
sRGB
/12.92 else
<strong>G</strong>
= ((G
sRGB
+0.055)/1.055) ^ 2.4</li>
<li>if B
sRGB
<= 0.04045 then
<strong>B</strong>
= B
sRGB
/12.92 else
<strong>B</strong>
= ((B
sRGB
+0.055)/1.055) ^ 2.4</li>
</ul>
<div class="note">
<p>and R
sRGB, G
sRGB, and B
sRGB
are defined as:</p>
</div>
<ul>
<li>R
sRGB
= R
8bit
/255</li>
<li>G
sRGB
= G
8bit
/255</li>
<li>B
sRGB
= B
8bit
/255</li>
</ul>
<div class="note">
<p>The "^" character is the exponentiation operator.</p>
</div>
</li>
</ul>
<div class="note">
<p>For aliased letters, use the relative luminance value found two pixels in
from the edge of the letter.</p>
</div>
</li>
<li>Measure the relative luminance of the background pixels
immediately next to the letter using same formula.</li>
<li>
<p>Calculate the contrast ratio using the following
formula.</p>
<ul>
<li>
<p>(L1 + 0.05) / (L2 + 0.05), where</p>
<ul>
<li>L1 is the
<a>relative luminance</a>
of the lighter of the foreground or background colors, and</li>
<li>L2 is the
<a>relative luminance</a>
of the darker of the foreground or background colors.</li>
</ul>
</li>
</ul>
</li>
<li>Check that the contrast ratio is equal to or
greater than 3:1</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#4 is true</li>
</ul>
</section>
<p class="note">Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.</p>
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</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://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</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>
</ul>
</section></body></html>