diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.png
new file mode 100644
index 00000000000..7681767b516
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.png
new file mode 100644
index 00000000000..14135b36204
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.png differ
diff --git a/packages/eui/src/components/beacon/beacon.styles.ts b/packages/eui/src/components/beacon/beacon.styles.ts
index 1a9c03a17e8..c8b717ce9ed 100644
--- a/packages/eui/src/components/beacon/beacon.styles.ts
+++ b/packages/eui/src/components/beacon/beacon.styles.ts
@@ -13,6 +13,7 @@ import {
   logicalCSS,
   logicalSizeCSS,
 } from '../../global_styling';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 
 const _colorCSS = (color: string) => {
   return `
@@ -56,48 +57,58 @@ const euiBeaconPulseSmall = keyframes`
   }
 `;
 
-export const euiBeaconStyles = ({ euiTheme }: UseEuiTheme) => ({
-  // Base
-  euiBeacon: css`
-    position: relative;
-    border-radius: 50%;
+export const euiBeaconStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    // Base
+    euiBeacon: css`
+      position: relative;
+      display: flex;
+      justify-content: center;
+      border-radius: 50%;
+      ${preventForcedColors(euiThemeContext)}
+
+      svg {
+        ${logicalSizeCSS('100%')}
+      }
 
-    &::before,
-    &::after {
-      position: absolute;
-      content: '';
-      ${logicalSizeCSS('100%', '100%')}
-      ${logicalCSS('left', 0)}
+      &::before,
+      &::after {
+        position: absolute;
+        content: '';
+        ${logicalSizeCSS('100%')}
+        ${logicalCSS('left', 0)}
       ${logicalCSS('top', 0)}
       background-color: transparent;
-      border-radius: 50%;
-    }
+        border-radius: 50%;
+      }
 
-    /* Without the animation, we only display one ring around the circle
+      /* Without the animation, we only display one ring around the circle
        If the animation is allowed the transform and opacity are overriden */
-    &::before {
-      transform: scale(1.6);
-      opacity: 0.4;
-    }
-
-    &::after {
-      opacity: 0;
-    }
-
-    ${euiCanAnimate} {
       &::before {
-        animation: ${euiBeaconPulseLarge} 2.5s infinite ease-out;
+        transform: scale(1.6);
+        opacity: 0.4;
       }
 
       &::after {
-        animation: ${euiBeaconPulseSmall} 2.5s infinite ease-out 0.25s;
+        opacity: 0;
       }
-    }
-  `,
-  subdued: css(_colorCSS(euiTheme.colors.subduedText)),
-  primary: css(_colorCSS(euiTheme.colors.primary)),
-  success: css(_colorCSS(euiTheme.colors.success)),
-  warning: css(_colorCSS(euiTheme.colors.warning)),
-  danger: css(_colorCSS(euiTheme.colors.danger)),
-  accent: css(_colorCSS(euiTheme.colors.accent)),
-});
+
+      ${euiCanAnimate} {
+        &::before {
+          animation: ${euiBeaconPulseLarge} 2.5s infinite ease-out;
+        }
+
+        &::after {
+          animation: ${euiBeaconPulseSmall} 2.5s infinite ease-out 0.25s;
+        }
+      }
+    `,
+    subdued: css(_colorCSS(euiTheme.colors.subduedText)),
+    primary: css(_colorCSS(euiTheme.colors.primary)),
+    success: css(_colorCSS(euiTheme.colors.success)),
+    warning: css(_colorCSS(euiTheme.colors.warning)),
+    danger: css(_colorCSS(euiTheme.colors.danger)),
+    accent: css(_colorCSS(euiTheme.colors.accent)),
+  };
+};
diff --git a/packages/eui/src/components/loading/loading_chart.styles.ts b/packages/eui/src/components/loading/loading_chart.styles.ts
index d179393d20f..aa3620b5460 100644
--- a/packages/eui/src/components/loading/loading_chart.styles.ts
+++ b/packages/eui/src/components/loading/loading_chart.styles.ts
@@ -13,6 +13,7 @@ import {
   euiCantAnimate,
   logicalCSS,
 } from '../../global_styling';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 
 const nonMonoColors = euiPaletteColorBlind();
 
@@ -37,49 +38,60 @@ export const euiLoadingChartStyles = ({ euiTheme }: UseEuiTheme) => ({
 
 export const BARS_COUNT = 4;
 
-export const euiLoadingChartBarStyles = ({
-  euiTheme,
-  colorMode,
-}: UseEuiTheme) => ({
-  euiLoadingChart__bar: css`
-    ${logicalCSS('height', '100%')}
-    display: inline-block;
+export const euiLoadingChartBarStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, colorMode, highContrastMode } = euiThemeContext;
+  return {
+    euiLoadingChart__bar: css`
+      ${logicalCSS('height', '100%')}
+      display: inline-block;
+      ${preventForcedColors(euiThemeContext)}
 
-    ${euiCanAnimate} {
-      animation: ${barAnimation} 1s infinite;
+      ${euiCanAnimate} {
+        animation: ${barAnimation} 1s infinite;
 
-      ${outputNthChildCss((index) => `animation-delay: 0.${index}s;`)}
-    }
-    ${euiCantAnimate} {
-      ${outputNthChildCss((index) => `transform: translateY(${22 * index}%);`)}
-    }
-  `,
-  nonmono: css`
-    ${outputNthChildCss((index) => `background-color: ${nonMonoColors[index]}`)}
-  `,
-  mono: css`
-    ${outputNthChildCss(
-      (index) =>
-        `background-color: ${shadeOrTint(
-          euiTheme.colors.lightShade,
-          index * 0.04,
-          colorMode
-        )}`
-    )}
-  `,
-  m: css`
-    ${logicalCSS('width', euiTheme.size.xxs)}
-    ${logicalCSS('margin-bottom', euiTheme.size.s)}
-  `,
-  l: css`
-    ${logicalCSS('width', euiTheme.size.xs)}
-    ${logicalCSS('margin-bottom', euiTheme.size.m)}
-  `,
-  xl: css`
-    ${logicalCSS('width', euiTheme.size.s)}
-    ${logicalCSS('margin-bottom', euiTheme.size.base)}
-  `,
-});
+        ${outputNthChildCss((index) => `animation-delay: 0.${index}s;`)}
+      }
+      ${euiCantAnimate} {
+        ${outputNthChildCss(
+          (index) => `transform: translateY(${22 * index}%);`
+        )}
+      }
+    `,
+    nonmono: css`
+      ${outputNthChildCss(
+        (index) => `background-color: ${nonMonoColors[index]}`
+      )}
+    `,
+    mono: css`
+      ${outputNthChildCss(
+        (index) =>
+          `background-color: ${
+            highContrastMode === 'forced'
+              ? euiTheme.colors.fullShade
+              : shadeOrTint(
+                  highContrastMode
+                    ? euiTheme.colors.darkShade
+                    : euiTheme.colors.lightShade,
+                  index * 0.04,
+                  colorMode
+                )
+          }`
+      )}
+    `,
+    m: css`
+      ${logicalCSS('width', euiTheme.size.xxs)}
+      ${logicalCSS('margin-bottom', euiTheme.size.s)}
+    `,
+    l: css`
+      ${logicalCSS('width', euiTheme.size.xs)}
+      ${logicalCSS('margin-bottom', euiTheme.size.m)}
+    `,
+    xl: css`
+      ${logicalCSS('width', euiTheme.size.s)}
+      ${logicalCSS('margin-bottom', euiTheme.size.base)}
+    `,
+  };
+};
 
 /**
  * Small utility helper for generating nth-child CSS for each bar
diff --git a/packages/eui/src/components/loading/loading_spinner.styles.ts b/packages/eui/src/components/loading/loading_spinner.styles.ts
index 8133e12ed76..f3f3bc30d58 100644
--- a/packages/eui/src/components/loading/loading_spinner.styles.ts
+++ b/packages/eui/src/components/loading/loading_spinner.styles.ts
@@ -13,6 +13,7 @@ import {
   logicalShorthandCSS,
   mathWithUnits,
 } from '../../global_styling';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 import {
   EuiLoadingSpinnerSize,
@@ -40,28 +41,41 @@ const spinnerSizes: {
 };
 
 export const euiSpinnerBorderColorsCSS = (
-  { euiTheme }: UseEuiTheme,
+  { euiTheme, highContrastMode }: UseEuiTheme,
   colors: EuiLoadingSpinnerColor = {}
 ): string => {
-  const {
+  let {
     border = euiTheme.colors.lightShade,
     highlight = euiTheme.colors.primary,
   } = colors;
+  if (highContrastMode === 'forced') {
+    border = euiTheme.colors.lightestShade;
+    highlight = euiTheme.colors.fullShade;
+  }
   return `${highlight} ${border} ${border} ${border}`;
 };
 
 export const euiLoadingSpinnerStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
+  const smallerBorderWidth = highContrastMode
+    ? euiTheme.border.width.thick
+    : mathWithUnits(euiTheme.border.width.thin, (x) => x * 1.5);
+  const largerBorderWidth = highContrastMode
+    ? mathWithUnits(euiTheme.border.thick, (x) => x * 2)
+    : euiTheme.border.width.thick;
+
   return {
     euiLoadingSpinner: css`
       flex-shrink: 0; /* Ensures it never scales down below its intended size */
       display: inline-block;
       border-radius: 50%;
