Added a range to colour contrast alpha checks before adding a warning (accounts for bg alpha 0). Added unit tests for error varieties. #pr134 is failing in the unit test but passing in the browser, it may be a phantomjs quirk.

ironikart · ironikart · commit 3f4535a8247f · 2018-07-05T11:04:31.000+10:00
diff --git a/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3_Contrast.js b/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3_Contrast.js
@@ -119,7 +119,10 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
                             parent = parent.parentNode;
                         }//end while
 
-                        if (bgColour && HTMLCS.util.colourStrToRGB(bgColour).alpha < 1.0) {
+                        var bgAlpha = HTMLCS.util.colourStrToRGB(bgColour).alpha;
+                        var fgAlpha = HTMLCS.util.colourStrToRGB(foreColour).alpha;
+
+                        if (bgColour && bgAlpha < 1.0 && bgAlpha > 0) {
                             // If we have a rgba background colour, skip the contrast ratio checks,
                             // and push a warning instead.
                             failures.push({
@@ -131,7 +134,7 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
                                 hasAlpha: true,
                             });
                             continue;
-                        } else if (foreColour && HTMLCS.util.colourStrToRGB(foreColour).alpha < 1.0) {
+                        } else if (foreColour && fgAlpha < 1.0 && fgAlpha > 0) {
                             // If we have a rgba fore colour, skip the contrast ratio checks,
                             // and push a warning instead.
                             failures.push({
diff --git a/Tests/WCAG2/1_4_3_Contrast.html b/Tests/WCAG2/1_4_3_Contrast.html
@@ -7,6 +7,8 @@
 Standard: WCAG2AA
 Assert: Error *.G18.Fail on #basicContrastFail
 Assert: No Error *.G18 on #issue155
+Assert: Warning *.G145.Alpha on #rgba
+Assert: Warning *.G18.Alpha on #rgba2
 -->
 </head>
 <body>
@@ -15,7 +17,14 @@
 
 <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>
 
-<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>
+<div>Warning: <div 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</div></div>
+
+<div>Warning RGBA: <div id="rgba" style="color: #7c7cff; background-color: rgba(0,0,0,0.5); font-size: 14pt; font-weight: bold;">I am 14pt bold text on a transparent background and should generate a warning</div></div>
+
+<div style="background-color: #ccc">
+    <span>Warning RBGA in BG</span>
+    <div id="rgba2" style="background-color: rgba(0,0,0,0.2);">Text</div>
+</div>
 
 </body>
 </html>
