diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index cfd9011d9..61ca742ac 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -1,8 +1,9 @@
-import { getLuminance } from 'color2k'
+import { getLuminance, lighten, toHsla } from 'color2k'
 import { useRouter } from 'next/router'
 import { Button } from './Button'
 import { SpanBox } from './LayoutPrimitives'
 import { isDarkTheme } from '../../lib/themeUpdater'
+
 type LabelChipProps = {
   text: string
   color: string // expected to be a RGB hex color string
@@ -21,7 +22,13 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
   }
   const isDarkMode = isDarkTheme()
   const luminance = getLuminance(props.color)
+  const lightenColor = lighten(props.color, 0.5)
   const color = hexToRgb(props.color)
+  const darkThemeTextColor =
+    luminance > 0.4
+      ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
+      : lightenColor
+  const lightThemeTextColor = luminance > 0.5 ? '#000000' : '#ffffff'
   return (
     <Button
       style="plainIcon"
@@ -35,11 +42,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
           display: 'inline-table',
           margin: '4px',
           borderRadius: '32px',
-          color: isDarkMode
-            ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
-            : luminance > 0.5
-            ? '#000000'
-            : '#ffffff',
+          color: isDarkMode ? darkThemeTextColor : lightThemeTextColor,
           fontSize: '12px',
           fontWeight: 'bold',
           padding: '2px 5px 2px 5px',