Add more tests for color contrast; switch to rounding to nearest 0.1 instead of using a tolerance value

Author: Alice Boxhall

src/audits/LowContrast.js

@@ -33,7 +33,7 @@ axs.AuditRule.specs.lowContrastElements = {
         var style = window.getComputedStyle(element, null);
         var contrastRatio =
             axs.utils.getContrastRatioForElementWithComputedStyle(style, element);
-        return (contrastRatio && axs.utils.isLowContrast(contrastRatio, style, false, 0.02));
+        return (contrastRatio && axs.utils.isLowContrast(contrastRatio, style, false));
     },
     code: 'AX_COLOR_01'
 };

src/js/AccessibilityUtils.js

@@ -817,18 +817,17 @@ axs.utils.isNativeTextElement = function(element) {
  * @param {number} contrastRatio
  * @param {CSSStyleDeclaration} style
  * @param {boolean=} opt_strict Whether to use AA (false) or AAA (true) level
- * @param {number=} opt_tolerance The amount by which the contrast ratio can
- *      acceptably be less than the recommended values.
  * @return {boolean}
  */
-axs.utils.isLowContrast = function(contrastRatio, style, opt_strict, opt_tolerance) {
-    var tolerance = opt_tolerance || 0;
+axs.utils.isLowContrast = function(contrastRatio, style, opt_strict) {
+    // Round to nearest 0.1
+    var roundedContrastRatio = (Math.round(contrastRatio * 10) / 10);
     if (!opt_strict) {
-        return contrastRatio + tolerance < 3.0 ||
-            (!axs.utils.isLargeFont(style) && contrastRatio + tolerance < 4.5);
+        return roundedContrastRatio < 3.0 ||
+            (!axs.utils.isLargeFont(style) && roundedContrastRatio < 4.5);
     } else {
-        return contrastRatio + tolerance < 4.5 ||
-            (!axs.utils.isLargeFont(style) && contrastRatio + tolerance < 7.0);
+        return roundedContrastRatio < 4.5 ||
+            (!axs.utils.isLargeFont(style) && roundedContrastRatio < 7.0);
     }
 };
 

test/audits/low-contrast-test.js

@@ -1,5 +1,43 @@
 module("LowContrast");
 
+test("No text = no relevant elements", function() {
+  var fixture = document.getElementById('qunit-fixture');
+  var div = document.createElement('div');
+  div.style.backgroundColor = 'white';
+  div.style.color = 'white';
+  fixture.appendChild(div);
+  deepEqual(
+    axs.AuditRules.getRule('lowContrastElements').run([], fixture),
+    { result: axs.constants.AuditResult.NA }
+  );
+});
+
+test("Black on white = no problem", function() {
+  var fixture = document.getElementById('qunit-fixture');
+  var div = document.createElement('div');
+  div.style.backgroundColor = 'white';
+  div.style.color = 'black';
+  div.textContent = 'Some text';
+  fixture.appendChild(div);
+  deepEqual(
+    axs.AuditRules.getRule('lowContrastElements').run([], fixture),
+    { elements: [], result: axs.constants.AuditResult.PASS }
+  );
+});
+
+test("Low contrast = fail", function() {
+  var fixture = document.getElementById('qunit-fixture');
+  var div = document.createElement('div');
+  div.style.backgroundColor = 'white';
+  div.style.color = '#aaa';  // Contrast ratio = 2.32
+  div.textContent = 'Some text';
+  fixture.appendChild(div);
+  deepEqual(
+    axs.AuditRules.getRule('lowContrastElements').run([], fixture),
+    { elements: [div], result: axs.constants.AuditResult.FAIL }
+  );
+});
+
 test("Opacity is handled", function() {
   // Setup fixture
   var fixtures = document.getElementById('qunit-fixture');
@@ -12,3 +50,16 @@ test("Opacity is handled", function() {
     { elements: [elementWithOpacity], result: axs.constants.AuditResult.FAIL }
   );
 });
+
+test("Uses tolerance value", function() {
+  var fixture = document.getElementById('qunit-fixture');
+  var div = document.createElement('div');
+  div.style.backgroundColor = 'white';
+  div.style.color = '#777'; // Contrast ratio = 4.48
+  div.textContent = 'Some text';
+  fixture.appendChild(div);
+  deepEqual(
+    axs.AuditRules.getRule('lowContrastElements').run([], fixture),
+    { elements: [], result: axs.constants.AuditResult.PASS }
+  );
+});