diff --git a/change/@fluentui-web-components-66b00aa4-efa9-4c0c-8681-017ee0b3035d.json b/change/@fluentui-web-components-66b00aa4-efa9-4c0c-8681-017ee0b3035d.json
new file mode 100644
index 0000000000000..cd61ee5b6168a
--- /dev/null
+++ b/change/@fluentui-web-components-66b00aa4-efa9-4c0c-8681-017ee0b3035d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "ensure card foreground color responds to fill color changes",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
index 61481a2420fe2..7d88c014ff247 100644
--- a/packages/web-components/src/card/card.styles.ts
+++ b/packages/web-components/src/card/card.styles.ts
@@ -7,7 +7,7 @@ import {
 } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevation } from '../styles';
-import { fillColor, layerCornerRadius } from '../design-tokens';
+import { fillColor, layerCornerRadius, neutralForegroundRest } from '../design-tokens';
 
 export const cardStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles =
   (context: ElementDefinitionContext, definition: FoundationElementDefinition) =>
@@ -20,6 +20,7 @@ export const cardStyles: (context: ElementDefinitionContext, definition: Foundat
         width: var(--card-width, 100%);
         box-sizing: border-box;
         background: ${fillColor};
+        color: ${neutralForegroundRest}
         border-radius: calc(${layerCornerRadius} * 1px);
         ${elevation}
       }