fix: color contrast fix

elastic · Aug 30, 2021 · 2eaa8e6 · 2eaa8e6
1 parent c99ae8f
commit 2eaa8e6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/...all-stories-heatmap-alpha-text-color-contrast-visually-looks-correct-1-snap.png b/...all-stories-heatmap-alpha-text-color-contrast-visually-looks-correct-1-snap.png
diff --git a/packages/charts/src/common/color_calcs.ts b/packages/charts/src/common/color_calcs.ts
@@ -100,6 +100,7 @@ export function makeHighContrastColor(foreground: Color, background: Color, rati
   // determine the lightness factor of the background color to determine whether to lighten or darken the foreground
   const lightness = chroma(background).get('hsl.l');
   let highContrastTextColor = foreground;
+  const originalhighContrastTextColor = foreground;
   const isBackgroundDark = colorIsDark(background);
   // determine whether white or black text is ideal contrast vs a grey that just passes the ratio
   if (isBackgroundDark && chroma.deltaE('black', foreground) === 0) {
@@ -117,9 +118,14 @@ export function makeHighContrastColor(foreground: Color, background: Color, rati
     const scaledOldContrast = Math.round(contrast * precision) / precision;
     contrast = getContrast(highContrastTextColor, background);
     const scaledContrast = Math.round(contrast * precision) / precision;
-    // catch if the ideal contrast may not be possible
+    // catch if the ideal contrast may not be possible, switch to the other extreme color contrast
     if (scaledOldContrast === scaledContrast) {
-      break;
+      const contrastColor =
+        originalhighContrastTextColor === 'rgba(255, 255, 255, 1)' || originalhighContrastTextColor === '#fff'
+          ? '#000'
+          : '#fff';
+      // make sure the new text color hits the ratio, if not, then return the scaledContrast since we tried earlier
+      return getContrast(contrastColor, background) > ratio ? contrastColor : scaledContrast.toString();
     }
   }
   return highContrastTextColor.toString();