diff --git a/packages/ui/src/colors.ts b/packages/ui/src/colors.ts
index 260764989d..320f5e2ba2 100644
--- a/packages/ui/src/colors.ts
+++ b/packages/ui/src/colors.ts
@@ -13,6 +13,7 @@ export interface ColorDefinition {
   name: string
   color: string
   icon?: string
+  iconText?: string
   title?: string
   number?: string
   background?: string
@@ -50,13 +51,14 @@ const defineAvatarColor = (
   dark: boolean = false
 ): ColorDefinition => {
   const background = rgbToHex(hslToRgb(h / 360, s / 100, l / 100))
-  const icon: string | undefined = rgbToHex(hslToRgb(h / 360, 0.5, 0.6))
-  const title: string | undefined = rgbToHex(hslToRgb(h / 360, 0.9, 0.9))
+  const icon = rgbToHex(hslToRgb(h / 360, 0.5, 0.6))
+  const iconText = rgbToHex(hslToRgb(h / 360, 0.9, 0.9))
   return {
     name,
     color: background,
     icon,
-    title,
+    iconText,
+    title: undefined,
     number: undefined,
     background:
       gradient.length === 1
diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index b13c49df0c..2c8b2015c8 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/plugins/contact-resources/src/components/Avatar.svelte
@@ -107,7 +107,7 @@
   {:else if name && displayName && displayName !== ''}
     <div
       class="ava-text"
-      style:color={color ? color.title : 'var(--accented-button-color)'}
+      style:color={color ? color.iconText : 'var(--accented-button-color)'}
       data-name={displayName.toLocaleUpperCase()}
     />
   {:else}