[Lens][Accessibility] Take into account background color for non opaq…

…ue colors (elastic#107877) (elastic#108011)

* 🐛 Take into account also background color if opaque

* ✅ Add tests for opaque colors

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>

x-pack/plugins/lens/public/shared_components/coloring/utils.test.ts

@@ -405,4 +405,15 @@ describe('getContrastColor', () => {
     expect(getContrastColor('#fff', true)).toBe('#000000');
     expect(getContrastColor('#fff', false)).toBe('#000000');
   });
+
+  it('should take into account background color if the primary color is opaque', () => {
+    expect(getContrastColor('rgba(0,0,0,0)', true)).toBe('#ffffff');
+    expect(getContrastColor('rgba(0,0,0,0)', false)).toBe('#000000');
+    expect(getContrastColor('#00000000', true)).toBe('#ffffff');
+    expect(getContrastColor('#00000000', false)).toBe('#000000');
+    expect(getContrastColor('#ffffff00', true)).toBe('#ffffff');
+    expect(getContrastColor('#ffffff00', false)).toBe('#000000');
+    expect(getContrastColor('rgba(255,255,255,0)', true)).toBe('#ffffff');
+    expect(getContrastColor('rgba(255,255,255,0)', false)).toBe('#000000');
+  });
 });

x-pack/plugins/lens/public/shared_components/coloring/utils.ts

@@ -294,7 +294,12 @@ export function getColorStops(
 export function getContrastColor(color: string, isDarkTheme: boolean) {
   const darkColor = isDarkTheme ? euiDarkVars.euiColorInk : euiLightVars.euiColorInk;
   const lightColor = isDarkTheme ? euiDarkVars.euiColorGhost : euiLightVars.euiColorGhost;
-  return isColorDark(...chroma(color).rgb()) ? lightColor : darkColor;
+  const backgroundColor = isDarkTheme
+    ? euiDarkVars.euiPageBackgroundColor
+    : euiLightVars.euiPageBackgroundColor;
+  const finalColor =
+    chroma(color).alpha() < 1 ? chroma.blend(backgroundColor, color, 'overlay') : chroma(color);
+  return isColorDark(...finalColor.rgb()) ? lightColor : darkColor;
 }
 
 /**