Skip to content

Commit 5086fe6

Browse files
phillbakerphillbaker
committed
Issue warnings for alpha in contrast checking.
Three complications with calculating the "flattened" (non-alpha) representation of font color and background color are: * determining what is actually behind the text - elements may be positioned with css such that it's very hard to determine what element is the background of some or all of the text * the css opacity element may introduce further aspects of transparency * transparent background can reveal images where contrast cannot be calculated
1 parent 5f45d32 commit 5086fe6

File tree

7 files changed

+50
-107
lines changed

7 files changed

+50
-107
lines changed

‎HTMLCS.Util.js‎

Lines changed: 13 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -534,86 +534,9 @@ _global.HTMLCS.util = function() {
534534
}
535535

536536
/**
537-
* Convert an rgba colour to rgb, by traversing the dom and mixing colors as needed.
537+
* Convert a colour string to a structure with red/green/blue/alpha elements.
538538
*
539-
* @param element - the element to compare the rgba color against.
540-
* @param colour - the starting rgba color to check.
541-
* @returns {Colour Object}
542-
*/
543-
self.rgbaBackgroundToRgb = function(colour, element) {
544-
var parent = element.parentNode;
545-
var original = self.colourStrToRGB(colour);
546-
var backgrounds = [];
547-
var solidFound = false;
548-
549-
if (original.alpha == 1) {
550-
//Return early if it is already solid.
551-
return original;
552-
}
553-
554-
//Find all the background with transparancy until we get to a solid colour
555-
while (solidFound == false) {
556-
if ((!parent) || (!parent.ownerDocument)) {
557-
//No parent was found, assume a solid white background.
558-
backgrounds.push({
559-
red: 1,
560-
green: 1,
561-
blue: 1,
562-
alpha: 1
563-
});
564-
break;
565-
}
566-
567-
var parentStyle = self.style(parent);
568-
var parentColourStr = parentStyle.backgroundColor;
569-
var parentColour = self.colourStrToRGB(parentColourStr);
570-
571-
if ((parentColourStr === 'transparent') || (parentColourStr === 'rgba(0, 0, 0, 0)')) {
572-
//Skip totally transparent parents until we find a solid color.
573-
parent = parent.parentNode;
574-
continue;
575-
}
576-
577-
backgrounds.push(parentColour);
578-
579-
if (parentColour.alpha == 1) {
580-
solidFound = true;
581-
}
582-
583-
parent = parent.parentNode;
584-
}
585-
586-
//Now we need to start with the solid color that we found, and work our way up to the original color.
587-
var solidColour = backgrounds.pop();
588-
while (backgrounds.length) {
589-
solidColour = self.mixColours(solidColour, backgrounds.pop());
590-
}
591-
592-
return self.mixColours(solidColour, original);
593-
};
594-
595-
self.mixColours = function(bg, fg) {
596-
//Convert colors to int values for mixing.
597-
bg.red = Math.round(bg.red*255);
598-
bg.green = Math.round(bg.green*255);
599-
bg.blue = Math.round(bg.blue*255);
600-
fg.red = Math.round(fg.red*255);
601-
fg.green = Math.round(fg.green*255);
602-
fg.blue = Math.round(fg.blue*255);
603-
604-
return {
605-
red: Math.round(fg.alpha * fg.red + (1 - fg.alpha) * bg.red) / 255,
606-
green: Math.round(fg.alpha * fg.green + (1 - fg.alpha) * bg.green) / 255,
607-
blue: Math.round(fg.alpha * fg.blue + (1 - fg.alpha) * bg.blue) / 255,
608-
alpha: bg.alpha
609-
}
610-
}
611-
612-
/**
613-
* Convert a colour string to a structure with red/green/blue elements.
614-
*
615-
* Supports rgb() and hex colours (3 or 6 hex digits, optional "#").
616-
* rgba() also supported but the alpha channel is currently ignored.
539+
* Supports rgb() and hex colours (3, 4, 6 or 8 hex digits, optional "#").
617540
* Each red/green/blue element is in the range [0.0, 1.0].
618541
*
619542
* @param {String} colour The colour to convert.
@@ -645,11 +568,20 @@ _global.HTMLCS.util = function() {
645568
colour = colour.replace(/^(.)(.)(.)$/, '$1$1$2$2$3$3');
646569
}
647570

571+
if (colour.length === 4) {
572+
colour = colour.replace(/^(.)(.)(.)(.)$/, '$1$1$2$2$3$3$4$4');
573+
}
574+
575+
var alpha = 1; // Default if alpha is not specified
576+
if (colour.length === 8) {
577+
alpha = parseInt(colour.substr(6, 2), 16) / 255;
578+
}
579+
648580
colour = {
649581
red: (parseInt(colour.substr(0, 2), 16) / 255),
650-
gsreen: (parseInt(colour.substr(2, 2), 16) / 255),
582+
green: (parseInt(colour.substr(2, 2), 16) / 255),
651583
blue: (parseInt(colour.substr(4, 2), 16) / 255),
652-
alpha: 1
584+
alpha: alpha,
653585
};
654586
}
655587

‎Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_3/1_3_1.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,6 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_3_1_3_1 = {
202202
testLabelsOnInputs: function(element, top, muteErrors)
203203
{
204204
var nodeName = element.nodeName.toLowerCase();
205-
var style = HTMLCS.util.style(element);
206205
var inputType = nodeName;
207206
if (inputType === 'input') {
208207
if (element.hasAttribute('type') === true) {
@@ -231,10 +230,6 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_3_1_3_1 = {
231230
if (element.getAttribute('hidden') !== null) {
232231
needsLabel = false;
233232
}
234-
235-
if ('none' === style.display) {
236-
needsLabel = false;
237-
}
238233

239234
// Find an explicit label.
240235
var explicitLabel = element.ownerDocument.querySelector('label[for="' + element.id + '"]');

‎Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,22 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3 = {
3939

4040
for (var i = 0; i < failures.length; i++) {
4141
var element = failures[i].element;
42-
42+
4343
var decimals = 2;
4444
var value = (Math.round(failures[i].value * Math.pow(10, decimals)) / Math.pow(10, decimals));
4545
var required = failures[i].required;
4646
var recommend = failures[i].recommendation;
4747
var hasBgImg = failures[i].hasBgImage || false;
4848
var bgColour = failures[i].bgColour || false;
4949
var isAbsolute = failures[i].isAbsolute || false;
50+
var hasAlpha = failures[i].hasAlpha || false;
5051

5152
// If the values would look identical, add decimals to the value.
5253
while (required === value) {
5354
decimals++;
5455
value = (Math.round(failures[i].value * Math.pow(10, decimals)) / Math.pow(10, decimals));
5556
}
56-
57+
5758
if (required === 4.5) {
5859
var code = 'G18';
5960
} else if (required === 3.0) {
@@ -80,6 +81,9 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3 = {
8081
} else if (hasBgImg === true) {
8182
code += '.BgImage';
8283
HTMLCS.addMessage(HTMLCS.WARNING, element, _global.HTMLCS.getTranslation("1_4_3_G18_or_G145.BgImage").replace(/\{\{required\}\}/g, required), code);
84+
} else if (hasAlpha === true) {
85+
code += '.Alpha';
86+
HTMLCS.addMessage(HTMLCS.WARNING, element, _global.HTMLCS.getTranslation("1_4_3_G18_or_G145.Alpha").replace(/\{\{required\}\}/g, required), code);
8387
} else {
8488
code += '.Fail';
8589
HTMLCS.addMessage(HTMLCS.ERROR, element, _global.HTMLCS.getTranslation("1_4_3_G18_or_G145.Fail").replace(/\{\{required\}\}/g, required).replace(/\{\{value\}\}/g, value) + recommendText, code);

‎Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3_Contrast.js‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
2323
var toProcess = [];
2424
var body = top.getElementsByTagName('body');
2525
if (body.length) {
26-
//SVG objects will not have a body element. Don't check them.
26+
// SVG objects will not have a body element. Don't check them.
2727
var toProcess = [body[0]];
2828
}
2929
} else {
@@ -99,8 +99,8 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
9999
isAbsolute = true;
100100
}
101101

102-
//Search for the smooth scrolling willChange: 'transform' background hack
103-
//See http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
102+
// Search for the smooth scrolling willChange: 'transform' background hack
103+
// See http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
104104
var beforeStyle = HTMLCS.util.style(parent, ':before');
105105
if (
106106
beforeStyle
@@ -119,15 +119,31 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
119119
parent = parent.parentNode;
120120
}//end while
121121

122-
if (bgColour && bgColour.indexOf('rgba') === 0) {
123-
bgColour = HTMLCS.util.RGBtoColourStr(HTMLCS.util.rgbaBackgroundToRgb(bgColour, bgElement));
124-
}
125-
126-
if (foreColour && foreColour.indexOf('rgba') === 0) {
127-
foreColour = HTMLCS.util.RGBtoColourStr(HTMLCS.util.rgbaBackgroundToRgb(foreColour, node));
128-
}
129-
130-
if (hasBgImg === true) {
122+
if (bgColour && HTMLCS.util.colourStrToRGB(bgColour).alpha < 1.0) {
123+
// If we have a rgba background colour, skip the contrast ratio checks,
124+
// and push a warning instead.
125+
failures.push({
126+
element: node,
127+
colour: foreColour,
128+
bgColour: bgColour,
129+
value: undefined,
130+
required: reqRatio,
131+
hasAlpha: true,
132+
});
133+
continue;
134+
} else if (foreColour && HTMLCS.util.colourStrToRGB(foreColour).alpha < 1.0) {
135+
// If we have a rgba fore colour, skip the contrast ratio checks,
136+
// and push a warning instead.
137+
failures.push({
138+
element: node,
139+
colour: foreColour,
140+
bgColour: foreColour,
141+
value: undefined,
142+
required: reqRatio,
143+
hasAlpha: true
144+
});
145+
continue;
146+
} else if (hasBgImg === true) {
131147
// If we have a background image, skip the contrast ratio checks,
132148
// and push a warning instead.
133149
failures.push({

‎Standards/WCAG2AAA/Sniffs/Principle4/Guideline4_1/4_1_2.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -185,13 +185,6 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle4_Guideline4_1_4_1_2 = {
185185
var element = elements[el];
186186
var nodeName = element.nodeName.toLowerCase();
187187
var msgSubCode = element.nodeName.substr(0, 1).toUpperCase() + element.nodeName.substr(1).toLowerCase();
188-
189-
var style = HTMLCS.util.style(element);
190-
if ('none' === style.display) {
191-
//Element is hidden, so no name is required
192-
continue;
193-
}
194-
195188
if (nodeName === 'input') {
196189
if (element.hasAttribute('type') === false) {
197190
// If no type attribute, default to text.

‎Tests/WCAG2/1_4_3_Contrast.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515

1616
<p>Sample: <span id="issue155" style="color: #7c7cff; background-color: #ffffff; font-size: 14pt; font-weight: bold;">I am 14pt bold text and should pass</span></p>
1717

18+
<p>Warning: <span id="pr134" style="color: #7c7cff; background-color: #0000000C; font-size: 14pt; font-weight: bold;">I am 14pt bold text on a transparent background and should generate a warning</span></p>
19+
1820
</body>
1921
</html>
2022

‎Translations/en.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@ _global.translation['en'] = {
177177
//1_4_3.js
178178
,"1_4_3_G18_or_G145.Abs" : 'This element is absolutely positioned and the background color can not be determined. Ensure the contrast ratio between the text and all covered parts of the background are at least {{required}}:1.'
179179
,"1_4_3_G18_or_G145.BgImage" : 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least {{required}}:1.'
180+
,"1_4_3_G18_or_G145.Alpha" : 'This element\'s text or background contains transparency. Ensure the contrast ratio between the text and background are at least {{required}}:1.'
180181
,"1_4_3_G18_or_G145.Fail" : 'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least {{required}}:1, but text in this element has a contrast ratio of {{value}}:1.'
181182
,"1_4_3_G18_or_G145.Fail.Recomendation" : 'Recommendation: change'
182183
,"1_4_3_G18_or_G145.Fail.Recomendation.Text" : 'text colour to'

0 commit comments

Comments
 (0)