diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index 88f0dc2e295..d5896cbac07 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2';
 import { formattedValueToString, DisplayValue, FieldConfig, FieldType, VizOrientation } from '@grafana/data';
 import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema';
 
-import { getTextColorForBackground } from '../../utils';
+import { getTextColorForAlphaBackground } from '../../utils';
 import { calculateFontSize } from '../../utils/measureText';
 import { Sparkline } from '../Sparkline/Sparkline';
 
@@ -67,7 +67,7 @@ export abstract class BigValueLayout {
     }
 
     if (this.props.colorMode === BigValueColorMode.Background) {
-      styles.color = getTextColorForBackground(this.valueColor);
+      styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
     }
 
     return styles;
@@ -91,7 +91,7 @@ export abstract class BigValueLayout {
         styles.color = this.valueColor;
         break;
       case BigValueColorMode.Background:
-        styles.color = getTextColorForBackground(this.valueColor);
+        styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
         break;
       case BigValueColorMode.None:
         styles.color = this.props.theme.colors.text.primary;
diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
index 1e07b477c83..1a5139e79b7 100644
--- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx
+++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2';
 
 import { DisplayValue, Field, formattedValueToString } from '@grafana/data';
 
-import { getTextColorForBackground, getCellLinks } from '../../utils';
+import { getCellLinks, getTextColorForAlphaBackground } from '../../utils';
 import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
 
 import { CellActions } from './CellActions';
@@ -63,7 +63,7 @@ function getCellStyle(
 
   if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackgroundSolid) {
     const bgColor = tinycolor(displayValue.color);
-    const textColor = getTextColorForBackground(displayValue.color!);
+    const textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
     return tableStyles.buildCellContainerStyle(textColor, bgColor.toRgbString(), !disableOverflowOnHover);
   }
 
@@ -74,7 +74,7 @@ function getCellStyle(
       .spin(5)
       .toRgbString();
 
-    const textColor = getTextColorForBackground(displayValue.color!);
+    const textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
 
     return tableStyles.buildCellContainerStyle(
       textColor,
diff --git a/packages/grafana-ui/src/utils/colors.ts b/packages/grafana-ui/src/utils/colors.ts
index 101d8810fce..df1f8e03cd0 100644
--- a/packages/grafana-ui/src/utils/colors.ts
+++ b/packages/grafana-ui/src/utils/colors.ts
@@ -114,6 +114,19 @@ function hslToHex(color: tinycolor.ColorFormats.HSLA) {
 
 export function getTextColorForBackground(color: string) {
   const b = tinycolor(color).getBrightness();
+
+  return b > 180 ? 'rgb(32, 34, 38)' : 'rgb(247, 248, 250)';
+}
+
+export function getTextColorForAlphaBackground(color: string, themeIsDark: boolean) {
+  const tcolor = tinycolor(color);
+  const b = tcolor.getBrightness();
+  const a = tcolor.getAlpha();
+
+  if (a < 0.3) {
+    return themeIsDark ? 'rgb(247, 248, 250)' : 'rgb(32, 34, 38)';
+  }
+
   return b > 180 ? 'rgb(32, 34, 38)' : 'rgb(247, 248, 250)';
 }