-      border: ${euiTheme.border.thick};
+      border: ${largerBorderWidth} solid ${euiTheme.border.color};
       ${logicalShorthandCSS(
         'border-color',
         euiSpinnerBorderColorsCSS(euiThemeContext)
       )}
+      ${preventForcedColors(euiThemeContext)}
 
       ${euiCanAnimate} {
         animation: ${_loadingSpinner} 0.6s infinite linear;
@@ -74,20 +88,14 @@ export const euiLoadingSpinnerStyles = (euiThemeContext: UseEuiTheme) => {
         euiTheme.size[spinnerSizes.s],
         euiTheme.size[spinnerSizes.s]
       )}
-      border-width: ${mathWithUnits(
-        euiTheme.border.width.thin,
-        (x) => x * 1.5
-      )};
+      border-width: ${smallerBorderWidth};
     `,
     m: css`
       ${logicalSizeCSS(
         euiTheme.size[spinnerSizes.m],
         euiTheme.size[spinnerSizes.m]
       )}
-      border-width: ${mathWithUnits(
-        euiTheme.border.width.thin,
-        (x) => x * 1.5
-      )};
+      border-width: ${smallerBorderWidth};
     `,
     l: css`
       ${logicalSizeCSS(
diff --git a/packages/eui/src/components/progress/__snapshots__/progress.styles.test.ts.snap b/packages/eui/src/components/progress/__snapshots__/progress.styles.test.ts.snap
index 922f700d2e1..8e8d8b0c272 100644
--- a/packages/eui/src/components/progress/__snapshots__/progress.styles.test.ts.snap
+++ b/packages/eui/src/components/progress/__snapshots__/progress.styles.test.ts.snap
@@ -1,131 +1,99 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`euiProgressStyles indeterminate div CSS colors accent 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #F04E98;
-  }
-;;label:accent;"
+  };;label:accent;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors danger 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #BD271E;
-  }
-;;label:danger;"
+  };;label:danger;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors primary 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #07C;
-  }
-;;label:primary;"
+  };;label:primary;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors subdued 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #646a77;
-  }
-;;label:subdued;"
+  };;label:subdued;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors success 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #00BFB3;
-  }
-;;label:success;"
+  };;label:success;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis0 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #54B399;
-  }
-;;label:vis0;"
+  };;label:vis0;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis1 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #6092C0;
-  }
-;;label:vis1;"
+  };;label:vis1;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis2 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #D36086;
-  }
-;;label:vis2;"
+  };;label:vis2;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis3 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #9170B8;
-  }
-;;label:vis3;"
+  };;label:vis3;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis4 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #CA8EAE;
-  }
-;;label:vis4;"
+  };;label:vis4;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis5 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #D6BF57;
-  }
-;;label:vis5;"
+  };;label:vis5;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis6 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #B9A888;
-  }
-;;label:vis6;"
+  };;label:vis6;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis7 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #DA8B45;
-  }
-;;label:vis7;"
+  };;label:vis7;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis8 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #AA6556;
-  }
-;;label:vis8;"
+  };;label:vis8;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors vis9 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #E7664C;
-  }
-;;label:vis9;"
+  };;label:vis9;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS colors warning 1`] = `
-"
-  &::before {
+"&::before {
     background-color: #FEC514;
-  }
-;;label:warning;"
+  };;label:warning;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS positions absolute 1`] = `
@@ -135,7 +103,7 @@ exports[`euiProgressStyles indeterminate div CSS positions absolute 1`] = `
   inset-inline-end: 0;
   background-color: transparent;
   
