-
Notifications
You must be signed in to change notification settings - Fork 4
/
rgbcompute.html
328 lines (289 loc) · 13.7 KB
/
rgbcompute.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flashing Tests</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
p, blockquote, pre,abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd,/* ol,*/ ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/***********General*************************/
body {
height: 100%;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4em;
margin:0 auto;
width:90%;
color:#303030;
word-wrap: break-word;
}
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
#tally {
font-size:1.2em;
font-weight: 700;
}
/********************General Headers*****************/
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif;}
h1 {
font-size:2em;
font-weight:600;
color:#004380;
}
h2 {
font-size: 1.6em;
font-weight: 600;
margin-top:1.3em;
color:#004380;
}
h3 {
font-size:1.2em;
font-weight: 600;
margin-top:1.5em;
margin-bottom: 0;
margin-bottom: 1.3em;
color: #004080;
}
/****************General Links***********************/
a:link {
color: #004380;
text-decoration:underline;
}
a:visited {
color: #004380;
text-decoration:none;
}
a:active,a:hover {
color: #1F60BF;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>Testing for Three Flashes or Below Threshold</h1>
<p><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#seizure-does-not-violate" target="_blank">WCAG 2.0 SC 2.3.1</a> Level A requirement:
<blockquote cite="https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html"> Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html#general-thresholddef" target="_blank">the general flash and red flash thresholds</a>.
</blockquote>
</p>
<p>The following tests can be performed in any order, but have been listed according to the SC requirement. Passing any of these tests will meet SC 2.3.1:
<ul>
<li>Test 1: if a flashing element has a frequency at or below 3 Hertz;</li>
<li>Test 2: if a flashing component is smaller than the size threshold;</li>
<li>Test 3: if a flashing component does not contain more than 3 general flashes or 3 red flashes in a second.</li>
</ul>
</p>
<p><strong>**These tests may not be safe for testers with sensitivity to flashing components.**</strong> These tests require extended viewing of flashing content. Testers are strongly encouraged to read the test descriptions and understand the warnings before performing any tests. </p>
<h2>Test 1: The 3 Hertz Flasher</h2>
<p>Determine if the frequency of the flashing component is 3 Hertz or below. If it is, then it meets the requirement. </p>
<p><strong>**Warning: activating the bookmarklet will display flashing content on the screen.**</strong> Using this bookmarklet to test flashing content will result in multiple flashing elements on screen.</p>
<ol>
<li>Add the <a href="javascript:(function(){OverlayScript=document.createElement('script');OverlayScript.setAttribute('src','https://kengdoj.github.io/new-bookmarklets/bookmarklet_js/flasher3hz.js');document.body.insertBefore(OverlayScript, document.body.firstChild);}());">3Hz Flasher</a> bookmarklet to your browser. </li>
<li>After the bookmarklet is installed, navigate to the web page to be tested.</li>
<li>Active the 3Hz Flasher bookmarklet to display an overlay with text that flashes at 3 Hz (3 times per second). This can be used as a reference to help determine whether something is flashing slower or faster than 3 Hz.</li>
<ul>
<li>If it is obviously flashing slower than the overlay text, then it is below the 3 hertz frequency requirement. It's conformant with SC 2.3.1. Further testing is not necessary.</li>
<li>If page content is flashing faster than the overlay text, or it's close or too difficult to determine which is faster, continue to the next step for further testing. </li>
</ul>
<li>To remove the flashing overlay text, refresh the page.</li>
</ol>
<h2>Test 2: Check the size of the flashing content</h2>
<p>A flashing component must be either smaller than a size requirement or it must not contain a general flash or red flash. We will check the size requirement first since it's an easier test. </p>
<p> The flashing content meets the requirement if the combined area of flashes is smaller than a 341x256 pixel rectangle when the content is viewed at 1024 x 768 screen resolution.
<ol>
<li>Add the <a href="javascript:(function(){FlashRecScript=document.createElement('script');FlashRecScript.setAttribute('src','https://kengdoj.github.io/new-bookmarklets/bookmarklet_js/flash_rectc.js');document.body.insertBefore(FlashRecScript, document.body.firstChild);}());">Flash Rectangle bookmarklet</a> to your browser.</li>
<li>After the bookmarklet is installed, navigate to the web page to be tested.</li>
<li><a href="https://support.microsoft.com/en-us/help/14108/windows-7-change-screen-resolution" target="_blank">Set your screen resolution</a> to 1024 x 768.</li>
<li>Activate the Flash rectangle bookmarklet. Choose a vertical or horizontal orientation and drag the rectangle over the flashing content. </li>
<ul>
<li>If all of the combined flashing content can be covered by the rectangle, it is small enough and passes SC 2.3.1. Further testing is not necessary.</li>
<li>If all of the combined flashing content can not be covered by the rectangle, continue to the next test.
</ul>
<li>To remove the flash rectangle, refresh the page.</li>
</ol>
<h2>Test 3: Check for a general flash or red flash</h2>
<p>This final test step utilizes the values entered below (on this page) to compute the existence of a red or general flash. Obtain the RGB values of the component that flashes. This can be done by using the eye dropper tool of the <a href="https://developer.paciellogroup.com/resources/contrastanalyser/" target="_blank">Color Contrast Analyser (CCA) from the Paciello Group</a> or a similar eye dropper tool. </p>
<p><strong>**Warning: extended viewing of a flashing component is necessary to grab the colors with an eye dropper.**</strong></p>
<ol>
<li>Navigate to the page to be tested.</li>
<li>Open the eye dropper tool (CCA)</li>
<li>Select the Foreground eye dropper. </li>
<li>Place the eye dropper tool over the flashing element to select a color that is flashing. CCA will display the RGB values for that color. (If hex values are displayed, select "RGB" under the Options menu - Displayed color value.)
<li>Use the Background eye dropper to select the opposing color of the flashing element.</li>
</ol>
<h3>Enter the RGB values for the two colors</h3>
<p id="instr">Please enter RGB values for both colors. The range for each input is from 0 to 255, inclusive. Results will be provided in the next section.</p>
<form action="" id="rgbform" onsubmit="return false;">
<fieldset>
<legend>First color:</legend>
<label for="red1">R:</label><input type="number" min="0" max="255" required id="red1">
<label for="green1">G:</label><input type="number" min="0" max="255" required id="green1">
<label for="blue1">B:</label><input type="number" min="0" max="255" required id="blue1">
</fieldset>
<br>
<fieldset>
<legend>Second color:</legend>
<label for="red2">R:</label><input type="number" min="0" max="255" required id="red2">
<label for="green2">G:</label><input type="number" min="0" max="255" required id="green2">
<label for="blue2">B:</label><input type="number" min="0" max="255" required id="blue2">
</fieldset>
<br><button onclick="calcflash()">Calculate Flash</button>
<button onclick="resetform()">Reset Form</button>
</form>
<h3>Test Results for the entered color values:</h3>
<p id="error"></p>
<p id="lumi"></p>
<p id="satred"></p>
<p id="genfl"></p>
<p id="tally"></p>
<script>
function resetform() {
document.getElementById("rgbform").reset();
document.getElementById("error").innerHTML= "";
document.getElementById("lumi").innerHTML= "";
document.getElementById("satred").innerHTML= "";
document.getElementById("genfl").innerHTML= "";
document.getElementById("tally").innerHTML= "";
}
</script>
<script>
function calcflash() {
var r1_get=document.getElementById("red1");
var g1_get=document.getElementById("green1");
var b1_get=document.getElementById("blue1");
var r2_get=document.getElementById("red2");
var g2_get=document.getElementById("green2");
var b2_get=document.getElementById("blue2");
var r1_8bit=document.getElementById("red1").value;
var g1_8bit=document.getElementById("green1").value;
var b1_8bit=document.getElementById("blue1").value;
var r2_8bit=document.getElementById("red2").value;
var g2_8bit=document.getElementById("green2").value;
var b2_8bit=document.getElementById("blue2").value;
var r1sRGB=r1_8bit/ 255;
var g1sRGB=g1_8bit/ 255;
var b1sRGB=b1_8bit/ 255;
var r2sRGB=r2_8bit/ 255;
var g2sRGB=g2_8bit/ 255;
var b2sRGB=b2_8bit/ 255;
var r1,g1,b1,r2,g2,b2,lum1, lum2, satr1b, satr2b;
var darkerL, brighterL, tenpercentbL, diffL;
var satr1a = (r1_8bit)/(r1_8bit + g1_8bit + b1_8bit);
var satr2a = (r2_8bit)/(r2_8bit + g2_8bit + b2_8bit);
var redfl, genfl;
//Clear results section
document.getElementById("lumi").innerHTML= "";
document.getElementById("satred").innerHTML= "";
document.getElementById("genfl").innerHTML= "";
document.getElementById("tally").innerHTML= "";
//Input validation (reference: https://www.w3schools.com/js/js_validation_api.asp)
if (!r1_get.checkValidity()||!g1_get.checkValidity()||!b1_get.checkValidity()||!r2_get.checkValidity()||!g2_get.checkValidity()||!b2_get.checkValidity())
{
document.getElementById("error").innerHTML= "Input error(s) found: Please enter all RGB values. The range for each input is from 0 to 255, inclusive.";
} else {
document.getElementById("error").innerHTML= "";
//Compute r1, g1, b1 for Lum1
if (r1sRGB <= 0.03928) {
r1=(r1sRGB/12.92);
} else {
r1= Math.pow(((r1sRGB+0.055)/1.055),2.4);
}
if (g1sRGB <= 0.03928) {
g1=(g1sRGB/12.92);
} else {
g1= Math.pow(((g1sRGB+0.055)/1.055),2.4);
}
if (b1sRGB <= 0.03928) {
b1=(b1sRGB/12.92);
} else {
b1= Math.pow(((b1sRGB+0.055)/1.055),2.4);
}
lum1=(0.2126*r1)+(0.7152*g1)+(0.0722*b1);
//Compute r2, g2, b2 for Lum2
if (r2sRGB <= 0.03928) {
r2=(r2sRGB/12.92);
} else {
r2= Math.pow(((r2sRGB+0.055)/1.055),2.4);
}
if (g2sRGB <= 0.03928) {
g2=(g2sRGB/12.92);
} else {
g2= Math.pow(((g2sRGB+0.055)/1.055),2.4);
}
if (b2sRGB <= 0.03928) {
b2=(b2sRGB/12.92);
} else {
b2= Math.pow(((b2sRGB+0.055)/1.055),2.4);
}
lum2=(0.2126*r2)+(0.7152*g2)+(0.0722*b2);
document.getElementById("lumi").innerHTML = ("Luminosity for the first color = "+ lum1.toFixed(4)+ ". Luminosity for the second color = " + lum2.toFixed(4) + ".");
//Saturated Red computation:
//Note 3: The current working definition in the field for "pair of opposing transitions involving a saturated red" is where, for either or both states involved in each transition, R/(R+ G + B) >= 0.8, and the change in the value of (R-G-B)x320 is > 20 (negative values of (R-G-B)x320 are set to zero) for both transitions.
//R, G, B values range from 0-1 as specified in “relative luminance” definition.
satr1a = (Number(r1_8bit)/(Number(r1_8bit)+Number(g1_8bit)+Number(b1_8bit)));
satr2a = (Number(r2_8bit)/(Number(r2_8bit)+Number(g2_8bit)+Number(b2_8bit)));
if ((Number(satr1a) >= 0.8)||(Number(satr2a) >=0.8)) {
satr1b = (Number(r1_8bit)-Number(g1_8bit)-Number(b1_8bit))*320;
satr2b = (Number(r2_8bit)-Number(g2_8bit)-Number(b2_8bit))*320;
if ((Number(satr1b)>20)&&(Number(satr2b)>20)) {
document.getElementById("satred").innerHTML = ("This pair is above the saturated red threshold.");
redfl=1;
} else {
document.getElementById("satred").innerHTML = ("This pair is below the red flash threshold.");
redfl=0;
}
} else {
document.getElementById("satred").innerHTML = ("This pair is below the red flash threshold.");
redfl=0;
}
//General Flash computation:
//A general flash is defined as a pair of opposing changes in relative luminance of 10% or more of the maximum relative luminance where the relative luminance of the darker image is below 0.80; and where "a pair of opposing changes" is an increase followed by a decrease, or a decrease followed by an increase,
if (Number(lum2)>Number(lum1)) {
darkerL = lum1;
brighterL = lum2;
} else {
darkerL = lum2;
brighterL = lum1;
}
//lowest luminance >= 0.8, no general flash
if (Number(darkerL)>=0.8) {
document.getElementById("genfl").innerHTML = ("This pair is below the general flash threshold.");
gen=0;
} else {
tenpercentbL = 0.1*brighterL;
diffL = brighterL-darkerL;
if (diffL>tenpercentbL) {
document.getElementById("genfl").innerHTML = ("This pair is above the general flash threshold.");
genfl=1;
} else {
document.getElementById("genfl").innerHTML = ("This pair is below the general flash threshold. ");
genfl=0;
}
}
if (redfl||genfl) {
document.getElementById("tally").innerHTML = "If this pair flashes more than 3 times in a one second period, it would fail SC 2.3.1.";
} else {
document.getElementById("tally").innerHTML = "This pair passes SC 2.3.1.";
}
}
window.scrollTo(0, document.body.scrollHeight);
}
</script>
</body>
</html>