diff --git a/change/office-ui-fabric-react-2020-08-05-15-38-44-a11y-spinner.json b/change/office-ui-fabric-react-2020-08-05-15-38-44-a11y-spinner.json
new file mode 100644
index 0000000000000..1cb35be96fa79
--- /dev/null
+++ b/change/office-ui-fabric-react-2020-08-05-15-38-44-a11y-spinner.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Spinner: Fix HC styling of spinner componet to show highlight color",
+  "packageName": "office-ui-fabric-react",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-05T22:38:43.868Z"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx
index 96d9b1e493dad..3dfa00c8c6b4e 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx
@@ -1,5 +1,11 @@
 import { ISpinnerStyleProps, ISpinnerStyles, SpinnerSize } from './Spinner.types';
-import { hiddenContentStyle, keyframes, HighContrastSelector, getGlobalClassNames } from '../../Styling';
+import {
+  hiddenContentStyle,
+  keyframes,
+  HighContrastSelector,
+  getGlobalClassNames,
+  getEdgeChromiumNoHighContrastAdjustSelector,
+} from '../../Styling';
 import { memoizeFunction } from '../../Utilities';
 
 const GlobalClassNames = {
@@ -61,6 +67,7 @@ export const getStyles = (props: ISpinnerStyleProps): ISpinnerStyles => {
           [HighContrastSelector]: {
             borderTopColor: 'Highlight',
           },
+          ...getEdgeChromiumNoHighContrastAdjustSelector(),
         },
       },
       size === SpinnerSize.xSmall && [
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
index 5eed7dd20c863..4d3998c8e4369 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -30,6 +30,9 @@ exports[`Spinner renders Spinner correctly 1`] = `
         @media screen and (-ms-high-contrast: active){& {
           border-top-color: Highlight;
         }
+        @media screen and (forced-colors: active){& {
+          forced-color-adjust: none;
+        }
   />
   <div
     className=
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Basic.Example.tsx.shot
index 14ea2a91e4dc0..1efdbba6754a1 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Basic.Example.tsx.shot
@@ -100,6 +100,9 @@ exports[`Component Examples renders Spinner.Basic.Example.tsx correctly 1`] = `
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
     </div>
   </div>
@@ -181,6 +184,9 @@ exports[`Component Examples renders Spinner.Basic.Example.tsx correctly 1`] = `
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
     </div>
   </div>
@@ -262,6 +268,9 @@ exports[`Component Examples renders Spinner.Basic.Example.tsx correctly 1`] = `
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
     </div>
   </div>
@@ -343,6 +352,9 @@ exports[`Component Examples renders Spinner.Basic.Example.tsx correctly 1`] = `
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
     </div>
   </div>
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Labeled.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Labeled.Example.tsx.shot
index 90d7939e80576..a4787338de9ad 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Labeled.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Labeled.Example.tsx.shot
@@ -80,6 +80,9 @@ exports[`Component Examples renders Spinner.Labeled.Example.tsx correctly 1`] =
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
       <div
         className=
@@ -159,6 +162,9 @@ exports[`Component Examples renders Spinner.Labeled.Example.tsx correctly 1`] =
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
       <div
         className=
@@ -238,6 +244,9 @@ exports[`Component Examples renders Spinner.Labeled.Example.tsx correctly 1`] =
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
       <div
         className=
@@ -317,6 +326,9 @@ exports[`Component Examples renders Spinner.Labeled.Example.tsx correctly 1`] =
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
       <div
         className=