diff --git a/change/@fluentui-web-components-d6611ae4-5fa9-4379-890a-1de594a175aa.json b/change/@fluentui-web-components-d6611ae4-5fa9-4379-890a-1de594a175aa.json
new file mode 100644
index 0000000000000..8bde56cf5f9bf
--- /dev/null
+++ b/change/@fluentui-web-components-d6611ae4-5fa9-4379-890a-1de594a175aa.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updated the neutral fill card color recipe to always be lighter or equal to the container, instead of flipping to go darker over white.",
+  "packageName": "@fluentui/web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/color/neutral-fill-card.spec.ts b/packages/web-components/src/color/neutral-fill-card.spec.ts
index f51f4f86839af..3f7a826ffc5aa 100644
--- a/packages/web-components/src/color/neutral-fill-card.spec.ts
+++ b/packages/web-components/src/color/neutral-fill-card.spec.ts
@@ -5,10 +5,10 @@ import { neutralFillCard } from "./neutral-fill-card";
 describe("neutralFillCard", (): void => {
     it("should operate on design system defaults", (): void => {
         expect(neutralFillCard({} as DesignSystem)).to.equal(
-            DesignSystemDefaults.neutralPalette[DesignSystemDefaults.neutralFillCardDelta]
+            DesignSystemDefaults.neutralPalette[0]
         );
     });
-    it("should get darker when the index of the backgroundColor is lower than the offset index", (): void => {
+    it("should stay white when the index of the backgroundColor is lower than the offset index", (): void => {
         for (let i: number = 0; i < DesignSystemDefaults.neutralFillCardDelta; i++) {
             expect(
                 DesignSystemDefaults.neutralPalette.indexOf(
@@ -18,7 +18,7 @@ describe("neutralFillCard", (): void => {
                         })
                     )
                 )
-            ).to.equal(DesignSystemDefaults.neutralFillCardDelta + i);
+            ).to.equal(0);
         }
     });
     it("should return the color at three steps lower than the background color", (): void => {
diff --git a/packages/web-components/src/color/neutral-fill-card.ts b/packages/web-components/src/color/neutral-fill-card.ts
index 5424999257001..c4454294a03a3 100644
--- a/packages/web-components/src/color/neutral-fill-card.ts
+++ b/packages/web-components/src/color/neutral-fill-card.ts
@@ -5,7 +5,7 @@ import { findClosestSwatchIndex, getSwatch } from './palette';
 const neutralCardFillAlgorithm: SwatchResolver = (designSystem: DesignSystem): Swatch => {
   const offset: number = neutralFillCardDelta(designSystem);
   const index: number = findClosestSwatchIndex(neutralPalette, backgroundColor(designSystem))(designSystem);
-  return getSwatch(index - (index < offset ? offset * -1 : offset), neutralPalette(designSystem));
+  return getSwatch(index - offset, neutralPalette(designSystem));
 };
 
 /**