-;;label:absolute;"
+ border-start-start-radius: inherit; border-start-end-radius: inherit;;;label:absolute;"
 `;
 
 exports[`euiProgressStyles indeterminate div CSS positions fixed 1`] = `
@@ -151,179 +119,147 @@ exports[`euiProgressStyles indeterminate div CSS positions fixed 1`] = `
 exports[`euiProgressStyles indeterminate div CSS positions static 1`] = `"position:relative;label:static;"`;
 
 exports[`euiProgressStyles native progress CSS colors accent 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #F04E98;
   }
   &::-moz-progress-bar {
     background-color: #F04E98;
-  }
-;;label:accent;"
+  };;label:accent;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors danger 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #BD271E;
   }
   &::-moz-progress-bar {
     background-color: #BD271E;
-  }
-;;label:danger;"
+  };;label:danger;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors primary 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #07C;
   }
   &::-moz-progress-bar {
     background-color: #07C;
-  }
-;;label:primary;"
+  };;label:primary;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors subdued 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #646a77;
   }
   &::-moz-progress-bar {
     background-color: #646a77;
-  }
-;;label:subdued;"
+  };;label:subdued;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors success 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #00BFB3;
   }
   &::-moz-progress-bar {
     background-color: #00BFB3;
-  }
-;;label:success;"
+  };;label:success;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis0 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #54B399;
   }
   &::-moz-progress-bar {
     background-color: #54B399;
-  }
-;;label:vis0;"
+  };;label:vis0;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis1 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #6092C0;
   }
   &::-moz-progress-bar {
     background-color: #6092C0;
-  }
-;;label:vis1;"
+  };;label:vis1;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis2 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #D36086;
   }
   &::-moz-progress-bar {
     background-color: #D36086;
-  }
-;;label:vis2;"
+  };;label:vis2;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis3 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #9170B8;
   }
   &::-moz-progress-bar {
     background-color: #9170B8;
-  }
-;;label:vis3;"
+  };;label:vis3;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis4 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #CA8EAE;
   }
   &::-moz-progress-bar {
     background-color: #CA8EAE;
-  }
-;;label:vis4;"
+  };;label:vis4;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis5 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #D6BF57;
   }
   &::-moz-progress-bar {
     background-color: #D6BF57;
-  }
-;;label:vis5;"
+  };;label:vis5;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis6 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #B9A888;
   }
   &::-moz-progress-bar {
     background-color: #B9A888;
-  }
-;;label:vis6;"
+  };;label:vis6;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis7 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #DA8B45;
   }
   &::-moz-progress-bar {
     background-color: #DA8B45;
-  }
-;;label:vis7;"
+  };;label:vis7;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis8 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #AA6556;
   }
   &::-moz-progress-bar {
     background-color: #AA6556;
-  }
-;;label:vis8;"
+  };;label:vis8;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors vis9 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #E7664C;
   }
   &::-moz-progress-bar {
     background-color: #E7664C;
-  }
-;;label:vis9;"
+  };;label:vis9;"
 `;
 
 exports[`euiProgressStyles native progress CSS colors warning 1`] = `
