fix(color-contrast): check bg on fg contrast for thin text-shadows (#…

…3350) * fix(color-contrast): check bg on fg contrast for thin text-shadows * fix color-contrast fail7
dequelabs · Jan 14, 2022 · d92a7e5 · d92a7e5
1 parent fb5d990
commit d92a7e5
Show file tree

Hide file tree

Showing 6 changed files with 598 additions and 328 deletions.
diff --git a/lib/checks/color/color-contrast-evaluate.js b/lib/checks/color/color-contrast-evaluate.js
@@ -71,14 +71,16 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
   if (shadowColors.length === 0) {
     contrast = getContrast(bgColor, fgColor);
   } else if (fgColor && bgColor) {
-    // Thin shadows can pass either by contrasting with the text color
-    // or when contrasting with the background.
     shadowColor = [...shadowColors, bgColor].reduce(flattenShadowColors);
-    const bgContrast = getContrast(bgColor, shadowColor);
-    const fgContrast = getContrast(shadowColor, fgColor);
-    contrast = Math.max(bgContrast, fgContrast);
-    contrastContributor =
-      bgContrast > fgContrast ? 'shadowOnBgColor' : 'fgOnShadowColor';
+    // Compare shadow, bgColor, textColor. Check passes if any is sufficient
+    const fgBgContrast = getContrast(bgColor, fgColor);
+    const bgShContrast = getContrast(bgColor, shadowColor);
+    const fgShContrast = getContrast(shadowColor, fgColor);
+    contrast = Math.max(fgBgContrast, bgShContrast, fgShContrast);
+    if (contrast !== fgBgContrast) {
+      contrastContributor =
+        bgShContrast > fgShContrast ? 'shadowOnBgColor' : 'fgOnShadowColor';
+    }
   }
 
   const ptSize = Math.ceil(fontSize * 72) / 96;

diff --git a/lib/checks/color/color-contrast.json b/lib/checks/color/color-contrast.json
@@ -17,7 +17,7 @@
       }
     },
     "pseudoSizeThreshold": 0.25,
-    "shadowOutlineEmMax": 0.1
+    "shadowOutlineEmMax": 0.2
   },
   "metadata": {
     "impact": "serious",

diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
@@ -794,21 +794,21 @@ describe('color-contrast', function() {
     });
   });
 
-  describe('with shadowDOM', function() {
-    (shadowSupported ? it : xit)(
-      'returns colors across Shadow DOM boundaries',
-      function() {
-        var params = shadowCheckSetup(
-          '<div id="container" style="background-color:black;"></div>',
-          '<p style="color: #333;" id="target">Text</p>'
-        );
-        var container = fixture.querySelector('#container');
-        var result = contrastEvaluate.apply(checkContext, params);
-        assert.isFalse(result);
-        assert.deepEqual(checkContext._relatedNodes, [container]);
-      }
-    );
+  (shadowSupported ? it : xit)(
+    'returns colors across Shadow DOM boundaries',
+    function() {
+      var params = shadowCheckSetup(
+        '<div id="container" style="background-color:black;"></div>',
+        '<p style="color: #333;" id="target">Text</p>'
+      );
+      var container = fixture.querySelector('#container');
+      var result = contrastEvaluate.apply(checkContext, params);
+      assert.isFalse(result);
+      assert.deepEqual(checkContext._relatedNodes, [container]);
+    }
+  );
 
+  describe('with text-shadow', function() {
     it('passes if thin text shadows have sufficient contrast with the text', function() {
       var params = checkSetup(
         '<div id="target" style="background-color: #666; color:#aaa; ' +
@@ -866,7 +866,7 @@ describe('color-contrast', function() {
           '</div>'
       );
       assert.isFalse(contrastEvaluate.apply(checkContext, params));
-      assert.equal(checkContext._data.messageKey, 'fgOnShadowColor');
+      assert.isNull(checkContext._data.messageKey);
     });
 
     it('fails if text shadows do not have sufficient contrast with the background', function() {
@@ -879,5 +879,25 @@ describe('color-contrast', function() {
       assert.isFalse(contrastEvaluate.apply(checkContext, params));
       assert.equal(checkContext._data.messageKey, 'shadowOnBgColor');
     });
+
+    it('fails if thick text shadows don\'t have sufficient contrast', function() {
+      var params = checkSetup(
+        '<div id="target" style="background-color: #aaa; color:#666; ' +
+          'text-shadow: 0 0 0.09em #000, 0 0 0.09em #000, 0 0 0.09em #000;">' +
+          '  Hello world' +
+          '</div>'
+      );
+      assert.isTrue(contrastEvaluate.apply(checkContext, params));
+    });
+
+    it('passes if thin text shadows don\'t have sufficient contrast, but the text and background do', function() {
+      var params = checkSetup(
+        '<div id="target" style="background-color: #aaa; color:#666; ' +
+          'text-shadow: 0 0 0.09em #000, 0 0 0.09em #000, 0 0 0.09em #000;">' +
+          '  Hello world' +
+          '</div>'
+      );
+      assert.isTrue(contrastEvaluate.apply(checkContext, params));
+    });
   });
 });
diff --git a/test/integration/rules/color-contrast/color-contrast.html b/test/integration/rules/color-contrast/color-contrast.html
@@ -65,7 +65,7 @@
 
 <div
   id="fail7"
-  style="color: #000; background: #777; text-shadow: black 0 0 3px"
+  style="color: #000; background: #777; text-shadow: black 0 0 .2em"
 >
   Hello world
 </div>