diff --git a/libs/components/src/avatar/avatar.component.ts b/libs/components/src/avatar/avatar.component.ts
index ccf19408519..83acc13f697 100644
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@@ -242,11 +242,11 @@ export class AvatarComponent {
       return "tw-fill-fg-disabled";
     }
 
-    const customBg = this.customBackgroundColor();
     let textColor = "white";
+    const color = this.color();
 
-    if (customBg) {
-      textColor = Utils.pickTextColorBasedOnBgColor(customBg, 135, true);
+    if (this.usingCustomColor() && color) {
+      textColor = Utils.pickTextColorBasedOnBgColor(color, 135, true);
     }
 
     return textColor === "white" ? "tw-fill-fg-white" : "tw-fill-fg-black";
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index 672f512d143..c27c6f3275d 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -113,7 +113,7 @@ export const ContentSlots: Story = {
           <bit-avatar
             slot="start"
             text="Foo"
-            siez="large"
+            size="large"
           ></bit-avatar>
           foo&#64;bitwarden.com
           <ng-container slot="secondary">