-"
-  &::-webkit-progress-value {
+"&::-webkit-progress-value {
     background-color: #FEC514;
   }
   &::-moz-progress-bar {
     background-color: #FEC514;
-  }
-;;label:warning;"
+  };;label:warning;"
 `;
 
 exports[`euiProgressStyles native progress CSS positions absolute 1`] = `
@@ -336,7 +272,7 @@ exports[`euiProgressStyles native progress CSS positions absolute 1`] = `
       &::-webkit-progress-bar {
         background-color: transparent;
       }
-;;label:absolute;"
+ border-start-start-radius: inherit; border-start-end-radius: inherit;;;label:absolute;"
 `;
 
 exports[`euiProgressStyles native progress CSS positions fixed 1`] = `
diff --git a/packages/eui/src/components/progress/progress.stories.tsx b/packages/eui/src/components/progress/progress.stories.tsx
index 13767bc80de..6cffb2f159b 100644
--- a/packages/eui/src/components/progress/progress.stories.tsx
+++ b/packages/eui/src/components/progress/progress.stories.tsx
@@ -44,3 +44,13 @@ export const Indeterminate: Story = {
     controls: { include: ['color', 'position', 'size', 'aria-label'] },
   },
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    ...Determinate.args,
+    size: 'xs',
+    color: 'primary',
+  },
+};
diff --git a/packages/eui/src/components/progress/progress.styles.ts b/packages/eui/src/components/progress/progress.styles.ts
index 8e073ffca89..4d7597f7ffc 100644
--- a/packages/eui/src/components/progress/progress.styles.ts
+++ b/packages/eui/src/components/progress/progress.styles.ts
@@ -15,6 +15,7 @@ import {
   euiFontSize,
   euiTextTruncate,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import {
   UseEuiTheme,
   euiPaletteColorBlind,
@@ -44,11 +45,22 @@ const indeterminateProgressValue = (cssProperties: string) => `
  */
 const visColors = euiPaletteColorBlind();
 
