Fix suggest color for certain color combinations

Some color combinations with low contrast cannot be fixed by changing
the luminance alone. This CL adds searching for a color with a different
saturation if the luminance search didn't yield results.

Fixed: 1120223
Change-Id: I114d0ba7a2941958a1fdab051661b13dd1112e59
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2367935
Reviewed-by: Mathias Bynens <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/common/Color.js

@@ -460,12 +460,18 @@ export class Color {
 
     const desiredLuminance = Color.desiredLuminance(bgLuminance, requiredContrast, fgIsLighter);
 
+    const saturationComponentIndex = 1;
     const valueComponentIndex = 2;
 
     if (Color.approachColorValue(candidateHSVA, bgRGBA, valueComponentIndex, desiredLuminance)) {
       return Color.fromHSVA(candidateHSVA);
     }
 
+    candidateHSVA[valueComponentIndex] = 1;
+    if (Color.approachColorValue(candidateHSVA, bgRGBA, saturationComponentIndex, desiredLuminance)) {
+      return Color.fromHSVA(candidateHSVA);
+    }
+
     return null;
   }
 

test/unittests/front_end/common/Color_test.ts

@@ -309,6 +309,12 @@ describe('Color', () => {
         contrast: 7.05,
         result: 'hsl(120deg 100% 20%)',
       },
+      {
+        bgColor: 'black',
+        fgColor: '#b114ff',
+        contrast: 7.05,
+        result: 'hsl(280deg 100% 71%)',
+      },
     ];
     for (const {fgColor, bgColor, contrast, result} of colors) {
       const suggestedColor =