diff --git a/change/@fluentui-react-tags-preview-ab59afeb-97d0-4574-b3c5-ba25a5a36ad0.json b/change/@fluentui-react-tags-preview-ab59afeb-97d0-4574-b3c5-ba25a5a36ad0.json
new file mode 100644
index 0000000000000..2f97e76d107fa
--- /dev/null
+++ b/change/@fluentui-react-tags-preview-ab59afeb-97d0-4574-b3c5-ba25a5a36ad0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add style for windows high contrast",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
index d4bed543083aa..76215b496c8e1 100644
--- a/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
+++ b/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
@@ -43,6 +43,16 @@ const useRootBaseClassName = makeResetStyles({
     ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
     zIndex: 1,
   }),
+
+  // windows high contrast:
+  '@media (forced-colors: active)': {
+    ':hover': {
+      backgroundColor: 'HighlightText',
+    },
+    ':active': {
+      backgroundColor: 'HighlightText',
+    },
+  },
 });
 
 const useRootStyles = makeStyles({
diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts
index bfcf73932a4ff..23f0807d515ff 100644
--- a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts
+++ b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts
@@ -34,6 +34,16 @@ const useRootBaseClassName = makeResetStyles({
   borderLeftColor: tokens.colorNeutralStroke1,
   borderTopLeftRadius: tokens.borderRadiusNone,
   borderBottomLeftRadius: tokens.borderRadiusNone,
+
+  // windows high contrast:
+  '@media (forced-colors: active)': {
+    ':hover': {
+      backgroundColor: 'HighlightText',
+    },
+    ':active': {
+      backgroundColor: 'HighlightText',
+    },
+  },
 });
 
 const useRootStyles = makeStyles({
diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts
index 4f3f93469225d..248a0188811fb 100644
--- a/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts
+++ b/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts
@@ -180,6 +180,16 @@ const useDismissIconStyles = makeStyles({
   base: {
     ...shorthands.gridArea('dismissIcon'),
     display: 'flex',
+
+    // windows high contrast:
+    '@media (forced-colors: active)': {
+      ':hover': {
+        color: 'Highlight',
+      },
+      ':active': {
+        color: 'Highlight',
+      },
+    },
   },
   medium: {
     paddingLeft: tokens.spacingHorizontalXS,