-const nativeVsIndeterminateColor = (color: string, isNative: boolean) => {
+const nativeVsIndeterminateColor = (
+  color: string,
+  isNative: boolean,
+  highContrastMode: UseEuiTheme['highContrastMode']
+) => {
   const selectors = isNative
     ? crossBrowserProgressValue
     : indeterminateProgressValue;
-  return selectors(`background-color: ${color};`);
+  return `
+    ${selectors(`background-color: ${color};`)}
+    ${
+      isNative && highContrastMode === 'preferred' // see highContrastModeStyles.preferred comment below
+        ? `border-color: ${color};`
+        : ''
+    }
+  `.trim();
 };
 
 /**
@@ -85,135 +97,211 @@ const euiIndeterminateAnimation = keyframes`
  * Emotion styles
  */
 export const euiProgressStyles = (
-  { euiTheme }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   isNative: boolean
-) => ({
-  euiProgress: css`
-    overflow: hidden;
-    background-color: ${euiTheme.colors.lightShade};
-  `,
-  // https://css-tricks.com/html5-progress-element/
-  // Good resource if you need to work in here. There's some gotchas with
-  // dealing with cross-browser progress bars.
-  native: css`
-    display: block;
-    ${logicalCSS('width', '100%')}
-    appearance: none;
-    border: none;
-    border-radius: ${euiTheme.size.s};
+) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+  const backgroundColor = highContrastMode
+    ? euiTheme.colors.emptyShade
+    : euiTheme.colors.lightShade;
 
-    &::-webkit-progress-bar {
-      background-color: ${euiTheme.colors.lightShade};
-    }
-
-    ${euiCanAnimate} {
-      /* Note: FF/Mozilla doesn't actually support animating the native progress bar
-        @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */
-      ${crossBrowserProgressValue(
-        `transition: width ${euiTheme.animation.normal} linear`
-      )}
-    }
-  `,
-  // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
-  // we apply this style to a <div> instead of a <progress> element.
-  // See https://css-tricks.com/html5-progress-element/ for more info.
-  indeterminate: css`
-    &::before {
-      position: absolute;
-      content: '';
+  return {
+    euiProgress: css`
+      overflow: hidden;
+      background-color: ${backgroundColor};
+    `,
+    // https://css-tricks.com/html5-progress-element/
+    // Good resource if you need to work in here. There's some gotchas with
+    // dealing with cross-browser progress bars.
+    native: css`
+      display: block;
       ${logicalCSS('width', '100%')}
-      ${logicalCSS('top', 0)}
-      ${logicalCSS('bottom', 0)}
-      ${logicalCSS('left', 0)}
-      transform: scaleX(0) translateX(0%);
-      animation: ${euiIndeterminateAnimation} 1s
-        ${euiTheme.animation.resistance} infinite;
 
-      ${euiCantAnimate} {
-        animation-duration: 2s;
-        animation-timing-function: linear;
+      &::-webkit-progress-bar {
+        background-color: ${backgroundColor};
       }
-    }
-  `,
-  // Sizes
-  xs: css`
-    ${logicalCSS('height', euiTheme.size.xxs)}
-  `,
-  s: css`
-    ${logicalCSS('height', euiTheme.size.xs)}
-  `,
-  m: css`
-    ${logicalCSS('height', euiTheme.size.s)}
-  `,
-  l: css`
-    ${logicalCSS('height', euiTheme.size.m)}
-  `,
-  // Positioning
-  fixed: css`
-    position: fixed;
-    z-index: ${Number(euiTheme.levels.header) + 1};
-    ${nonStaticPositioning(isNative)}
-  `,
-  absolute: css`
-    position: absolute;
-    ${nonStaticPositioning(isNative)}
-  `,
-  static: css`
-    position: relative;
-  `,
-  // Colors
-  primary: css`
-    ${nativeVsIndeterminateColor(euiTheme.colors.primary, isNative)}
-  `,
-  success: css`
-    ${nativeVsIndeterminateColor(euiTheme.colors.success, isNative)}
-  `,
-  warning: css`
-    ${nativeVsIndeterminateColor(euiTheme.colors.warning, isNative)}
-  `,
-  danger: css`
-    ${nativeVsIndeterminateColor(euiTheme.colors.danger, isNative)}
-  `,
-  subdued: css`
-    ${nativeVsIndeterminateColor(euiTheme.colors.subduedText, isNative)}
-  `,
-  accent: css`
-    ${nativeVsIndeterminateColor(euiTheme.colors.accent, isNative)}
-  `,
-  vis0: css`
-    ${nativeVsIndeterminateColor(visColors[0], isNative)}
-  `,
-  vis1: css`
-    ${nativeVsIndeterminateColor(visColors[1], isNative)}
-  `,
-  vis2: css`
-    ${nativeVsIndeterminateColor(visColors[2], isNative)}
-  `,
-  vis3: css`
-    ${nativeVsIndeterminateColor(visColors[3], isNative)}
-  `,
-  vis4: css`
-    ${nativeVsIndeterminateColor(visColors[4], isNative)}
-  `,
-  vis5: css`
-    ${nativeVsIndeterminateColor(visColors[5], isNative)}
-  `,
-  vis6: css`
-    ${nativeVsIndeterminateColor(visColors[6], isNative)}
-  `,
-  vis7: css`
-    ${nativeVsIndeterminateColor(visColors[7], isNative)}
-  `,
-  vis8: css`
-    ${nativeVsIndeterminateColor(visColors[8], isNative)}
-  `,
-  vis9: css`
-    ${nativeVsIndeterminateColor(visColors[9], isNative)}
-  `,
-  customColor: css`
-    ${nativeVsIndeterminateColor('currentColor', isNative)}
-  `,
-});
+
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          appearance: none;
+          border: none;
+          border-radius: ${euiTheme.size.s};
+        `,
+        // For some reason we absolutely cannot set any border CSS in Windows high contrast
+        // or the native element stops rendering. However, we do want the extra border for
+        // MacOS high contrast, so #ternarylife
+        preferred:
+          highContrastMode !== 'forced'
+            ? `
+              border: ${euiTheme.border.thin};
+              border-radius: ${euiTheme.size.s};
+              ${logicalCSS('min-height', euiTheme.size.s)}
+            `
+            : // Increase small sizes, otherwise the border is hard to distinguish,
+              // However, native element heights seem to render differently,
+              // so we need to tweak the min-height accordingly
+              logicalCSS('min-height', euiTheme.size.m),
+        // Also doesn't render without this ¯\_(ツ)_/¯
+        forced: 'background-color: revert;',
+      })}
+
+      ${euiCanAnimate} {
+        /* Note: FF/Mozilla doesn't actually support animating the native progress bar
+          @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */
+        ${crossBrowserProgressValue(
+          `transition: width ${euiTheme.animation.normal} linear`
+        )}
+      }
+    `,
+    // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
+    // we apply this style to a <div> instead of a <progress> element.
+    // See https://css-tricks.com/html5-progress-element/ for more info.
+    indeterminate: css`
+      &::before {
+        position: absolute;
+        content: '';
+        ${logicalCSS('width', '100%')}
+        ${logicalCSS('top', 0)}
+        ${logicalCSS('bottom', 0)}
+        ${logicalCSS('left', 0)}
+        transform: scaleX(0) translateX(0%);
+        animation: ${euiIndeterminateAnimation} 1s
+          ${euiTheme.animation.resistance} infinite;
+
+        ${euiCantAnimate} {
+          animation-duration: 2s;
+          animation-timing-function: linear;
+        }
+
+        ${highContrastModeStyles(euiThemeContext, {
+          // Windows high contrast themes ignore backgrounds, so use a border instead
+          forced: `
+            ${logicalCSS('border-top-style', 'solid')}
+            ${logicalCSS('border-top-color', 'transparent')}
+          `,
+        })}
+      }
+    `,
+    // Sizes
+    _sharedSizeCSS: (size: string) => `
+      ${logicalCSS('height', size)}
+      ${highContrastModeStyles(euiThemeContext, {
+        forced: `
+          &::before {
+            ${logicalCSS('border-top-width', size)}
+          }`,
+      })}
+    `,
+    get xs() {
+      return css(
+        // Increased visibility/size for high contrast modes
+        this._sharedSizeCSS(
+          highContrastMode ? euiTheme.size.xs : euiTheme.size.xxs
+        )
+      );
+    },
+    get s() {
+      return css(this._sharedSizeCSS(euiTheme.size.xs));
+    },
+    get m() {
+      return css(this._sharedSizeCSS(euiTheme.size.s));
+    },
+    get l() {
+      return css(this._sharedSizeCSS(euiTheme.size.m));
+    },
+    // Positioning
+    fixed: css`
+      position: fixed;
+      z-index: ${Number(euiTheme.levels.header) + 1};
+      ${nonStaticPositioning(isNative)}
+    `,
+    absolute: css`
+      position: absolute;
+      ${nonStaticPositioning(isNative)}
+      ${logicalCSS('border-top-left-radius', 'inherit')}
+      ${logicalCSS('border-top-right-radius', 'inherit')}
+    `,
+    static: css`
+      position: relative;
+    `,
+    // Colors
+    primary: css`
+      ${nativeVsIndeterminateColor(
+        euiTheme.colors.primary,
+        isNative,
+        highContrastMode
+      )}
+    `,
+    success: css`
+      ${nativeVsIndeterminateColor(
+        euiTheme.colors.success,
+        isNative,
+        highContrastMode
+      )}
+    `,
+    warning: css`
+      ${nativeVsIndeterminateColor(
+        euiTheme.colors.warning,
+        isNative,
+        highContrastMode
+      )}
+    `,
+    danger: css`
+      ${nativeVsIndeterminateColor(
+        euiTheme.colors.danger,
+        isNative,
+        highContrastMode
+      )}
+    `,
+    subdued: css`
+      ${nativeVsIndeterminateColor(
+        euiTheme.colors.subduedText,
+        isNative,
+        highContrastMode
+      )}
+    `,
+    accent: css`
+      ${nativeVsIndeterminateColor(
+        euiTheme.colors.accent,
+        isNative,
+        highContrastMode
+      )}
+    `,
+    vis0: css`
+      ${nativeVsIndeterminateColor(visColors[0], isNative, highContrastMode)}
+    `,
+    vis1: css`
+      ${nativeVsIndeterminateColor(visColors[1], isNative, highContrastMode)}
+    `,
+    vis2: css`
+      ${nativeVsIndeterminateColor(visColors[2], isNative, highContrastMode)}
+    `,
+    vis3: css`
+      ${nativeVsIndeterminateColor(visColors[3], isNative, highContrastMode)}
+    `,
+    vis4: css`
+      ${nativeVsIndeterminateColor(visColors[4], isNative, highContrastMode)}
+    `,
+    vis5: css`
+      ${nativeVsIndeterminateColor(visColors[5], isNative, highContrastMode)}
+    `,
+    vis6: css`
+      ${nativeVsIndeterminateColor(visColors[6], isNative, highContrastMode)}
+    `,
+    vis7: css`
+      ${nativeVsIndeterminateColor(visColors[7], isNative, highContrastMode)}
+    `,
+    vis8: css`
+      ${nativeVsIndeterminateColor(visColors[8], isNative, highContrastMode)}
+    `,
+    vis9: css`
+      ${nativeVsIndeterminateColor(visColors[9], isNative, highContrastMode)}
+    `,
+    customColor: css`
+      ${nativeVsIndeterminateColor('currentColor', isNative, highContrastMode)}
+    `,
+  };
+};
 
 /**
  * Data styles
diff --git a/packages/eui/src/components/progress/progress.tsx b/packages/eui/src/components/progress/progress.tsx
index 6eff904f7c9..6da1ec4d74d 100644
--- a/packages/eui/src/components/progress/progress.tsx
+++ b/packages/eui/src/components/progress/progress.tsx
@@ -11,7 +11,6 @@ import React, {
   HTMLAttributes,
   ProgressHTMLAttributes,
   ReactNode,
-  Fragment,
   CSSProperties,
 } from 'react';
 import classNames from 'classnames';
@@ -154,7 +153,7 @@ export const EuiProgress: FunctionComponent<
 
   if (determinate) {
     return (
-      <Fragment>
+      <>
         {label || valueText ? (
           <div css={dataCssStyles} className="euiProgress__data">
             {label && (
@@ -198,7 +197,7 @@ export const EuiProgress: FunctionComponent<
           aria-hidden={label && valueText ? true : false}
           {...(rest as ProgressHTMLAttributes<HTMLProgressElement>)}
         />
-      </Fragment>
+      </>
     );
   } else {
     return (
diff --git a/packages/eui/src/components/skeleton/skeleton_circle.styles.ts b/packages/eui/src/components/skeleton/skeleton_circle.styles.ts
index 238dea6ef17..53249a8a877 100644
--- a/packages/eui/src/components/skeleton/skeleton_circle.styles.ts
+++ b/packages/eui/src/components/skeleton/skeleton_circle.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { logicalSizeCSS, mathWithUnits } from '../../global_styling';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 
 import { euiSkeletonGradientAnimation } from './utils';
@@ -23,6 +24,7 @@ export const euiSkeletonCircleStyles = (euiThemeContext: UseEuiTheme) => {
         slideSize: '-70%',
         gradientSize: '280%',
       })}
+      ${preventForcedColors(euiThemeContext)}
     `,
     // Sizes
     s: css`
diff --git a/packages/eui/src/components/skeleton/skeleton_rectangle.styles.ts b/packages/eui/src/components/skeleton/skeleton_rectangle.styles.ts
index 58ce8f6528c..00877b682da 100644
--- a/packages/eui/src/components/skeleton/skeleton_rectangle.styles.ts
+++ b/packages/eui/src/components/skeleton/skeleton_rectangle.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 
 import { euiSkeletonGradientAnimation } from './utils';
 
@@ -21,6 +22,7 @@ export const euiSkeletonRectangleStyles = (euiThemeContext: UseEuiTheme) => {
         slideSize: '-75%',
         gradientSize: '350%',
       })}
+      ${preventForcedColors(euiThemeContext)}
     `,
     // Border radius
     s: css`
diff --git a/packages/eui/src/components/skeleton/skeleton_text.styles.ts b/packages/eui/src/components/skeleton/skeleton_text.styles.ts
index 69d0794f796..b9c018b1abe 100644
--- a/packages/eui/src/components/skeleton/skeleton_text.styles.ts
+++ b/packages/eui/src/components/skeleton/skeleton_text.styles.ts
@@ -8,6 +8,8 @@
 
 import { css } from '@emotion/react';
 import { euiFontSize, logicalCSS, mathWithUnits } from '../../global_styling';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
+
 import { UseEuiTheme } from '../../services';
 
 import { euiSkeletonGradientAnimation } from './utils';
@@ -38,6 +40,7 @@ export const euiSkeletonTextStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('width', '100%')}
       border-radius: ${euiTheme.border.radius.small};
       ${euiSkeletonGradientAnimation(euiThemeContext)}
+      ${preventForcedColors(euiThemeContext)}
 
       /* Offset via transform to more closely match placement of text */
       transform: translateY(-25%);
diff --git a/packages/eui/src/components/skeleton/skeleton_title.styles.ts b/packages/eui/src/components/skeleton/skeleton_title.styles.ts
index d48e7975c8d..c4b82043667 100644
--- a/packages/eui/src/components/skeleton/skeleton_title.styles.ts
+++ b/packages/eui/src/components/skeleton/skeleton_title.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 import { euiTitle } from '../title/title.styles';
 
@@ -22,6 +23,7 @@ export const euiSkeletonTitleStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('width', '45%')}
       border-radius: ${euiTheme.border.radius.medium};
       ${euiSkeletonGradientAnimation(euiThemeContext)}
+      ${preventForcedColors(euiThemeContext)}
     `,
     // Sizes
     l: css`
diff --git a/packages/eui/src/components/skeleton/utils.ts b/packages/eui/src/components/skeleton/utils.ts
index d07999d6f57..510c596c59f 100644
--- a/packages/eui/src/components/skeleton/utils.ts
+++ b/packages/eui/src/components/skeleton/utils.ts
@@ -18,16 +18,21 @@ type AnimationOptions = {
 };
 
 export const euiSkeletonGradientAnimation = (
-  { euiTheme, colorMode }: UseEuiTheme,
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
   { slideSize = '-53%', gradientSize = '220%' }: AnimationOptions = {}
 ) => {
   const gradientStartStop =
     colorMode === 'DARK'
       ? shade(euiTheme.colors.lightShade, 0.12)
       : tint(euiTheme.colors.lightShade, 0.65);
+  // Increase "shine" visibility in high contrast modes
   const gradientMiddle =
     colorMode === 'DARK'
-      ? shade(euiTheme.colors.lightShade, 0.24)
+      ? highContrastMode
+        ? tint(euiTheme.colors.lightShade, 0.12)
+        : euiTheme.colors.lightShade
+      : highContrastMode
+      ? euiTheme.colors.emptyShade
       : tint(euiTheme.colors.lightShade, 0.8);
 
   return css`