diff --git a/change/@fluentui-web-components-9f8f5391-7aba-49f3-bc0f-c9b091260370.json b/change/@fluentui-web-components-9f8f5391-7aba-49f3-bc0f-c9b091260370.json
new file mode 100644
index 0000000000000..d7dcc89acde63
--- /dev/null
+++ b/change/@fluentui-web-components-9f8f5391-7aba-49f3-bc0f-c9b091260370.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update background to Canvas and color to CanvasText",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts
index 236bc4935db9d..93ffb76cd376a 100644
--- a/packages/web-components/src/design-system-provider/index.ts
+++ b/packages/web-components/src/design-system-provider/index.ts
@@ -115,9 +115,9 @@ const backgroundStyles = css`
   forcedColorsStylesheetBehavior(
     css`
       :host {
-        background-color: ${SystemColors.ButtonFace};
+        background-color: ${SystemColors.Canvas};
         box-shadow: 0 0 0 1px ${SystemColors.CanvasText};
-        color: ${SystemColors.ButtonText};
+        color: ${SystemColors.CanvasText};
       }
     `,
   ),