fix: color contrast fails for oklch and oklab with none

lib/checks/color/color-contrast-enhanced.json

@@ -44,7 +44,8 @@
         "equalRatio": "Element has a 1:1 contrast ratio with the background",
         "shortTextContent": "Element content is too short to determine if it is actual text content",
         "nonBmp": "Element content contains only non-text characters",
-        "pseudoContent": "Element's background color could not be determined due to a pseudo element"
+        "pseudoContent": "Element's background color could not be determined due to a pseudo element",
+        "colorParse": "Could not parse color string ${data.colorParse}"
       }
     }
   }

lib/checks/color/color-contrast-evaluate.js

@@ -122,12 +122,24 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
 
   // if fgColor or bgColor are missing, get more information.
   let missing;
+  let colorParse;
+
   if (bgColor === null) {
-    missing = incompleteData.get('bgColor');
+    if (incompleteData.get('colorParse')) {
+      missing = 'colorParse';
+      colorParse = incompleteData.get('colorParse');
+    } else {
+      missing = incompleteData.get('bgColor');
+    }
   } else if (!isValid) {
     missing = contrastContributor;
   }
 
+  if (fgColor === null && incompleteData.get('colorParse')) {
+    missing = 'colorParse';
+    colorParse = incompleteData.get('colorParse');
+  }
+
   const equalRatio = truncatedResult === 1;
   const shortTextContent = visibleText.length === 1;
   if (equalRatio) {
@@ -146,7 +158,8 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
     fontWeight: bold ? 'bold' : 'normal',
     messageKey: missing,
     expectedContrastRatio: expected + ':1',
-    shadowColor: shadowColor ? shadowColor.toHexString() : undefined
+    shadowColor: shadowColor ? shadowColor.toHexString() : undefined,
+    colorParse: colorParse
   });
 
   // We don't know, so we'll put it into Can't Tell

lib/checks/color/color-contrast.json

@@ -46,7 +46,8 @@
         "equalRatio": "Element has a 1:1 contrast ratio with the background",
         "shortTextContent": "Element content is too short to determine if it is actual text content",
         "nonBmp": "Element content contains only non-text characters",
-        "pseudoContent": "Element's background color could not be determined due to a pseudo element"
+        "pseudoContent": "Element's background color could not be determined due to a pseudo element",
+        "colorParse": "Could not parse color string ${data.colorParse}"
       }
     }
   }

lib/commons/color/color.js

@@ -172,7 +172,9 @@ export default class Color {
       // color.alpha is a Number object so convert it to a number
       this.alpha = +color.alpha;
     } catch {
-      throw new Error(`Unable to parse color "${colorString}"`);
+      throw new Error(`Unable to parse color "${colorString}"`, {
+        cause: { code: 'COLOR_STRING', value: colorString }
+      });
     }
 
     return this;

lib/commons/color/get-background-color.js

@@ -75,9 +75,17 @@ function _getBackgroundColor(elm, bgElms, shadowOutlineEmMax) {
     }
 
     // Get the background color
-    const bgColor = getOwnBackgroundColor(bgElmStyle);
-    if (bgColor.alpha === 0) {
-      continue;
+    let bgColor;
+    try {
+      bgColor = getOwnBackgroundColor(bgElmStyle);
+      if (bgColor.alpha === 0) {
+        continue;
+      }
+    } catch (error) {
+      if (error.cause) {
+        incompleteData.set('colorParse', error.cause.value);
+        return null;
+      }
     }
 
     // abort if a node is partially obscured and obscuring element has a background

lib/commons/color/get-foreground-color.js

@@ -32,16 +32,23 @@ export default function getForegroundColor(node, _, bgColor, options = {}) {
   ];
   let fgColors = [];
 
-  for (const colorFn of colorStack) {
-    const color = colorFn();
-    if (!color) {
-      continue;
-    }
+  try {
+    for (const colorFn of colorStack) {
+      const color = colorFn();
+      if (!color) {
+        continue;
+      }
 
-    fgColors = fgColors.concat(color);
+      fgColors = fgColors.concat(color);
 
-    if (color.alpha === 1) {
-      break;
+      if (color.alpha === 1) {
+        break;
+      }
+    }
+  } catch (error) {
+    if (error.cause) {
+      incompleteData.set('colorParse', error.cause.value);
+      return null;
     }
   }
 

locales/_template.json

@@ -628,7 +628,8 @@
         "equalRatio": "Element has a 1:1 contrast ratio with the background",
         "shortTextContent": "Element content is too short to determine if it is actual text content",
         "nonBmp": "Element content contains only non-text characters",
-        "pseudoContent": "Element's background color could not be determined due to a pseudo element"
+        "pseudoContent": "Element's background color could not be determined due to a pseudo element",
+        "colorParse": "Could not parse color string ${data.colorParse}"
       }
     },
     "color-contrast": {
@@ -655,7 +656,8 @@
         "equalRatio": "Element has a 1:1 contrast ratio with the background",
         "shortTextContent": "Element content is too short to determine if it is actual text content",
         "nonBmp": "Element content contains only non-text characters",
-        "pseudoContent": "Element's background color could not be determined due to a pseudo element"
+        "pseudoContent": "Element's background color could not be determined due to a pseudo element",
+        "colorParse": "Could not parse color string ${data.colorParse}"
       }
     },
     "link-in-text-block-style": {

test/checks/color/color-contrast.js

@@ -15,6 +15,45 @@ describe('color-contrast', function () {
     axe._tree = undefined;
   });
 
+  it('should return undefined if cannot handle color', function () {
+    var params = checkSetup(
+      '<div id="divundertest" style="color: oklch(0.961073 0.000047911 none / 0.2); background-color: black; font-size: 14pt; font-weight: 900;">' +
+        '<span id="target" style="font-weight:lighter;">My text</span></div>'
+    );
+
+    var expectedRelatedNodes = fixture.querySelector('#divundertest');
+    assert.isUndefined(contrastEvaluate.apply(checkContext, params));
+    assert.deepEqual(checkContext._relatedNodes, [expectedRelatedNodes]);
+    assert.deepEqual(checkContext._data.messageKey, 'colorParse');
+    assert.equal(
+      checkContext._data.colorParse,
+      'oklch(0.961073 0.000047911 none / 0.2)'
+    );
+  });
+
+  it('should should return undefined if cannot handle backgroundcolor', function () {
+    var params = checkSetup(
+      '<div style="color: gray; background-color: oklch(0.961073 0.000047911 none / 0.2); font-size: 14pt; font-weight: 900;">' +
+        '<span id="target" style="font-weight:lighter;">My text</span></div>'
+    );
+    assert.isUndefined(contrastEvaluate.apply(checkContext, params));
+    assert.deepEqual(checkContext._relatedNodes, []);
+    assert.deepEqual(checkContext._data.messageKey, 'colorParse');
+    assert.equal(
+      checkContext._data.colorParse,
+      'oklch(0.961073 0.000047911 none / 0.2)'
+    );
+  });
+
+  it('should should return undefined if cannot handle text-shadow', function () {
+    var params = checkSetup(
+      '<div id="target" style="background-color: #fff; color:#000; text-shadow: 1px 1px oklch(0.961073 0.000047911 none / 0.2);">My text</div>'
+    );
+
+    assert.isUndefined(contrastEvaluate.apply(checkContext, params));
+    assert.deepEqual(checkContext._relatedNodes, []);
+  });
+
   it('should return true for hidden element', function () {
     var params = checkSetup(
       '<div style="color: gray; background-color: white; font-size: 14pt; font-weight: 100;">' +