diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 41809e3837e..06a3f6f9716 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -12,6 +12,8 @@ Remove or strikethrough items that do not apply to your PR.
 
 - Browser QA
     - [ ] Checked in both **light and dark** modes
+    - [ ] Checked in both [MacOS](https://support.apple.com/lv-lv/guide/mac-help/unac089/mac) and [Windows](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) **high contrast modes**
+      - (_[emulate forced colors](https://devtoolstips.org/tips/en/emulate-forced-colors/) if you do not have access to a Windows machine_.)
     - [ ] Checked in **mobile**
     - [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**
     - [ ] Checked for **accessibility** including keyboard-only and screenreader modes
diff --git a/packages/docusaurus-theme/package.json b/packages/docusaurus-theme/package.json
index 4765cf70a60..5cfa3eece4e 100644
--- a/packages/docusaurus-theme/package.json
+++ b/packages/docusaurus-theme/package.json
@@ -34,7 +34,7 @@
     "@docusaurus/theme-common": "^3.5.2",
     "@docusaurus/utils-validation": "^3.5.2",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "97.2.0",
+    "@elastic/eui": "workspace:^",
     "@elastic/eui-docgen": "workspace:^",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
diff --git a/packages/docusaurus-theme/src/components/demo/demo.tsx b/packages/docusaurus-theme/src/components/demo/demo.tsx
index 578c1033c2d..3321064358a 100644
--- a/packages/docusaurus-theme/src/components/demo/demo.tsx
+++ b/packages/docusaurus-theme/src/components/demo/demo.tsx
@@ -56,7 +56,7 @@ export interface DemoProps extends PropsWithChildren {
 
 const getDemoStyles = (euiTheme: UseEuiTheme) => ({
   demo: css`
-    --docs-demo-border-color: ${euiTheme.euiTheme.colors.lightShade};
+    --docs-demo-border-color: ${euiTheme.euiTheme.border.color};
     --docs-demo-border-radius: ${euiTheme.euiTheme.size.s};
 
     border: 1px solid var(--docs-demo-border-color);
diff --git a/packages/docusaurus-theme/src/components/guideline/guideline.tsx b/packages/docusaurus-theme/src/components/guideline/guideline.tsx
index 385c59beec3..59630a7bbee 100644
--- a/packages/docusaurus-theme/src/components/guideline/guideline.tsx
+++ b/packages/docusaurus-theme/src/components/guideline/guideline.tsx
@@ -6,6 +6,7 @@ import {
   useEuiMemoizedStyles,
   UseEuiTheme,
 } from '@elastic/eui';
+import { highContrastModeStyles } from '@elastic/eui/lib/global_styling/functions/high_contrast';
 import { css } from '@emotion/react';
 import { GuidelineType } from './types';
 import { GuidelineText } from './guideline_text';
@@ -17,23 +18,38 @@ export interface GuidelineProps extends PropsWithChildren {
   panelStyle?: EuiPanelProps['style'];
 }
 
-const getGuidelineStyles = ({ euiTheme }: UseEuiTheme) => ({
-  root: css`
-    margin-block: var(--eui-theme-content-vertical-spacing);
-  `,
-  wrapper: css`
-    border-block-end: 2px solid ${euiTheme.colors.lightShade};
-  `,
-  wrapperDo: css`
-    border-color: ${euiTheme.colors.success};
-  `,
-  wrapperDont: css`
-    border-color: ${euiTheme.colors.danger};
-  `,
-  textWrapper: css`
-    margin-block-start: var(--eui-size-xs);
-  `,
-});
+const getGuidelineStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+  return {
+    root: css`
+      margin-block: var(--eui-theme-content-vertical-spacing);
+    `,
+    wrapper: css`
+      border-block-end: ${euiTheme.border.thick};
+      border-start-start-radius: ${euiTheme.border.radius.medium};
+      border-start-end-radius: ${euiTheme.border.radius.medium};
+      overflow: hidden;
+
+      ${highContrastModeStyles(euiThemeContext, {
+        // Code block is used within a panel which already has a border - skip doubling up
+        preferred: `
+          & > .euiCodeBlock {
+            border: none;
+          }
+        `,
+      })}
+    `,
+    wrapperDo: css`
+      border-color: ${euiTheme.colors.success};
+    `,
+    wrapperDont: css`
+      border-color: ${euiTheme.colors.danger};
+    `,
+    textWrapper: css`
+      margin-block-start: var(--eui-size-xs);
+    `,
+  };
+};
 
 export const Guideline = ({
   children,
diff --git a/packages/docusaurus-theme/src/components/theme_context/index.tsx b/packages/docusaurus-theme/src/components/theme_context/index.tsx
index d8a394fc8d5..a8740e58fb5 100644
--- a/packages/docusaurus-theme/src/components/theme_context/index.tsx
+++ b/packages/docusaurus-theme/src/components/theme_context/index.tsx
@@ -9,13 +9,13 @@ import { EUI_THEMES, EuiProvider, EuiThemeColorMode } from '@elastic/eui';
 
 import { EuiThemeOverrides } from './theme_overrides';
 
-const EUI_THEME_NAMES = EUI_THEMES.map(
-  ({ value }) => value
-) as EuiThemeColorMode[];
+const EUI_THEME_NAMES = EUI_THEMES.map(({ value }) => value);
 
 const defaultState = {
-  theme: EUI_THEME_NAMES[0] as EuiThemeColorMode,
+  theme: EUI_THEME_NAMES[0] as string,
+  colorMode: 'LIGHT' as EuiThemeColorMode,
   changeTheme: (themeValue: EuiThemeColorMode) => {},
+  changeColorMode: (colorMode: EuiThemeColorMode) => {},
 };
 
 export const AppThemeContext = createContext(defaultState);
@@ -24,25 +24,42 @@ export const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({
   children,
 }) => {
   const isBrowser = useIsBrowser();
-  const [theme, setTheme] = useState<EuiThemeColorMode>(() => {
+
+  const [theme, setTheme] = useState<string>(() => {
     if (isBrowser) {
-      return localStorage.getItem('theme') as EuiThemeColorMode ?? defaultState.theme;
+      return (
+        (localStorage.getItem('theme') as EuiThemeColorMode) ??
+        defaultState.theme
+      );
     }
 
     return defaultState.theme;
   });
 
+  const [colorMode, setColorMode] = useState<EuiThemeColorMode>(() => {
+    if (isBrowser) {
+      return (
+        (localStorage.getItem('colorMode') as EuiThemeColorMode) ??
+        defaultState.colorMode
+      );
+    }
+
+    return defaultState.colorMode;
+  });
+
   return (
     <AppThemeContext.Provider
       value={{
-        theme,
+        theme: theme,
+        colorMode,
         changeTheme: setTheme,
+        changeColorMode: setColorMode,
       }}
     >
       <EuiProvider
         globalStyles={false}
         modify={EuiThemeOverrides}
-        colorMode={theme}
+        colorMode={colorMode}
       >
         {children}
       </EuiProvider>
diff --git a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx
index aaefb2441bc..da32abef6cd 100644
--- a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx
@@ -17,20 +17,20 @@ function ColorModeToggle({
   onChange,
   ...rest
 }: WrappedProps): JSX.Element {
-  const { theme, changeTheme } = useContext(AppThemeContext);
+  const { colorMode, changeColorMode } = useContext(AppThemeContext);
 
   useEffect(() => {
-    changeTheme(value);
+    changeColorMode;
   }, []);
 
-  const handleOnChange = (themeName: EuiThemeColorMode) => {
-    changeTheme(themeName);
-    onChange?.(themeName);
+  const handleOnChange = (colorMode: EuiThemeColorMode) => {
+    changeColorMode(colorMode);
+    onChange?.(colorMode);
   };
 
   return (
     <OriginalColorModeToggle
-      value={theme}
+      value={colorMode}
       onChange={handleOnChange}
       {...rest}
     />
diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx
index a6306448ef6..f726e35d48c 100644
--- a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx
+++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx
@@ -17,6 +17,7 @@ const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
     sidebar: css`
       --doc-sidebar-width: 258px;
       --doc-sidebar-hidden-width: 30px;
+      --ifm-toc-border-color: ${euiTheme.border.color};
 
       // ensure scrolling still works
       display: flex;
@@ -28,7 +29,7 @@ const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
   };
 };
 
-// converted from css moduels to Emotion
+// converted from css modules to Emotion
 const styles = {
   docSidebarContainer: css`
     display: none;
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png
index 88bfba2aef1..c57647cdd35 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png
index 48a3ae2efc3..337819a67fa 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Title_Alignment.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Title_Alignment.png
new file mode 100644
index 00000000000..96a6a9cd28f
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Title_Alignment.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png
index cb94ac0fc4b..1fc03a4403f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png
index 185a7e3f18a..4a62d32f172 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png
index 09e7ca679f2..528219e07eb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png
new file mode 100644
index 00000000000..777650ce9d4
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png
index 3f944d8ccc3..19745e00147 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png
index a0d83fb343c..1ffcc811e64 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png
new file mode 100644
index 00000000000..cb3bddf4fb8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png
new file mode 100644
index 00000000000..b38e25ae924
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png
index 67e09bb4f09..5f3f1911b4b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png
index 6fbdcd6d15f..3b12178f015 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png
index 91fb689dcdd..f306fc51005 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png differ
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_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png
index 15d957246d6..1c02936bed1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png
new file mode 100644
index 00000000000..3311063f548
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png
index 38293d03752..ce7ccc61c8f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png
index 517308bc5a2..c3e8f6b0c11 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png
new file mode 100644
index 00000000000..4485a2b5ba7
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png
new file mode 100644
index 00000000000..3cc49e526b7
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png
index 9b5193c7d96..3d9f07e8553 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png
index 13215c321ed..adf685c4c48 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png
index c2660eb1b38..115f561c333 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png
new file mode 100644
index 00000000000..0d4d5c5e4d3
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png
index f50feea42cc..b366af92333 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png
index f1498add612..7adc222708b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png
index dc91b9ad573..e1eb7dac216 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png
index 4d7f23f1996..7c7443e7fa7 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png
new file mode 100644
index 00000000000..196a6f678a0
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png
new file mode 100644
index 00000000000..2bb1f7bbc15
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png
index 09d83378cff..bec2f60f6bb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png
new file mode 100644
index 00000000000..ec8c424ff96
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_High_Contrast.png
new file mode 100644
index 00000000000..87e00c86dda
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png
index 8993825b30e..ea6dd10f37c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png
new file mode 100644
index 00000000000..2a0879ad6af
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png
new file mode 100644
index 00000000000..14a518702b9
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png
new file mode 100644
index 00000000000..31e4ba362ae
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png
new file mode 100644
index 00000000000..684404d570f
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png
new file mode 100644
index 00000000000..d41870f466a
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png
index 6498a30ff4f..71a44eef7ec 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png
new file mode 100644
index 00000000000..3a764e22f9f
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png
index 0d22a4cfe79..f8879906597 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png
index 32458b11e54..0873205da4b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png
index b3b55800739..56dfac948c1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png
new file mode 100644
index 00000000000..f4463aa2a20
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png
index c4a961b6415..126090717c0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png
index bf3953d37be..e678bb6b125 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png
index 8196c1f80c4..61fc234d404 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png
index c43ab3fe28f..c0a9894fcf2 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_High_Contrast.png
new file mode 100644
index 00000000000..4e3e05eb584
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png
index 7d3fb2048af..28a36993d7a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png
index e79e57f6576..1fabca62ddc 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png
index 1c4dfa789a1..72062106e27 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png
index 81c85e8ee02..3f7e8762949 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png
new file mode 100644
index 00000000000..358d24b39cd
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png
new file mode 100644
index 00000000000..5b43a8d0f8b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png
index 851024e33ee..125fdbff8fb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png
index 1163f0498b5..bf372f58344 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png
index 05e1f9b465f..06ef2c55a25 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png
index 4f368a56ccc..acae0bdc5ae 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png
new file mode 100644
index 00000000000..78980edc926
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png
index 953a571a030..c88cec89ef0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png
index e104fba7eb2..472da9a0366 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png
index 554e7fac72d..ab9fc9f76d1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png
index e104fba7eb2..472da9a0366 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png
index addc5e8e5d4..73a8e8ea030 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png
new file mode 100644
index 00000000000..605978ae67f
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png
new file mode 100644
index 00000000000..2d592cfe617
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
index 55b1fd76bef..b5ad8719e48 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
index 8dc5fa3c872..d2f65b31b6c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png
new file mode 100644
index 00000000000..bdf5c58e762
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png
new file mode 100644
index 00000000000..58372c06cc3
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png
index ce375a6b3f3..d9c4f5bd6ad 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_High_Contrast.png
new file mode 100644
index 00000000000..5fdc7277287
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png
index 8fc344b6542..97ae3cf30d2 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Dark_Mode.png
new file mode 100644
index 00000000000..03d36070dd8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_High_Contrast.png
new file mode 100644
index 00000000000..eea6862aafd
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png
index 9a0e81649d4..cfb521f37e4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png
new file mode 100644
index 00000000000..7a4f76055ae
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png
index dd549126cb3..7ff07fcac2f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png
index bfa99e190a6..4cf2664190a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png
index 4864dbf371d..d333c635e15 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index ffa99f4fdca..bfa5c58718e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png
index 585d9fdc753..b35e83f0cb4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png
new file mode 100644
index 00000000000..ecc2976dc1a
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png
index 0e846cd94d6..9fdbb5f4f2d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png
index 7a31e99e06b..2ad0ad3e9bb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png
index bb49c5856ed..a5a71da4c35 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png
index 82bd10e919d..d88d792c0cc 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png
index da4f3504b6f..4182990a5d4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png
new file mode 100644
index 00000000000..b6762e4e72d
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png
index 85f3304d2cd..c4fcc86036d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png
index f507bfc8552..0fa22cf3fed 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png
new file mode 100644
index 00000000000..521d71e6c9e
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png
index 5ce41497360..8df9aa9780f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png
index 37f84eb5448..42ec4f27ce5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png
index b9a38da081f..f0b3b903e4f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png
new file mode 100644
index 00000000000..937a7ecd9cc
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png
index 03be63076af..b1a89f991c7 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png
index de240518d89..fec995dd7c5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png
index be431e6092e..41adf03a5e6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png
index f86e3afc02d..17bd838e817 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png
new file mode 100644
index 00000000000..6a27d94f061
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png
index 8b875f7e415..b55cdf33e95 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png
index 6a3450edabb..c294287cdde 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_High_Contrast.png
new file mode 100644
index 00000000000..6d728c22bd5
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png
index 8434db2cf8c..19d149b3d94 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png
index 904b22aea60..1ea65ce63c9 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png
index fc9f81c831a..7e70108fc12 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png
index ea94e15c0a8..a5a04d43775 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png
new file mode 100644
index 00000000000..e5bbd88deda
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png
index 9e997512402..9a11a0af60f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png
index 9e997512402..9a11a0af60f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png
index f01cfedf46d..bf05c66c0eb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png
new file mode 100644
index 00000000000..07f92cedb63
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png
index 1f565af1cc1..e233be44f7f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png
index 012997da2b2..89086b64ec4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png
index e8b3ef6aded..29494bac354 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png
new file mode 100644
index 00000000000..6bb58932d0e
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png
index 3eb1f4d1329..268f6eb6e2b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png
new file mode 100644
index 00000000000..3073f24a89d
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png
index 07a077d060e..a02e41efb14 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png
index 422b1ef9920..646e5d28834 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png
index 694b893e800..311b96b8f8b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png
index 45ebf7cec90..3ea893e5a41 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png
index 605102cbce7..3dea637c47e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png
new file mode 100644
index 00000000000..7547be748e7
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png
index 5860eed1d89..09bfde524fb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png
index 99d7017b6fc..d1257b9077a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png
index 0a441bebe7b..c035592cbc6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png
index fdcd3e35ad2..630d94ef13b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png
index 712d47932b7..188c5816e5c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png
index 4ff354fd56d..f34c1594056 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png
new file mode 100644
index 00000000000..4cf5487feae
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png
index 9b9429ccd72..577132c366f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
index aa38d7136f6..e53dd2f2397 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png
index 4952fd9b5a4..03fc5de9357 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
index 9094880a22f..217797f854c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
index cc890c505a4..c28492fe2ff 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
index 61d955ea229..c1259822f73 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
index 0fef7b81f8b..22c25f4db3e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
index dfa13a507e0..0ca4631ee9d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png
index 1a0c56f1167..06ec3e9f647 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png
index f698f45c194..74c4202c880 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png
index 3f8665a936c..b77fe3ce3e3 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png
index 91e3d35dd2b..098d7e8e5aa 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png
index 5d5f8bcd72b..743645b4b8b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png
index 859150df341..87e97a2f00a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png
index 72c02ba6149..aec56266722 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png
index a344d7ba16c..febe4595613 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png
index 9f763a44250..da0bd0b698e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png
index c7ac6e09f18..807b3d3bfa4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png
index 7985559d261..537ba34505d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png
index 2ddeffd08dd..baf77c52412 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png
index 3c28ce048a6..393719fb294 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png
index f6b063bfbe2..fd026379fc8 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png
index 8e3fa7596ca..44951326d4c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png
index b26d03f2b34..f4e59585bed 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png
index 33423d94a0c..e5b47588cef 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png
index 80531851d59..7ee34320f54 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png
new file mode 100644
index 00000000000..00f088fe753
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png
new file mode 100644
index 00000000000..f0f3ed5cff0
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png
index c026abf05f6..b139027d44f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png
index 8cc2126ebd8..0001abee890 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png
new file mode 100644
index 00000000000..452df8fc100
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_High_Contrast_Mode.png
new file mode 100644
index 00000000000..d8574f3dc31
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_High_Contrast_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png
deleted file mode 100644
index d95588d2e63..00000000000
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png and /dev/null differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_High_Contrast.png
new file mode 100644
index 00000000000..52c98964a9d
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png
new file mode 100644
index 00000000000..595b295d1cd
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png
index 3e1706ceee7..ad5dfeda21c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png
index 6f7483e4e91..e79c5abf7c5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png
index 4493ee51939..dc7b0941a24 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png
index 1d10ff60e0e..470898f24f9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png
index 2ef6d0c0e3f..a20de7d7c71 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Title_Alignment.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Title_Alignment.png
new file mode 100644
index 00000000000..ec0b542ab5c
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Title_Alignment.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png
index 90b1dbe21bc..163ba3d1935 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png
index 3c55f4206b3..f15ca4e6363 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png
index 1cd89b52a92..588ed9a1076 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png
new file mode 100644
index 00000000000..2e776d02dd1
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png
index 4f86fcc10a8..9de72e241b9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png
index d8d72e3039d..479db786e2e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png
new file mode 100644
index 00000000000..8ed62fefbd7
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png
new file mode 100644
index 00000000000..db752c13a63
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png
index e7883f9b715..37c1489a8fb 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png
index 27ecec8be9f..89feeddea08 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png
index 2b742522ba7..2c030144e81 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.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/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png
index c8952125e56..5f814c44ea3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png
new file mode 100644
index 00000000000..c42d198badf
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png
index 55ae5a7f7e2..a2eec73f935 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png
index 248abcc1f5c..dda7d21a167 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png
new file mode 100644
index 00000000000..7d5dfaf063d
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png
new file mode 100644
index 00000000000..0d002ca526f
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png
index 3f3a86e1107..43fc3920cda 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png
index b28c58b387c..519a7992dfa 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png
index 405298cf883..83886da58cb 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png
new file mode 100644
index 00000000000..07199eaddd5
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png
index a49bed9c0ac..0082f0cecdf 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png
index 17330f97abb..ee53d1a77d8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png
index e30e2f735c7..3e5aefb0154 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png
index d566845c565..ced4ed7b8a4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png
new file mode 100644
index 00000000000..8709f6aa38f
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png
new file mode 100644
index 00000000000..6d7ed4aa1fc
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png
index fcc5adc6a60..8732c96ae11 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png
new file mode 100644
index 00000000000..ab81ce1596e
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_High_Contrast.png
new file mode 100644
index 00000000000..ff7ed836818
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png
index 5321036ba3c..d6de3f52bd0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png
new file mode 100644
index 00000000000..350dc2d7243
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png
new file mode 100644
index 00000000000..4825e505453
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png
new file mode 100644
index 00000000000..b3426864697
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png
new file mode 100644
index 00000000000..8c57c5bc7d5
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png
new file mode 100644
index 00000000000..02a3e0e3ae8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png
index 7b02cd1dae9..c9df242a1e4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png
new file mode 100644
index 00000000000..3382927c5b9
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png
index c8c70f08bce..f7b3be8b2ba 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png
index f664661b346..88226d2cdf3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png
index 963af9896c3..72fb86844dd 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png
new file mode 100644
index 00000000000..3642736f32a
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png
index c47290a1b4b..3838df107ed 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png
index 9159441dff0..6a3adc8fa82 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png
index a87e7ba5261..4466ee73138 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png
index adfa6857b3a..a41cc028904 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_High_Contrast.png
new file mode 100644
index 00000000000..b988cb7aaf8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png
index 8f73613b183..6ff82473eab 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png
index cb8b4eb2974..9a9607b0574 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png
index b0223dfbd55..76ca99d9074 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png
index 57cd818c303..815f24ac8ba 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png
new file mode 100644
index 00000000000..5690f3f301e
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png
new file mode 100644
index 00000000000..3882174205e
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png
index d8a5829e50e..a45f8e8f96f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png
index 9086ed619f9..8315ba91a1b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png
index 55ea3f9966d..2851ddfcec2 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png
index e8974e4a98b..facbe8036be 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png
new file mode 100644
index 00000000000..fb448619161
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png
index 18d9d55cd28..c59a9fc87bc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png
index b8441ac74fd..68f31a4ce11 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png
index fba5ca718d5..8b719ab42f8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png
index b8441ac74fd..68f31a4ce11 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png
index 9df3cd6ede3..595f3ebdb8c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png
new file mode 100644
index 00000000000..9b1b1377126
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png
new file mode 100644
index 00000000000..7302f496c37
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
index 338bbf80b3d..5791b86c9fc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
index 23ef9c369cf..27cff65facc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png
new file mode 100644
index 00000000000..d07a2aca101
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png
new file mode 100644
index 00000000000..1c0cdd2413f
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png
index e053f335276..9ca49d0a439 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_High_Contrast.png
new file mode 100644
index 00000000000..7ead185e985
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png
index 86ac51459b6..d360573b499 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Dark_Mode.png
new file mode 100644
index 00000000000..a62940ee65a
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png
new file mode 100644
index 00000000000..b643d11d5ff
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png
index 7cd7f7e4681..e82e830a946 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png
new file mode 100644
index 00000000000..d2717ffc5b5
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png
index 3f850c9d448..e1ff7d8bc41 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png
index 5f4115f53d8..c18a999ca4a 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png
index b6e46f3124b..ba1547dd1ea 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index 6eb2a51e3d3..39429e358ba 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png
index 32277cccdf5..b216333b60e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png
new file mode 100644
index 00000000000..f08d03583de
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png
index 6941fed5635..b6f5aea82d4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png
index 8c39832ab66..17d0c9f0672 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png
index 208419c7ea7..943e8813f8b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png
index 73d4019fef3..d12a47ff8c4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png
index c4be4de797f..142c2afc985 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png
index 2037678c00a..91d825024b2 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png
new file mode 100644
index 00000000000..f2a976b16c4
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png
index 2650e3f7e4b..5a4eb68f24b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png
index bd9b17b810a..559f1bd5cf1 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png
new file mode 100644
index 00000000000..99f3174d566
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png
index 24837b35c4f..00b83900ad4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png
index 193cc213528..c37d94530f3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png
index 34fbaedfb4b..a1bf9ddf1b9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png
new file mode 100644
index 00000000000..ad67e7ac0af
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png
index 038157528e4..b8096b8d775 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png
index 5b934428063..d5b1608390e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png
index a54becc7f34..acd9de6e477 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png
index d67e90a4870..b51e5b8dec0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png
new file mode 100644
index 00000000000..3c5f5d96645
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png
index 1b2a6189ab4..85b4e51b896 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png
index c4fe9edfa68..139720b93ac 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_High_Contrast.png
new file mode 100644
index 00000000000..99cc3a5a043
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png
index 2a01ec4115b..23c13c5454a 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png
index 9e6b49e8a65..0088517dbf0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png
index a0f947a7176..8acf986d718 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png
index db55463c9ba..c36978f7718 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png
new file mode 100644
index 00000000000..a4d6facb284
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png
index 9c79216a724..133060874ae 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png
index 9c79216a724..133060874ae 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png
index f6d5ea7f8f4..8e9319252df 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png
new file mode 100644
index 00000000000..d685e40f6d0
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png
index 6731bd56a16..d8a5608cb5e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png
index f2769fefd26..1a006e04af8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png
index 34ab0a5ceae..ea990687571 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png
new file mode 100644
index 00000000000..89f1f28be1b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png
index 1a2c749526b..9c3d9742e2e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png
new file mode 100644
index 00000000000..0cd7f451105
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png
index 9b5b0c2e29a..741491351a5 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png
index bef583f0761..3c5a9a2314d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png
index a007c7cb121..ce2e1f522f1 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png
index fc18ba36cec..4c9e6abe61c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png
index dabfbffe70a..57b5903e431 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png
new file mode 100644
index 00000000000..3c0be029b03
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png
index 66ac1f3036b..58d45ad8518 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png
index 4d38e32e2b6..567f6ea7acc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png
index 9726d6a375f..c98e2ded4a7 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png
index 9763626cfb0..dc8463fdfb3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png
index e20bb64413f..39b2dd5f007 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png
index 886b40c2667..c0c3f40e288 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png
new file mode 100644
index 00000000000..114b1013edf
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png
index eaf23176076..124ee39c9c9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
index 137eef593d9..55a85d7a78e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png
index c986dc99409..9781c94455a 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
index d4fcb79d797..5580962a98e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png
index ed571c7c894..2c303e3ff69 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
index f94ac5b53b2..53f452fe66f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
index f91ab2e92b3..fed230464c7 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
index 0c1d3e80dbf..803f15f1daa 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
index 97436fab22f..6079093af32 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png
index e1a065cb5e7..d1d04fbb5c0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png
index 2c4b6b752c1..a07a836756f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png
index db75a3cf127..682df9973e5 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png
index 384d59d4565..dea026948cd 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png
index 8d7043f9a6d..78f1a829901 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png
index 3fd338b1d40..8d246177f93 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png
index 28312957ee2..2304c6fe837 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png
index 3315d9f51c0..dbb0079973e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png
index e8d47cdbba8..1d5c163424d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png
index 6212a0f9510..e115f887c0b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png
index ae37345f7ee..e90577e2ed5 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png
index 1980ea112b7..1acfbaf2154 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png
index ef9aa68e39b..c73c106f43e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png
index 07ed056cd69..afef53d21e3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png
index 2a18f17a380..3a930fe1521 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png
index 6d40a5e369f..8f73127344f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png
index ab01a2af4a0..06e0b4b0d7f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png
index 0c20a607f30..af57fd59c7f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png
new file mode 100644
index 00000000000..fb359f391d8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png
new file mode 100644
index 00000000000..895667723d6
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png
index 764c9960ab5..d991467ed3c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png
index 434d81242b1..1b1efd6d189 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png
new file mode 100644
index 00000000000..35be106db8b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_High_Contrast_Mode.png
new file mode 100644
index 00000000000..63cab4b7bb4
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_High_Contrast_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png
deleted file mode 100644
index ca7bb824564..00000000000
Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png and /dev/null differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_High_Contrast.png
new file mode 100644
index 00000000000..e0f05b16d4b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png
new file mode 100644
index 00000000000..57ca97d3dc8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png
index acfba94a277..6074e949066 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png
index 4804e6e5efc..3130864af46 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png
index 4ab0e9bbc6d..8d25f7cf95f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png differ
diff --git a/packages/eui/.storybook/decorator.tsx b/packages/eui/.storybook/decorator.tsx
index 6b78a2e2353..6c8dc3267ed 100644
--- a/packages/eui/.storybook/decorator.tsx
+++ b/packages/eui/.storybook/decorator.tsx
@@ -86,6 +86,13 @@ const storybookToolbarColorModes: Array<
   { value: 'dark', title: 'Dark mode', icon: 'circle' },
 ];
 
+const storybookToolbarHighContrastMode: Array<
+  ToolbarDisplay & { value: boolean }
+> = [
+  { value: false, title: 'High contrast off', icon: 'circlehollow' },
+  { value: true, title: 'High contrast on', icon: 'circle' },
+];
+
 const storybookToolbarWritingModes: Array<
   ToolbarDisplay & { value: WritingModes }
 > = [
@@ -112,6 +119,17 @@ export const euiProviderDecoratorGlobals: Preview['globalTypes'] = {
       dynamicTitle: true,
     },
   },
+  highContrastMode: {
+    description: 'High contrast mode for EuiProvider theme',
+    defaultValue: window?.matchMedia?.('(prefers-contrast: more)').matches
+      ? true
+      : false,
+    toolbar: {
+      title: 'Contrast mode',
+      items: storybookToolbarHighContrastMode,
+      dynamicTitle: true,
+    },
+  },
   writingMode: {
     description: 'Writing mode for testing logical property directions',
     defaultValue: 'ltr',
diff --git a/packages/eui/.storybook/preview.tsx b/packages/eui/.storybook/preview.tsx
index c34435f5032..d230e00baee 100644
--- a/packages/eui/.storybook/preview.tsx
+++ b/packages/eui/.storybook/preview.tsx
@@ -46,6 +46,7 @@ const preview: Preview = {
     (Story, context) => (
       <EuiProviderDecorator
         colorMode={context.globals.colorMode}
+        highContrastMode={context.globals.highContrastMode}
         {...(context.componentId === 'theming-euiprovider' && context.args)}
         writingMode={context.globals.writingMode}
       >
diff --git a/packages/eui/.stylelintrc.js b/packages/eui/.stylelintrc.js
index 42adc41f28c..3c973578d39 100644
--- a/packages/eui/.stylelintrc.js
+++ b/packages/eui/.stylelintrc.js
@@ -151,9 +151,6 @@ module.exports = {
             ignoreKeywords: [camelCaseValueRegex],
           },
         ],
-        // This is set to deprecate after stylelint v16, but in the meanwhile, is helpful
-        // for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS())
-        'no-extra-semicolons': true,
 
         // Emotion uses the `label` property to generate the output className string
         'property-no-unknown': [true, { ignoreProperties: 'label' }],
diff --git a/packages/eui/changelogs/upcoming/8174.md b/packages/eui/changelogs/upcoming/8174.md
new file mode 100644
index 00000000000..1ff1c591cad
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8174.md
@@ -0,0 +1 @@
+- Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode.
diff --git a/packages/eui/changelogs/upcoming/8232.md b/packages/eui/changelogs/upcoming/8232.md
new file mode 100644
index 00000000000..fa376286839
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8232.md
@@ -0,0 +1,4 @@
+- Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode`
+  - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows
+  - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings
+  - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed
diff --git a/packages/eui/changelogs/upcoming/8234.md b/packages/eui/changelogs/upcoming/8234.md
new file mode 100644
index 00000000000..d1347bb260a
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8234.md
@@ -0,0 +1,2 @@
+- `useEuiShadow()` now accepts a second `options` argument 
+- `useEuiShadowFlat()` now accepts an `options` object instead of only a color
diff --git a/packages/eui/src-docs/src/actions/action_types.js b/packages/eui/src-docs/src/actions/action_types.js
index 07aa8e948fa..95ca9e6de82 100644
--- a/packages/eui/src-docs/src/actions/action_types.js
+++ b/packages/eui/src-docs/src/actions/action_types.js
@@ -2,7 +2,4 @@ export default {
   // Example nav actions
   REGISTER_SECTION: 'REGISTER_SECTION',
   UNREGISTER_SECTION: 'UNREGISTER_SECTION',
-
-  // Locale actions
-  TOGGLE_LOCALE: 'TOGGLE_LOCALE',
 };
diff --git a/packages/eui/src-docs/src/actions/index.js b/packages/eui/src-docs/src/actions/index.js
deleted file mode 100644
index 5c3431e4d43..00000000000
--- a/packages/eui/src-docs/src/actions/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { toggleLocale } from './locale_actions';
diff --git a/packages/eui/src-docs/src/actions/locale_actions.js b/packages/eui/src-docs/src/actions/locale_actions.js
deleted file mode 100644
index c306dc9b991..00000000000
--- a/packages/eui/src-docs/src/actions/locale_actions.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import ActionTypes from './action_types';
-
-export const toggleLocale = (locale) => ({
-  type: ActionTypes.TOGGLE_LOCALE,
-  data: {
-    locale,
-  },
-});
diff --git a/packages/eui/src-docs/src/components/guide_locale_selector/guide_locale_selector.js b/packages/eui/src-docs/src/components/guide_locale_selector/guide_locale_selector.js
deleted file mode 100644
index 4b53fc35199..00000000000
--- a/packages/eui/src-docs/src/components/guide_locale_selector/guide_locale_selector.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import moment from 'moment';
-import { translateUsingPseudoLocale } from '../../../src/services/string/pseudo_locale_translator';
-
-// For testing/demoing EuiDatePicker, process moment's `en` locale config into a babelfished version
-const enConfig = moment.localeData('en')._config;
-moment.defineLocale('en-xa', {
-  ...enConfig,
-  months: enConfig.months.map(translateUsingPseudoLocale),
-  monthsShort: enConfig.monthsShort.map(translateUsingPseudoLocale),
-  weekdays: enConfig.weekdays.map(translateUsingPseudoLocale),
-  weekdaysMin: enConfig.weekdaysMin.map(translateUsingPseudoLocale),
-  weekdaysShort: enConfig.weekdaysShort.map(translateUsingPseudoLocale),
-});
-// Reset default moment locale after using `defineLocale`
-moment.locale('en');
-
-import { EuiSwitch, EuiToolTip } from '../../../../src/components';
-
-export const GuideLocaleSelector = ({ selectedLocale, onToggleLocale }) => {
-  return (
-    <EuiToolTip delay="long" position="left" content="Simulates localization">
-      <EuiSwitch
-        compressed
-        label={'Babelfish'}
-        checked={selectedLocale === 'en-xa'}
-        onChange={() =>
-          onToggleLocale(selectedLocale === 'en' ? 'en-xa' : 'en')
-        }
-      />
-    </EuiToolTip>
-  );
-};
-
-GuideLocaleSelector.propTypes = {
-  onToggleLocale: PropTypes.func.isRequired,
-  selectedLocale: PropTypes.string.isRequired,
-};
diff --git a/packages/eui/src-docs/src/components/guide_locale_selector/index.js b/packages/eui/src-docs/src/components/guide_locale_selector/index.js
deleted file mode 100644
index 7f4a4fbcfb4..00000000000
--- a/packages/eui/src-docs/src/components/guide_locale_selector/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { GuideLocaleSelector } from './guide_locale_selector';
diff --git a/packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js b/packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js
index 223aee0cb90..7c339c92149 100644
--- a/packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -302,7 +302,5 @@ export class GuidePageChrome extends Component {
 
 GuidePageChrome.propTypes = {
   currentRoute: PropTypes.object.isRequired,
-  onToggleLocale: PropTypes.func.isRequired,
-  selectedLocale: PropTypes.string.isRequired,
   navigation: PropTypes.array.isRequired,
 };
diff --git a/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx b/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx
index f68018f3927..9be1dc1bc8b 100644
--- a/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx
+++ b/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx
@@ -21,15 +21,7 @@ import { VersionSwitcher } from './version_switcher';
 
 const GITHUB_URL = 'https://github.com/elastic/eui';
 
-export type GuidePageHeaderProps = {
-  onToggleLocale: () => {};
-  selectedLocale: string;
-};
-
-export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
-  onToggleLocale,
-  selectedLocale,
-}) => {
+export const GuidePageHeader = () => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
 
   const logo = useMemo(() => {
@@ -112,18 +104,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
   }, [codesandbox, github]);
 
   const rightSideItems = isMobileSize
-    ? [
-        <GuideThemeSelector
-          onToggleLocale={onToggleLocale}
-          selectedLocale={selectedLocale}
-        />,
-        mobileMenu,
-      ]
+    ? [<GuideThemeSelector />, mobileMenu]
     : [
-        <GuideThemeSelector
-          onToggleLocale={onToggleLocale}
-          selectedLocale={selectedLocale}
-        />,
+        <GuideThemeSelector />,
         github,
         <GuideFigmaLink key="figma" />,
         codesandbox,
diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx
index 7975bff217f..a69e2cce399 100644
--- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx
+++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx
@@ -1,6 +1,10 @@
 import React, { FunctionComponent, useState, useEffect, useMemo } from 'react';
-import { EuiCodeBlock } from '../../../../../src/components/code';
-import { EuiButtonEmpty } from '../../../../../src/components/button';
+import {
+  EuiCodeBlock,
+  EuiButtonEmpty,
+  EuiHorizontalRule,
+  useEuiTheme,
+} from '../../../../../src';
 // @ts-ignore Not TS
 import { CodeSandboxLink } from '../../codesandbox';
 // @ts-ignore Not TS
@@ -46,6 +50,8 @@ export const GuideSectionExampleCode: FunctionComponent<
     </CodeSandboxLink>
   ) : undefined;
 
+  const { highContrastMode } = useEuiTheme();
+
   return (
     <>
       <EuiCodeBlock
@@ -56,9 +62,12 @@ export const GuideSectionExampleCode: FunctionComponent<
         }
         overflowHeight={400}
         isCopyable
+        // Code block is used within a panel which already has a border - skip doubling up
+        {...(highContrastMode && { css: { border: 'none' } })}
       >
         {codeToRender}
       </EuiCodeBlock>
+      {highContrastMode && <EuiHorizontalRule margin="none" />}
       {codeSandboxLink}
     </>
   );
diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx
index bbe1b68ad9b..7408af54462 100644
--- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx
+++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 import { EuiSplitPanel } from '../../../../../src/components/panel';
 import { _EuiSplitPanelInnerProps } from '../../../../../src/components/panel/split_panel/';
-import { EuiHorizontalRule } from '../../../../../src';
+import { EuiHorizontalRule, useEuiTheme } from '../../../../../src';
 
 export interface GuideSectionExample {
   example: ReactNode;
@@ -27,6 +27,8 @@ export const GuideSectionExample: FunctionComponent<GuideSectionExample> = ({
     guideDemo__ghostBackground: ghostBackground,
   });
 
+  const { highContrastMode } = useEuiTheme();
+
   return (
     <EuiSplitPanel.Outer hasBorder hasShadow={false} data-eui-docs-example>
       <EuiSplitPanel.Inner
@@ -36,15 +38,17 @@ export const GuideSectionExample: FunctionComponent<GuideSectionExample> = ({
       >
         {example}
       </EuiSplitPanel.Inner>
+      {exampleToggles && !highContrastMode && (
+        <EuiHorizontalRule margin="none" />
+      )}
       {exampleToggles && (
-        <>
-          <EuiHorizontalRule margin="none" />
-          <EuiSplitPanel.Inner paddingSize="m" color="subdued">
-            {exampleToggles}
-          </EuiSplitPanel.Inner>
-        </>
+        <EuiSplitPanel.Inner paddingSize="m" color="subdued">
+          {exampleToggles}
+        </EuiSplitPanel.Inner>
+      )}
+      {exampleToggles && tabs && !highContrastMode && (
+        <EuiHorizontalRule margin="none" />
       )}
-      {exampleToggles && tabs && <EuiHorizontalRule margin="none" />}
       {(tabs || tabContent) && (
         <EuiSplitPanel.Inner paddingSize="none" color="subdued">
           {tabs}
diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx
index c1d215babef..2e71703bf6b 100644
--- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx
+++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx
@@ -63,23 +63,25 @@ export const GuideSectionPropsDescription: FunctionComponent<
 
   return (
     <>
-      <div className={classNames('guideSection__propsTableIntro', className)}>
-        <EuiFlexGroup alignItems="baseline" wrap>
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="s">
-              <h3 id={componentName}>{componentName}</h3>
-            </EuiTitle>
+      <EuiFlexGroup
+        className={classNames('guideSection__propsTableIntro', className)}
+        alignItems="baseline"
+        wrap
+      >
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="s">
+            <h3 id={componentName}>{componentName}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        {extendedTypesElements.length > 0 && (
+          <EuiFlexItem>
+            <EuiText size="s">
+              <p>[ extends {extendedTypesElements} ]</p>
+            </EuiText>
           </EuiFlexItem>
-          {extendedTypesElements.length > 0 && (
-            <EuiFlexItem>
-              <EuiText size="s">
-                <p>[ extends {extendedTypesElements} ]</p>
-              </EuiText>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-        {descriptionElement}
-      </div>
+        )}
+      </EuiFlexGroup>
+      {descriptionElement}
     </>
   );
 };
diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx
index 1fed2a84684..c17c7f0a0e2 100644
--- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx
+++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx
@@ -23,7 +23,7 @@ export const GuideSectionPropsTable: FunctionComponent<
   const { props } = docgenInfo;
 
   return (
-    <div>
+    <>
       {componentName && (
         <GuideSectionPropsDescription
           componentName={componentName}
@@ -38,7 +38,7 @@ export const GuideSectionPropsTable: FunctionComponent<
           scope: component,
         }}
       />
-    </div>
+    </>
   );
 };
 
diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx
index fff2175e3b7..5575a3a836d 100644
--- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx
+++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx
@@ -1,6 +1,10 @@
 import React, { FunctionComponent } from 'react';
-import { EuiCodeBlock } from '../../../../../src/components/code';
-import { EuiSpacer } from '../../../../../src/components/spacer';
+import {
+  EuiCodeBlock,
+  EuiHorizontalRule,
+  EuiSpacer,
+  useEuiTheme,
+} from '../../../../../src';
 
 export type GuideSectionSnippets = {
   snippets: string | string[];
@@ -9,20 +13,29 @@ export type GuideSectionSnippets = {
 export const GuideSectionSnippets: FunctionComponent<GuideSectionSnippets> = ({
   snippets,
 }) => {
+  const { highContrastMode } = useEuiTheme();
+  const codeBlockProps = {
+    language: 'jsx',
+    fontSize: 'm',
+    paddingSize: 'm',
+    isCopyable: true,
+    // Code block is used within a panel which already has a border - skip doubling up
+    ...(highContrastMode && { css: { border: 'none' } }),
+  } as const;
+
   let snippetCode;
   if (typeof snippets === 'string') {
-    snippetCode = (
-      <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m" isCopyable>
-        {snippets}
-      </EuiCodeBlock>
-    );
+    snippetCode = <EuiCodeBlock {...codeBlockProps}>{snippets}</EuiCodeBlock>;
   } else {
     snippetCode = snippets.map((snip, index) => (
       <React.Fragment key={`snippet${index}`}>
-        <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m" isCopyable>
-          {snip}
-        </EuiCodeBlock>
-        {index < snippets.length - 1 && <EuiSpacer size="xs" />}
+        <EuiCodeBlock {...codeBlockProps}>{snip}</EuiCodeBlock>
+        {index < snippets.length - 1 &&
+          (highContrastMode ? (
+            <EuiHorizontalRule margin="xs" />
+          ) : (
+            <EuiSpacer size="xs" />
+          ))}
       </React.Fragment>
     ));
   }
diff --git a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
index bc9d4449b9d..e108f33ba07 100644
--- a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
+++ b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
@@ -1,78 +1,40 @@
 /* eslint-disable no-restricted-globals */
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 
-import {
-  EuiThemeProvider,
-  useEuiTheme,
-  useIsWithinBreakpoints,
-} from '../../../../src/services';
+import { EuiThemeProvider, useEuiTheme } from '../../../../src/services';
 import { EUI_THEME, EUI_THEMES } from '../../../../src/themes';
 
 import { ThemeContext } from '../with_theme';
-// @ts-ignore Not TS
-import { GuideLocaleSelector } from '../guide_locale_selector';
 import {
   EuiPopover,
   EuiHorizontalRule,
   EuiButton,
   EuiContextMenuPanel,
   EuiContextMenuItem,
+  EuiSwitch,
+  EuiSwitchEvent,
 } from '../../../../src/components';
 
-type GuideThemeSelectorProps = {
-  onToggleLocale: () => {};
-  selectedLocale: string;
-  context?: any;
-};
-
-export const GuideThemeSelector: React.FunctionComponent<
-  GuideThemeSelectorProps
-> = ({ ...rest }) => {
-  return (
-    <ThemeContext.Consumer>
-      {(context) => <GuideThemeSelectorComponent context={context} {...rest} />}
-    </ThemeContext.Consumer>
-  );
-};
-
-const GuideThemeSelectorComponent: React.FunctionComponent<
-  GuideThemeSelectorProps
-> = ({ context, onToggleLocale, selectedLocale }) => {
-  const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
-  const [isPopoverOpen, setPopover] = useState(false);
-
-  const onButtonClick = () => {
-    setPopover(!isPopoverOpen);
-  };
+export const GuideThemeSelector = () => {
+  const context = useContext(ThemeContext);
+  const euiThemeContext = useEuiTheme();
 
-  const closePopover = () => {
-    setPopover(false);
-  };
+  const isForced = euiThemeContext.highContrastMode === 'forced';
+  const colorMode =
+    context.colorMode && !isForced
+      ? context.colorMode
+      : euiThemeContext.colorMode;
+  const highContrastMode =
+    context.colorMode && !isForced
+      ? context.highContrastMode
+      : euiThemeContext.highContrastMode;
 
-  const systemColorMode = useEuiTheme().colorMode.toLowerCase();
   const currentTheme: EUI_THEME =
-    EUI_THEMES.find(
-      (theme) => theme.value === (context.theme ?? systemColorMode)
-    ) || EUI_THEMES[0];
+    EUI_THEMES.find((theme) => theme.value === context.theme) || EUI_THEMES[0];
 
-  const getIconType = (value: EUI_THEME['value']) => {
-    return value === currentTheme.value ? 'check' : 'empty';
-  };
-
-  const items = EUI_THEMES.map((theme) => {
-    return (
-      <EuiContextMenuItem
-        key={theme.value}
-        icon={getIconType(theme.value)}
-        onClick={() => {
-          closePopover();
-          context.changeTheme(theme.value);
-        }}
-      >
-        {theme.text}
-      </EuiContextMenuItem>
-    );
-  });
+  const [isPopoverOpen, setPopover] = useState(false);
+  const onButtonClick = () => setPopover(!isPopoverOpen);
+  const closePopover = () => setPopover(false);
 
   const button = (
     <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
@@ -84,11 +46,36 @@ const GuideThemeSelectorComponent: React.FunctionComponent<
         minWidth={0}
         onClick={onButtonClick}
       >
-        {isMobileSize ? 'Theme' : currentTheme.text}
+        Theme
       </EuiButton>
     </EuiThemeProvider>
   );
 
+  const toggles = [
+    {
+      label: 'Dark mode',
+      checked: colorMode.toLowerCase() === 'dark',
+      onChange: (e: EuiSwitchEvent) =>
+        context.setContext({
+          colorMode: e.target.checked ? 'DARK' : 'LIGHT',
+        }),
+      disabled: isForced,
+    },
+    {
+      label: 'High contrast',
+      checked: !!highContrastMode,
+      onChange: (e: EuiSwitchEvent) =>
+        context.setContext({ highContrastMode: e.target.checked }),
+      disabled: isForced,
+    },
+    location.host.includes('803') && {
+      label: 'i18n testing',
+      checked: context.i18n === 'en-xa',
+      onChange: (e: EuiSwitchEvent) =>
+        context.setContext({ i18n: e.target.checked ? 'en-xa' : 'en' }),
+    },
+  ];
+
   return (
     <EuiPopover
       id="docsThemeSelector"
@@ -99,17 +86,36 @@ const GuideThemeSelectorComponent: React.FunctionComponent<
       panelPaddingSize="none"
       anchorPosition="downRight"
     >
-      <EuiContextMenuPanel size="s" items={items} />
-      {location.host.includes('803') && (
-        <>
-          <EuiHorizontalRule margin="none" />
-          <div style={{ padding: 8 }}>
-            <GuideLocaleSelector
-              onToggleLocale={onToggleLocale}
-              selectedLocale={selectedLocale}
+      <EuiContextMenuPanel
+        size="s"
+        items={EUI_THEMES.map((theme) => {
+          return (
+            <EuiContextMenuItem
+              key={theme.value}
+              icon={currentTheme.value === theme.value ? 'check' : 'empty'}
+              onClick={() => {
+                closePopover();
+                context.setContext({ theme: theme.value });
+              }}
+            >
+              {theme.text}
+            </EuiContextMenuItem>
+          );
+        })}
+      />
+      <EuiHorizontalRule margin="none" />
+      {toggles.map((item) =>
+        item ? (
+          <div css={({ euiTheme }) => ({ padding: euiTheme.size.s })}>
+            <EuiSwitch
+              compressed
+              label={item.label}
+              checked={item.checked}
+              onChange={item.onChange}
+              disabled={item.disabled}
             />
           </div>
-        </>
+        ) : null
       )}
     </EuiPopover>
   );
diff --git a/packages/eui/src-docs/src/components/with_theme/index.ts b/packages/eui/src-docs/src/components/with_theme/index.ts
index 46d6e96d7c1..7cc4f114627 100644
--- a/packages/eui/src-docs/src/components/with_theme/index.ts
+++ b/packages/eui/src-docs/src/components/with_theme/index.ts
@@ -1,2 +1,6 @@
-export { ThemeProvider, ThemeContext } from './theme_context';
+export {
+  ThemeProvider,
+  ThemeContext,
+  type ThemeContextType,
+} from './theme_context';
 export { LanguageSelector } from './language_selector';
diff --git a/packages/eui/src-docs/src/components/with_theme/language_selector.tsx b/packages/eui/src-docs/src/components/with_theme/language_selector.tsx
index 45931a8d423..212fe0c271e 100644
--- a/packages/eui/src-docs/src/components/with_theme/language_selector.tsx
+++ b/packages/eui/src-docs/src/components/with_theme/language_selector.tsx
@@ -1,75 +1,56 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 
-import {
-  EuiButtonGroup,
-  EuiIcon,
-  EuiLink,
-  EuiText,
-  EuiTourStep,
-} from '../../../../src/components';
+import { EuiButtonGroup } from '../../../../src/components';
 
-import {
-  ThemeContext,
-  theme_languages,
-  THEME_LANGUAGES,
-} from './theme_context';
+import { ThemeContext } from './theme_context';
 
-const NOTIF_STORAGE_KEY = 'js_vs_sass_notification';
-const NOTIF_STORAGE_VALUE = 'dismissed';
+export const THEME_LANGUAGES = ['language--js', 'language--sass'] as const;
+
+export type ThemeLanguages = {
+  id: (typeof THEME_LANGUAGES)[number];
+  label: string;
+  title: string;
+};
+
+export const themeLanguagesOptions: ThemeLanguages[] = [
+  {
+    id: 'language--js',
+    label: 'CSS-in-JS',
+    title: 'Language selector: CSS-in-JS',
+  },
+  {
+    id: 'language--sass',
+    label: 'Sass',
+    title: 'Language selector: Sass',
+  },
+];
+
+const ids = themeLanguagesOptions.map(({ id }) => id);
 
 export const LanguageSelector = ({
   onChange,
-  showTour = false,
 }: {
   onChange?: (id: string) => void;
-  showTour?: boolean;
 }) => {
   const themeContext = useContext(ThemeContext);
   const toggleIdSelected = themeContext.themeLanguage;
   const onLanguageChange = (optionId: string) => {
-    themeContext.changeThemeLanguage(optionId as THEME_LANGUAGES['id']);
+    themeContext.setContext({
+      themeLanguage: optionId as ThemeLanguages['id'],
+    });
     onChange?.(optionId);
-    setTourIsOpen(false);
-    localStorage.setItem(NOTIF_STORAGE_KEY, NOTIF_STORAGE_VALUE);
-  };
-
-  const [isTourOpen, setTourIsOpen] = useState(
-    localStorage.getItem(NOTIF_STORAGE_KEY) === NOTIF_STORAGE_VALUE
-      ? false
-      : showTour
-  );
-
-  const onTourDismiss = () => {
-    setTourIsOpen(false);
-    localStorage.setItem(NOTIF_STORAGE_KEY, NOTIF_STORAGE_VALUE);
   };
 
   return (
-    <EuiTourStep
-      content={
-        <EuiText style={{ maxWidth: 320 }}>
-          <p>Select your preferred styling language with this toggle button.</p>
-        </EuiText>
-      }
-      isStepOpen={isTourOpen}
-      onFinish={onTourDismiss}
-      step={1}
-      stepsTotal={1}
-      title={
-        <>
-          <EuiIcon type="bell" size="s" /> &nbsp; Theming update
-        </>
+    <EuiButtonGroup
+      buttonSize="m"
+      color="accent"
+      legend="Language selector"
+      options={themeLanguagesOptions}
+      idSelected={
+        ids.includes(toggleIdSelected) ? toggleIdSelected : 'language--js'
       }
-      footerAction={<EuiLink onClick={onTourDismiss}>Got it!</EuiLink>}
-    >
-      <EuiButtonGroup
-        buttonSize="m"
-        color="accent"
-        legend="Language selector"
-        options={theme_languages}
-        idSelected={toggleIdSelected}
-        onChange={(id) => onLanguageChange(id)}
-      />
-    </EuiTourStep>
+      onChange={(id) => onLanguageChange(id)}
+    />
   );
 };
diff --git a/packages/eui/src-docs/src/components/with_theme/theme_context.tsx b/packages/eui/src-docs/src/components/with_theme/theme_context.tsx
index f0fc4688557..519f90450af 100644
--- a/packages/eui/src-docs/src/components/with_theme/theme_context.tsx
+++ b/packages/eui/src-docs/src/components/with_theme/theme_context.tsx
@@ -1,47 +1,54 @@
 import React, { PropsWithChildren } from 'react';
-import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
+import {
+  EUI_THEMES,
+  EUI_THEME,
+  AMSTERDAM_NAME_KEY,
+} from '../../../../src/themes';
+import { EuiThemeColorModeStandard } from '../../../../src/services';
 // @ts-ignore importing from a JS file
-import { applyTheme } from '../../services';
-
-const STYLE_STORAGE_KEY = 'js_vs_sass_preference';
-const URL_PARAM_KEY = 'themeLanguage';
-
-export type THEME_LANGUAGES = {
-  id: 'language--js' | 'language--sass';
-  label: string;
-  title: string;
-};
-
-export const theme_languages: THEME_LANGUAGES[] = [
-  {
-    id: 'language--js',
-    label: 'CSS-in-JS',
-    title: 'Language selector: CSS-in-JS',
-  },
-  {
-    id: 'language--sass',
-    label: 'Sass',
-    title: 'Language selector: Sass',
+import { applyTheme, registerTheme } from '../../services';
+
+// @ts-ignore Sass
+import amsterdamThemeLight from '../../theme_light.scss';
+// @ts-ignore Sass
+import amsterdamThemeDark from '../../theme_dark.scss';
+const THEME_CSS_MAP = {
+  [AMSTERDAM_NAME_KEY]: {
+    LIGHT: amsterdamThemeLight,
+    DARK: amsterdamThemeDark,
   },
-];
-
+};
+EUI_THEMES.forEach((theme) => {
+  registerTheme(
+    theme.value,
+    THEME_CSS_MAP[theme.value as keyof typeof THEME_CSS_MAP]
+  );
+});
 const THEME_NAMES = EUI_THEMES.map(({ value }) => value);
-const THEME_LANGS = theme_languages.map(({ id }) => id);
 
-type ThemeContextType = {
+import { type ThemeLanguages } from './language_selector';
+
+export type ThemeContextType = {
   theme?: EUI_THEME['value'];
-  changeTheme: (themeValue: EUI_THEME['value']) => void;
-  themeLanguage: THEME_LANGUAGES['id'];
-  changeThemeLanguage: (language: THEME_LANGUAGES['id']) => void;
+  colorMode?: EuiThemeColorModeStandard;
+  highContrastMode?: boolean;
+  i18n?: 'en' | 'en-xa';
+  themeLanguage: ThemeLanguages['id']; // TODO: Can likely be deleted once Sass is fully deprecated
+  setContext: (context: Partial<State>) => void;
 };
 export const ThemeContext = React.createContext<ThemeContextType>({
   theme: undefined,
-  changeTheme: () => {},
-  themeLanguage: THEME_LANGS[0],
-  changeThemeLanguage: () => {},
+  colorMode: undefined,
+  highContrastMode: undefined,
+  themeLanguage: 'language--js',
+  i18n: 'en',
+  setContext: () => {},
 });
 
-type State = Pick<ThemeContextType, 'theme' | 'themeLanguage'>;
+type State = Pick<
+  ThemeContextType,
+  'theme' | 'colorMode' | 'highContrastMode' | 'themeLanguage' | 'i18n'
+>;
 
 export class ThemeProvider extends React.Component<PropsWithChildren, State> {
   constructor(props: object) {
@@ -50,69 +57,96 @@ export class ThemeProvider extends React.Component<PropsWithChildren, State> {
     const theme = localStorage.getItem('theme') || undefined;
     applyTheme(theme && THEME_NAMES.includes(theme) ? theme : THEME_NAMES[0]);
 
+    const colorMode =
+      (localStorage.getItem('colorMode') as EuiThemeColorModeStandard) ||
+      undefined;
+
+    const highContrastMode = localStorage.getItem('highContrastMode')
+      ? localStorage.getItem('highContrastMode') === 'true'
+      : undefined;
+
+    const i18n = (localStorage.getItem('i18n') as any) || 'en';
+
     const themeLanguage = this.getThemeLanguage();
 
     this.state = {
       theme,
+      colorMode,
+      highContrastMode,
+      i18n,
       themeLanguage,
     };
   }
 
-  changeTheme = (themeValue: EUI_THEME['value']) => {
-    this.setState({ theme: themeValue }, () => {
-      localStorage.setItem('theme', themeValue);
-      applyTheme(themeValue);
-    });
+  setContext = (state: Partial<State>) => {
+    this.setState(state as State);
   };
 
+  componentDidUpdate(_prevProps: never, prevState: State) {
+    const stateToSetInLocalStorage = [
+      'theme',
+      'colorMode',
+      'highContrastMode',
+      'i18n',
+      'themeLanguage',
+    ] as const;
+
+    stateToSetInLocalStorage.forEach((key) => {
+      if (prevState[key] !== this.state[key]) {
+        localStorage.setItem(key, String(this.state[key]));
+
+        // Side effects
+        if (key === 'theme') {
+          applyTheme(this.state.theme);
+        }
+        if (key === 'themeLanguage') {
+          this.setThemeLanguageParam(this.state.themeLanguage!);
+        }
+      }
+    });
+  }
+
   getThemeLanguage = () => {
     // Allow theme language to be set by URL param, so we can link people
     // to specific docs, e.g. ?themeLanguage=js, ?themeLanguage=sass
     // Note that because of our hash router, this logic only works on page load/full reload
     const urlParams = window?.location?.href?.split('?')[1]; // Note: we can't use location.search because of our hash router
-    const fromUrlParam = new URLSearchParams(urlParams).get(URL_PARAM_KEY);
+    const fromUrlParam = new URLSearchParams(urlParams).get('themeLanguage');
     // Otherwise, obtain it from localStorage
-    const fromLocalStorage = localStorage.getItem(STYLE_STORAGE_KEY);
+    const fromLocalStorage = localStorage.getItem('themeLanguage');
 
-    let themeLanguage = (
+    const themeLanguage = (
       fromUrlParam ? `language--${fromUrlParam}` : fromLocalStorage
-    ) as THEME_LANGUAGES['id'];
+    ) as ThemeLanguages['id'];
 
     // If not set by either param or storage, or an invalid value, use the default
-    if (!themeLanguage || !THEME_LANGS.includes(themeLanguage))
-      themeLanguage = THEME_LANGS[0];
-
-    return themeLanguage;
+    return themeLanguage || 'language--js';
   };
 
-  setThemeLanguageParam = (languageKey: THEME_LANGUAGES['id']) => {
+  setThemeLanguageParam = (languageKey: ThemeLanguages['id']) => {
     const languageValue = languageKey.replace('language--', ''); // Make our params more succinct
     const hash = window?.location?.hash?.split('?'); // Note: we can't use location.search because of our hash router
 
     const queryParams = hash[1];
     const params = new URLSearchParams(queryParams);
-    params.set(URL_PARAM_KEY, languageValue);
+    params.set('themeLanguage', languageValue);
 
     window.location.hash = `${hash[0]}?${params.toString()}`;
   };
 
-  changeThemeLanguage = (language: THEME_LANGUAGES['id']) => {
-    this.setState({ themeLanguage: language }, () => {
-      localStorage.setItem(STYLE_STORAGE_KEY, language);
-      this.setThemeLanguageParam(language);
-    });
-  };
-
   render() {
     const { children } = this.props;
-    const { theme, themeLanguage } = this.state;
+    const { theme, colorMode, highContrastMode, i18n, themeLanguage } =
+      this.state;
     return (
       <ThemeContext.Provider
         value={{
           theme,
+          colorMode,
+          highContrastMode,
+          i18n,
           themeLanguage,
-          changeTheme: this.changeTheme,
-          changeThemeLanguage: this.changeThemeLanguage,
+          setContext: this.setContext,
         }}
       >
         {children}
diff --git a/packages/eui/src-docs/src/index.js b/packages/eui/src-docs/src/index.js
index a69a07e3613..7132f648180 100644
--- a/packages/eui/src-docs/src/index.js
+++ b/packages/eui/src-docs/src/index.js
@@ -10,16 +10,11 @@ import { AppContext } from './views/app_context';
 import { AppView } from './views/app_view';
 import { HomeView } from './views/home/home_view';
 import { NotFoundView } from './views/not_found/not_found_view';
-import { registerTheme, ExampleContext } from './services';
+import { ExampleContext } from './services';
 
 import Routes from './routes';
-import themeLight from './theme_light.scss';
-import themeDark from './theme_dark.scss';
 import { ThemeProvider } from './components/with_theme/theme_context';
 
-registerTheme('light', [themeLight]);
-registerTheme('dark', [themeDark]);
-
 // Set up app
 
 // Whether the docs app should be wrapped in <StrictMode>
diff --git a/packages/eui/src-docs/src/routes.js b/packages/eui/src-docs/src/routes.js
index 8038e2fa687..9a0f95448a3 100644
--- a/packages/eui/src-docs/src/routes.js
+++ b/packages/eui/src-docs/src/routes.js
@@ -245,6 +245,7 @@ import { SuperSelectExample } from './views/super_select/super_select_example';
 
 import { ThemeExample } from './views/theme/theme_example';
 import { ColorModeExample } from './views/theme/color_mode/color_mode_example';
+import { HighContrastModeExample } from './views/theme/high_contrast_mode/high_contrast_mode_example';
 import { BreakpointsExample } from './views/theme/breakpoints/breakpoints_example';
 import Borders, { bordersSections } from './views/theme/borders/borders';
 import Color, { colorsInfo, colorsSections } from './views/theme/color/tokens';
@@ -431,6 +432,7 @@ const navigation = [
     items: [
       createExample(ThemeExample, 'Theme provider'),
       createExample(ColorModeExample),
+      createExample(HighContrastModeExample),
       createTabbedPage(BreakpointsExample),
       {
         name: 'Borders',
diff --git a/packages/eui/src-docs/src/services/playground/_index.scss b/packages/eui/src-docs/src/services/playground/_index.scss
index 977aadec204..bc06493c253 100644
--- a/packages/eui/src-docs/src/services/playground/_index.scss
+++ b/packages/eui/src-docs/src/services/playground/_index.scss
@@ -1,2 +1 @@
 @import './playground_compiler';
-@import './playground_knobs';
diff --git a/packages/eui/src-docs/src/services/playground/_playground_compiler.scss b/packages/eui/src-docs/src/services/playground/_playground_compiler.scss
index 0434661ddf8..1c59e887421 100644
--- a/packages/eui/src-docs/src/services/playground/_playground_compiler.scss
+++ b/packages/eui/src-docs/src/services/playground/_playground_compiler.scss
@@ -11,10 +11,6 @@
   flex-shrink: 0;
 }
 
-.playground__tableWrapper {
-  background-color: $euiPageBackgroundColor;
-}
-
 .playground__title {
   padding: $euiSizeS $euiSize;
 }
diff --git a/packages/eui/src-docs/src/services/playground/_playground_knobs.scss b/packages/eui/src-docs/src/services/playground/_playground_knobs.scss
deleted file mode 100644
index 221dde4ad48..00000000000
--- a/packages/eui/src-docs/src/services/playground/_playground_knobs.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$knobTableRowMinHeight: 42px;
-
-.playgroundKnobs__rowCell {
-  min-height: $knobTableRowMinHeight;
-  display: block;
-}
diff --git a/packages/eui/src-docs/src/services/playground/knobs.js b/packages/eui/src-docs/src/services/playground/knobs.js
index 22a2a33aea2..cc3ba291a19 100644
--- a/packages/eui/src-docs/src/services/playground/knobs.js
+++ b/packages/eui/src-docs/src/services/playground/knobs.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { assertUnreachable, PropTypes } from 'react-view';
 import {
+  useEuiTheme,
   useIsWithinBreakpoints,
   EuiTitle,
   EuiCodeBlock,
@@ -22,7 +23,6 @@ import {
   EuiTextArea,
   EuiFormRow,
   EuiText,
-  EuiPanel,
   EuiMarkdownFormat,
 } from '../../../../src';
 import {
@@ -480,7 +480,6 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
           key={`modify__${name}-${idx}`}
           header={isPlayground ? 'Modify' : 'Default value'}
           textOnly={false}
-          className={isPlayground ? 'playgroundKnobs__rowCell' : undefined}
         >
           {isPlayground ? (
             <Knob
@@ -511,6 +510,7 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
 };
 
 const Knobs = ({ state, set, error, isPlayground = true }) => {
+  const { euiTheme } = useEuiTheme();
   const isMobile = useIsWithinBreakpoints(['xs', 's']);
   const knobNames = Object.keys(state);
 
@@ -532,12 +532,7 @@ const Knobs = ({ state, set, error, isPlayground = true }) => {
   });
 
   return (
-    <EuiPanel
-      color="transparent"
-      paddingSize={isMobile ? 's' : 'none'}
-      hasBorder={false}
-      hasShadow={false}
-    >
+    <div style={isMobile ? { padding: euiTheme.size.s } : undefined}>
       <EuiTable style={{ background: 'transparent' }}>
         <EuiTableHeader>
           {columns.map(({ name, width }, id) => {
@@ -559,7 +554,7 @@ const Knobs = ({ state, set, error, isPlayground = true }) => {
           />
         </EuiTableBody>
       </EuiTable>
-    </EuiPanel>
+    </div>
   );
 };
 
diff --git a/packages/eui/src-docs/src/services/playground/playground.js b/packages/eui/src-docs/src/services/playground/playground.js
index 4b3b468d746..fb44ef31892 100644
--- a/packages/eui/src-docs/src/services/playground/playground.js
+++ b/packages/eui/src-docs/src/services/playground/playground.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 import format from 'html-format';
 
@@ -7,7 +8,6 @@ import {
   EuiCodeBlock,
   EuiFlyoutBody,
   EuiFlyoutHeader,
-  EuiPanel,
   useEuiTheme,
 } from '../../../../src';
 import {
@@ -22,7 +22,6 @@ export default ({
   setGhostBackground,
   playgroundClassName,
   playgroundCssStyles,
-  playgroundPanelProps,
 }) => {
   const getSnippet = (code) => {
     let regex = /return \(([\S\s]*?)(;)$/gm;
@@ -84,27 +83,24 @@ export default ({
             component={config.scope[config.componentName]}
           />
         </EuiFlyoutHeader>
-        <EuiFlyoutHeader className="playground__demoWrapper" hasBorder>
-          <EuiPanel
-            hasBorder={false}
-            color="transparent"
-            borderRadius="none"
-            className={classNames('playground__panel', {
-              guideDemo__ghostBackground: isGhost,
-            })}
-            {...playgroundPanelProps}
-            paddingSize={
-              thrownError ? 'none' : playgroundPanelProps?.paddingSize
-            }
-          >
-            <Compiler
-              css={playgroundCssStyles?.(euiTheme)}
-              {...params.compilerProps}
-              placeholder={Placeholder}
-              className={classNames('playground__demo', playgroundClassName)}
-            />
-            {thrownError && <EuiErrorMessage errorMessage={thrownError} />}
-          </EuiPanel>
+        <EuiFlyoutHeader
+          className={classNames('playground__demoWrapper', {
+            guideDemo__ghostBackground: isGhost,
+          })}
+          hasBorder
+        >
+          <Compiler
+            css={css([
+              !thrownError
+                ? { padding: euiTheme.euiTheme.size.base }
+                : undefined,
+              playgroundCssStyles?.(euiTheme),
+            ])}
+            {...params.compilerProps}
+            placeholder={Placeholder}
+            className={classNames('playground__demo', playgroundClassName)}
+          />
+          {thrownError && <EuiErrorMessage errorMessage={thrownError} />}
         </EuiFlyoutHeader>
         <EuiFlyoutHeader className="playground__codeWrapper" hasBorder>
           <EuiCodeBlock
@@ -113,6 +109,7 @@ export default ({
             fontSize="m"
             paddingSize="m"
             isCopyable
+            css={{ border: 'none' }} // Avoid duplicate borders in high contrast mode
           >
             {getSnippet(params.editorProps.code)}
           </EuiCodeBlock>
diff --git a/packages/eui/src-docs/src/services/theme/theme.js b/packages/eui/src-docs/src/services/theme/theme.js
index a3bbf6030c2..316ac207bc6 100644
--- a/packages/eui/src-docs/src/services/theme/theme.js
+++ b/packages/eui/src-docs/src/services/theme/theme.js
@@ -4,9 +4,9 @@ export function registerTheme(theme, cssFiles) {
   themes[theme] = cssFiles;
 }
 
-export function applyTheme(newTheme) {
+export function applyTheme(newTheme, colorMode = 'LIGHT') {
   Object.keys(themes).forEach((theme) =>
-    themes[theme].forEach((cssFile) => cssFile.unuse())
+    Object.values(themes[theme]).forEach((cssFile) => cssFile.unuse())
   );
-  themes[newTheme]?.forEach((cssFile) => cssFile.use());
+  themes[newTheme]?.[colorMode]?.use();
 }
diff --git a/packages/eui/src-docs/src/store/configure_store.js b/packages/eui/src-docs/src/store/configure_store.js
index bcd8efc8540..0f4ea4addbf 100644
--- a/packages/eui/src-docs/src/store/configure_store.js
+++ b/packages/eui/src-docs/src/store/configure_store.js
@@ -3,18 +3,13 @@ import thunk from 'redux-thunk';
 
 import Routes from '../routes';
 
-import localeReducer from './reducers/locale_reducer';
-import themeReducer from './reducers/theme_reducer';
-
 /**
  * @param {Object} initialState An object defining the application's initial
  * state.
  */
 export default function configureStore(initialState) {
-  function rootReducer(state = {}, action) {
+  function rootReducer() {
     return {
-      theme: themeReducer(state.theme, action),
-      locale: localeReducer(state.locale, action),
       routes: Routes,
     };
   }
diff --git a/packages/eui/src-docs/src/store/index.js b/packages/eui/src-docs/src/store/index.js
index 04ef96b83ea..8421502c9c9 100644
--- a/packages/eui/src-docs/src/store/index.js
+++ b/packages/eui/src-docs/src/store/index.js
@@ -1,11 +1,3 @@
-export function getTheme(state) {
-  return state.theme.theme;
-}
-
 export function getRoutes(state) {
   return state.routes;
 }
-
-export function getLocale(state) {
-  return state.locale.locale;
-}
diff --git a/packages/eui/src-docs/src/views/app_context.js b/packages/eui/src-docs/src/views/app_context.js
index 729f4c94079..f5ecad2f8fb 100644
--- a/packages/eui/src-docs/src/views/app_context.js
+++ b/packages/eui/src-docs/src/views/app_context.js
@@ -1,10 +1,8 @@
 import React, { useContext } from 'react';
 import { Helmet } from 'react-helmet';
-import { useSelector } from 'react-redux';
 import createCache from '@emotion/cache';
 import { ThemeContext } from '../components';
 import { translateUsingPseudoLocale } from '../services';
-import { getLocale } from '../store';
 
 import { EuiContext, EuiProvider } from '../../../src/components';
 import {
@@ -33,18 +31,7 @@ const utilityCache = createCache({
 });
 
 export const AppContext = ({ children }) => {
-  const { theme } = useContext(ThemeContext);
-  const locale = useSelector((state) => getLocale(state));
-
-  const mappingFuncs = {
-    'en-xa': translateUsingPseudoLocale,
-  };
-
-  const i18n = {
-    mappingFunc: mappingFuncs[locale],
-    formatNumber: (value) => new Intl.NumberFormat(locale).format(value),
-    locale,
-  };
+  const { theme, colorMode, highContrastMode, i18n } = useContext(ThemeContext);
 
   const isLocalDev = window.location.host.includes('803');
   setEuiDevProviderWarning(isLocalDev ? 'error' : 'warn'); // Note: this can't be in a useEffect, otherwise it fires too late for style memoization warnings to error on page reload
@@ -56,9 +43,8 @@ export const AppContext = ({ children }) => {
         utility: utilityCache,
       }}
       theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
-      colorMode={
-        theme ? (theme.includes('light') ? 'light' : 'dark') : undefined
-      }
+      colorMode={colorMode}
+      highContrastMode={highContrastMode}
     >
       <Helmet>
         <link
@@ -86,7 +72,16 @@ export const AppContext = ({ children }) => {
           rel="stylesheet"
         />
       </Helmet>
-      <EuiContext i18n={i18n}>{children}</EuiContext>
+      <EuiContext
+        i18n={{
+          locale: i18n,
+          mappingFunc:
+            i18n === 'en-xa' ? translateUsingPseudoLocale : undefined,
+          formatNumber: (value) => new Intl.NumberFormat(i18n).format(value),
+        }}
+      >
+        {children}
+      </EuiContext>
     </EuiProvider>
   );
 };
diff --git a/packages/eui/src-docs/src/views/app_view.js b/packages/eui/src-docs/src/views/app_view.js
index 8911d2a8332..91a094ef143 100644
--- a/packages/eui/src-docs/src/views/app_view.js
+++ b/packages/eui/src-docs/src/views/app_view.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import { toggleLocale as _toggleLocale } from '../actions';
 import { GuidePageChrome, GuidePageHeader } from '../components';
-import { getLocale, getRoutes } from '../store';
+import { getRoutes } from '../store';
 import {
   useScrollToHash,
   useHeadingAnchorLinks,
@@ -17,9 +16,6 @@ import {
 } from '../../../src/components';
 
 export const AppView = ({ children, currentRoute = {} }) => {
-  const dispatch = useDispatch();
-  const toggleLocale = (locale) => dispatch(_toggleLocale(locale));
-  const locale = useSelector((state) => getLocale(state));
   const routes = useSelector((state) => getRoutes(state));
 
   const portalledHeadingAnchorLinks = useHeadingAnchorLinks();
@@ -43,7 +39,7 @@ export const AppView = ({ children, currentRoute = {} }) => {
         Skip to content
       </EuiSkipLink>
       {portalledHeadingAnchorLinks}
-      <GuidePageHeader onToggleLocale={toggleLocale} selectedLocale={locale} />
+      <GuidePageHeader />
       <EuiPageTemplate
         paddingSize="none"
         restrictWidth={false}
@@ -53,8 +49,6 @@ export const AppView = ({ children, currentRoute = {} }) => {
           <GuidePageChrome
             currentRoute={currentRoute}
             navigation={routes.navigation}
-            onToggleLocale={toggleLocale}
-            selectedLocale={locale}
           />
         </EuiPageTemplate.Sidebar>
 
diff --git a/packages/eui/src-docs/src/views/button/button_example.js b/packages/eui/src-docs/src/views/button/button_example.js
index ae68720535b..de45613eb1f 100644
--- a/packages/eui/src-docs/src/views/button/button_example.js
+++ b/packages/eui/src-docs/src/views/button/button_example.js
@@ -15,7 +15,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiCard,
-  EuiPanel,
   EuiSpacer,
 } from '../../../../src/components';
 
@@ -281,71 +280,56 @@ export const ButtonExample = {
         <>
           <EuiSpacer size="xl" />
           <EuiFlexGroup wrap>
-            <EuiFlexItem>
-              <EuiCard
-                hasBorder
-                href="#/navigation/button#basic-button"
-                image={
-                  <EuiPanel color="subdued" borderRadius="none">
-                    <EuiPanel color="subdued">
-                      <EuiButton fill>Primary action</EuiButton>
-                    </EuiPanel>
-                  </EuiPanel>
-                }
-                title="EuiButton"
-                titleSize="xs"
-              />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiCard
-                hasBorder
-                href="#/navigation/button#basic-button"
-                image={
-                  <EuiPanel color="subdued" borderRadius="none">
-                    <EuiPanel color="subdued">
-                      <EuiButton>Secondary action</EuiButton>
-                    </EuiPanel>
-                  </EuiPanel>
-                }
-                title="EuiButton"
-                titleSize="xs"
-              />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiCard
-                hasBorder
-                href="#/navigation/button#empty-button"
-                image={
-                  <EuiPanel color="subdued" borderRadius="none">
-                    <EuiPanel color="subdued">
-                      <EuiButtonEmpty>Tertiary action</EuiButtonEmpty>
-                    </EuiPanel>
-                  </EuiPanel>
-                }
-                title="EuiButtonEmpty"
-                titleSize="xs"
-              />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiCard
-                hasBorder
-                href="#/navigation/button#icon-buttons"
-                image={
-                  <EuiPanel color="subdued" borderRadius="none">
-                    <EuiPanel color="subdued">
-                      <EuiButtonIcon
-                        display="base"
-                        size="m"
-                        iconType="refresh"
-                        aria-label="Button icon example with refresh icon"
-                      />
-                    </EuiPanel>
-                  </EuiPanel>
-                }
-                title="EuiButtonIcon"
-                titleSize="xs"
-              />
-            </EuiFlexItem>
+            {[
+              {
+                title: 'EuiButton',
+                children: <EuiButton fill>Primary action</EuiButton>,
+                href: '#/navigation/button#basic-button',
+              },
+              {
+                title: 'EuiButton',
+                children: <EuiButton>Secondary action</EuiButton>,
+                href: '#/navigation/button#basic-button',
+              },
+              {
+                title: 'EuiButtonEmpty',
+                children: <EuiButtonEmpty>Tertiary action</EuiButtonEmpty>,
+                href: '#/navigation/button#empty-button',
+              },
+              {
+                title: 'EuiButtonIcon',
+                children: (
+                  <EuiButtonIcon
+                    display="base"
+                    size="m"
+                    iconType="refresh"
+                    aria-label="Button icon example with refresh icon"
+                  />
+                ),
+                href: '#/navigation/button#icon-buttons',
+              },
+              // eslint-disable-next-line local/href-with-rel
+            ].map(({ title, children, href }) => (
+              <EuiFlexItem>
+                <EuiCard
+                  hasBorder
+                  href={href}
+                  image={
+                    <div
+                      css={({ euiTheme }) => ({
+                        padding: euiTheme.size.xl,
+                        backgroundColor: euiTheme.colors.body,
+                        borderBlockEnd: euiTheme.border.thin,
+                      })}
+                    >
+                      {children}
+                    </div>
+                  }
+                  title={title}
+                  titleSize="xs"
+                />
+              </EuiFlexItem>
+            ))}
           </EuiFlexGroup>
         </>
       ),
diff --git a/packages/eui/src-docs/src/views/comment/comment_props.tsx b/packages/eui/src-docs/src/views/comment/comment_props.tsx
index d81a6c725ce..8059a133a62 100644
--- a/packages/eui/src-docs/src/views/comment/comment_props.tsx
+++ b/packages/eui/src-docs/src/views/comment/comment_props.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import { css } from '@emotion/react';
 
 import {
-  EuiPanel,
   EuiButtonIcon,
   EuiCommentList,
   EuiComment,
@@ -50,11 +49,7 @@ export default ({ snippet }: { snippet: ReactNode }) => {
   );
 
   return (
-    <EuiPanel
-      color="transparent"
-      paddingSize="none"
-      style={{ maxWidth: '540px' }}
-    >
+    <div style={{ maxWidth: '540px' }}>
       <EuiCommentList>
         <EuiComment username="avatar" timelineAvatarAriaLabel="Avatar">
           <div
@@ -149,6 +144,6 @@ export default ({ snippet }: { snippet: ReactNode }) => {
           {snippet}
         </EuiCodeBlock>
       </EuiAccordion>
-    </EuiPanel>
+    </div>
   );
 };
diff --git a/packages/eui/src-docs/src/views/provider/provider_example.js b/packages/eui/src-docs/src/views/provider/provider_example.js
index 0808935cb91..00e7420617c 100644
--- a/packages/eui/src-docs/src/views/provider/provider_example.js
+++ b/packages/eui/src-docs/src/views/provider/provider_example.js
@@ -64,20 +64,15 @@ export const ProviderExample = {
         <EuiText>
           <p>
             To customize the global theme of your app, use the{' '}
-            <EuiCode>theme</EuiCode>, <EuiCode>colorMode</EuiCode>, and{' '}
-            <EuiCode>modify</EuiCode> props (documented in{' '}
+            <EuiCode>theme</EuiCode> and <EuiCode>modify</EuiCode> props
+            (documented in{' '}
             <Link to="/theming/theme-provider">
               <strong>EuiThemeProvider</strong>
             </Link>
-            ). For instance, it&apos;s likely that you will want to implement
-            color mode switching at the top level:
+            ). The <EuiCode>colorMode</EuiCode> and{' '}
+            <EuiCode>highContrastMode</EuiCode> props automatically default to
+            the users' system settings, but can also be overridden if needed.
           </p>
-
-          <EuiCodeBlock language="tsx" fontSize="m" isCopyable>
-            {"<EuiProvider colorMode={isDark ? 'dark' : 'light'} />"}
-          </EuiCodeBlock>
-          <EuiSpacer />
-
           <p>
             If you do not wish your app to include EUI's default global reset
             CSS or{' '}
diff --git a/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx b/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx
index 895a2bc858d..82cda9c51b8 100644
--- a/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx
+++ b/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx
@@ -48,7 +48,7 @@ export const ThemeExample: FunctionComponent<ThemeExample> = ({
   snippetLanguage = 'jsx',
   props,
 }) => {
-  const { euiTheme } = useEuiTheme();
+  const { euiTheme, highContrastMode } = useEuiTheme();
   const isLargeBreakpoint = useIsWithinBreakpoints(['m', 'l', 'xl']);
 
   const finalSnippet =
@@ -146,6 +146,8 @@ export const ThemeExample: FunctionComponent<ThemeExample> = ({
                     language={
                       snippetLanguage === 'emotion' ? 'jsx' : snippetLanguage
                     }
+                    // Code block is used within a panel which already has a border - skip doubling up
+                    {...(highContrastMode && { css: { border: 'none' } })}
                   >
                     {finalSnippet}
                   </EuiCodeBlock>
diff --git a/packages/eui/src-docs/src/views/theme/_theme_section.tsx b/packages/eui/src-docs/src/views/theme/_theme_section.tsx
index 23b85a412b1..9e064e174f1 100644
--- a/packages/eui/src-docs/src/views/theme/_theme_section.tsx
+++ b/packages/eui/src-docs/src/views/theme/_theme_section.tsx
@@ -70,6 +70,10 @@ export const ThemeSection: FunctionComponent<ThemeSection> = ({
                   paddingSize="none"
                   transparentBackground={true}
                   language="jsx"
+                  // Code block is used within a panel which already has a border - skip doubling up
+                  css={({ highContrastMode }) =>
+                    highContrastMode ? { border: 'none' } : undefined
+                  }
                 >
                   {finalSnippet}
                 </EuiCodeBlock>
diff --git a/packages/eui/src-docs/src/views/theme/color/_color_js.tsx b/packages/eui/src-docs/src/views/theme/color/_color_js.tsx
index b4749bb0575..2669dd680fe 100644
--- a/packages/eui/src-docs/src/views/theme/color/_color_js.tsx
+++ b/packages/eui/src-docs/src/views/theme/color/_color_js.tsx
@@ -315,7 +315,7 @@ const cssStyles = [colorStyles['accent']];
         type="hook"
         props={`color: '${BACKGROUND_COLORS.join("' | '")}';
 
-method? 'opaque' | 'transparent';`}
+method?: 'opaque' | 'transparent';`}
         description={
           <p>
             Returns just the computed background color for the given{' '}
diff --git a/packages/eui/src-docs/src/views/theme/color/contrast.tsx b/packages/eui/src-docs/src/views/theme/color/contrast.tsx
index e9a96a4c286..f95c739afbb 100644
--- a/packages/eui/src-docs/src/views/theme/color/contrast.tsx
+++ b/packages/eui/src-docs/src/views/theme/color/contrast.tsx
@@ -115,7 +115,11 @@ export default () => {
 
       {/* This wrapping div for the sticky positioning */}
       <div>
-        <GuideSection color="warning" className="guideColorsPage__stickySlider">
+        <GuideSection
+          color="warning"
+          className="guideColorsPage__stickySlider"
+          css={{ borderBlock: euiTheme.euiTheme.border.thin }}
+        >
           <EuiTitle size="xs">
             <h3>
               Use the slider and toggle to adjust the color combinations shown
diff --git a/packages/eui/src-docs/src/views/theme/color/tokens.tsx b/packages/eui/src-docs/src/views/theme/color/tokens.tsx
index cf9433c7545..453f160c025 100644
--- a/packages/eui/src-docs/src/views/theme/color/tokens.tsx
+++ b/packages/eui/src-docs/src/views/theme/color/tokens.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { EuiCode, EuiSpacer, EuiText } from '../../../../../src';
+import { EuiCallOut, EuiCode, EuiSpacer, EuiText } from '../../../../../src';
 import { GuideSection } from '../../../components/guide_section/guide_section';
 
 import { ThemeContext } from '../../../components/with_theme';
@@ -33,20 +33,28 @@ export const colorsInfo = {
   notice: <ThemeNotice />,
   showThemeLanguageToggle: true,
   intro: (
-    <EuiText grow={false}>
-      <p>
-        Elastic UI builds with a very limited palette. It uses a core set of
-        three colors with a green / orange / red qualitative set and combined
-        with a six-color grayscale. Variation beyond these colors is minimal and
-        always done with math manipulation against the original set.
-      </p>
-      <p>
-        When switching between light and dark color modes, the theme keys do not
-        change, only their values do. This is why most keys are not named for
-        their <strong>evaluated</strong> value but by their{' '}
-        <strong>purpose</strong>.
-      </p>
-    </EuiText>
+    <>
+      <EuiText grow={false}>
+        <p>
+          Elastic UI builds with a very limited palette. It uses a core set of
+          three colors with a green / orange / red qualitative set and combined
+          with a six-color grayscale. Variation beyond these colors is minimal
+          and always done with math manipulation against the original set.
+        </p>
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiCallOut iconType="accessibility" title="Colors and accessibility">
+        Never rely solely on color to convey meaning. Colors can be overridden
+        by{' '}
+        <Link to="/theming/high-contrast-mode/#forced-contrast-themes-and-colors">
+          system forced colors
+        </Link>
+        , or can be difficult to distinguish for different users. Always combine
+        color context with accompanying <Link to="/display/icons">icons</Link>{' '}
+        or <Link to="/guidelines/writing">copy</Link> to indicate states such as
+        error, activity, etc.
+      </EuiCallOut>
+    </>
   ),
 };
 
@@ -126,6 +134,12 @@ export default () => {
             statefulness like indicating between successful and dangerous
             actions.
           </p>
+          <p>
+            When switching between light and dark color modes, the theme keys do
+            not change, only their values do. This is why most keys are not
+            named for their <strong>evaluated</strong> value but by their{' '}
+            <strong>purpose</strong>.
+          </p>
         </EuiText>
 
         <EuiSpacer size="xl" />
diff --git a/packages/eui/src-docs/src/views/theme/color_mode/_color_mode_intro.tsx b/packages/eui/src-docs/src/views/theme/color_mode/_color_mode_intro.tsx
index c856a47c338..83436bc4ea8 100644
--- a/packages/eui/src-docs/src/views/theme/color_mode/_color_mode_intro.tsx
+++ b/packages/eui/src-docs/src/views/theme/color_mode/_color_mode_intro.tsx
@@ -20,6 +20,12 @@ export default () => {
             The <EuiCode>colorMode</EuiCode> determines which values to return
             based on <EuiCode>LIGHT</EuiCode> or <EuiCode>DARK</EuiCode> mode.
           </p>
+          <p>
+            By default, if this prop is not passed, <strong>EuiProvider</strong>{' '}
+            will detect and use the user's system dark mode preference. If the
+            prop <em>is</em> passed, it will override the user's system
+            settings.
+          </p>
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem>
diff --git a/packages/eui/src-docs/src/views/theme/high_contrast_mode/high_contrast_mode_example.js b/packages/eui/src-docs/src/views/theme/high_contrast_mode/high_contrast_mode_example.js
new file mode 100644
index 00000000000..13feda32737
--- /dev/null
+++ b/packages/eui/src-docs/src/views/theme/high_contrast_mode/high_contrast_mode_example.js
@@ -0,0 +1,119 @@
+import React from 'react';
+
+import { GuideSectionTypes } from '../../../components';
+
+import { EuiCallOut, EuiCode, EuiLink, EuiText } from '../../../../../src';
+
+import Rendering from './rendering';
+const RenderingSource = require('!!raw-loader!./rendering');
+
+import Reacting from './reacting';
+const ReactingSource = require('!!raw-loader!./reacting');
+
+export const HighContrastModeExample = {
+  title: 'High contrast mode',
+  isBeta: true,
+  intro: (
+    <EuiText>
+      <p>
+        The <EuiCode>highContrastMode</EuiCode> determines and sets certain
+        un-overrideable modifications to the EUI theme, primarily around borders
+        and shadows. Borders will always be pure black or white (depending on
+        the color mode), and shadows will be entirely replaced with borders.
+      </p>
+      <p>
+        By default, if this prop is not passed, <strong>EuiProvider</strong>{' '}
+        will detect and use the user's system contrast preferences.
+      </p>
+    </EuiText>
+  ),
+  sections: [
+    {
+      title: 'Rendering a specific contrast mode',
+      text: (
+        <>
+          <p>
+            While it's usually best to keep all high contrast mode the same
+            across your app for visual consistency, some instances may benefit
+            from an exaggerated change in contrast. For this you can set{' '}
+            <strong>EuiThemeProvider</strong>'s{' '}
+            <EuiCode>highContrastMode</EuiCode> to <EuiCode>true</EuiCode>.
+          </p>
+          <EuiCallOut
+            color="warning"
+            iconType="warning"
+            title={
+              <>
+                In general, we do not ever recommend manually turning off high
+                contrast via <EuiCode>highContrastMode={'{false}'}</EuiCode>.
+                Respect the user's contrast preferences where possible.
+              </>
+            }
+          />
+        </>
+      ),
+      demo: <Rendering />,
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: RenderingSource,
+        },
+      ],
+    },
+    {
+      title: 'Forced contrast themes and colors',
+      text: (
+        <>
+          <p>
+            Please note that some OSes and browsers have something called{' '}
+            <EuiLink
+              href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors"
+              target="_blank"
+            >
+              forced colors mode
+            </EuiLink>
+            , which overrides <strong>all</strong> colors, backgrounds, borders,
+            and shadows. An example of this is Windows High Contrast modes.
+          </p>
+          <p>
+            Since this is done at a level that EUI can do nothing about, if
+            forced colors mode is detected by <strong>EuiProvider</strong>, EUI
+            will ignore any passed <EuiCode>highContrastMode</EuiCode> or{' '}
+            <EuiCode>colorMode</EuiCode> props, as this user choice and system
+            setting takes precedence.
+          </p>
+          <EuiCallOut>
+            To quickly test your application in forced colors mode without
+            switching OS themes, you can{' '}
+            <EuiLink
+              href="https://devtoolstips.org/tips/en/emulate-forced-colors/"
+              target="_blank"
+            >
+              use Chrome or Edge's devtools to emulate forced-colors mode.
+            </EuiLink>
+          </EuiCallOut>
+        </>
+      ),
+    },
+    {
+      title: 'Reacting to user high contrast modes',
+      text: (
+        <p>
+          The detected or current highContrastMode is available via
+          <EuiCode>useEuiTheme()</EuiCode>. It returns either{' '}
+          <EuiCode>"forced"</EuiCode>, <EuiCode>"preferred"</EuiCode>, or simply{' '}
+          <EuiCode>false</EuiCode>. You can use this information to (for
+          example) conditionally render or opt out of rendering certain styles
+          or colors.
+        </p>
+      ),
+      demo: <Reacting />,
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: ReactingSource,
+        },
+      ],
+    },
+  ],
+};
diff --git a/packages/eui/src-docs/src/views/theme/high_contrast_mode/reacting.tsx b/packages/eui/src-docs/src/views/theme/high_contrast_mode/reacting.tsx
new file mode 100644
index 00000000000..59a58474d1c
--- /dev/null
+++ b/packages/eui/src-docs/src/views/theme/high_contrast_mode/reacting.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useEuiTheme, EuiPanel } from '../../../../../src';
+
+export default () => {
+  const { highContrastMode, euiTheme } = useEuiTheme();
+
+  return (
+    <EuiPanel
+      hasBorder={!!highContrastMode}
+      css={highContrastMode ? { border: euiTheme.border.thick } : {}}
+    >
+      This panel will have a thick border in high contrast mode.
+    </EuiPanel>
+  );
+};
diff --git a/packages/eui/src-docs/src/views/theme/high_contrast_mode/rendering.tsx b/packages/eui/src-docs/src/views/theme/high_contrast_mode/rendering.tsx
new file mode 100644
index 00000000000..68e2ea74f1c
--- /dev/null
+++ b/packages/eui/src-docs/src/views/theme/high_contrast_mode/rendering.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import {
+  EuiThemeProvider,
+  EuiBasicTable,
+  EuiBasicTableColumn,
+} from '../../../../../src';
+
+type User = {
+  firstName: string;
+  lastName: string;
+};
+
+const users: User[] = [];
+for (let i = 0; i < 5; i++) {
+  users.push({
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+  });
+}
+
+const columns: Array<EuiBasicTableColumn<User>> = [
+  {
+    field: 'firstName',
+    name: 'First name',
+  },
+  {
+    field: 'lastName',
+    name: 'Last name',
+  },
+];
+
+export default () => {
+  return (
+    <EuiThemeProvider highContrastMode={true}>
+      <EuiBasicTable
+        columns={columns}
+        items={users}
+        compressed
+        responsiveBreakpoint={false}
+      />
+    </EuiThemeProvider>
+  );
+};
diff --git a/packages/eui/src-docs/src/views/theme/other/_shadow_js.tsx b/packages/eui/src-docs/src/views/theme/other/_shadow_js.tsx
index ff1b2f395e5..ac0f125023d 100644
--- a/packages/eui/src-docs/src/views/theme/other/_shadow_js.tsx
+++ b/packages/eui/src-docs/src/views/theme/other/_shadow_js.tsx
@@ -28,7 +28,7 @@ const RenderShadow = ({
   size: _EuiThemeShadowSize;
   color?: string;
 }) => {
-  const style = useEuiShadow(size, color);
+  const style = useEuiShadow(size, { color });
   return (
     <div
       className="guideSass__shadow"
@@ -40,7 +40,7 @@ const RenderShadow = ({
 };
 
 const RenderFlatShadow = ({ color }: { color?: string }) => {
-  const style = useEuiShadowFlat(color);
+  const style = useEuiShadowFlat({ color });
   return (
     <div
       className="guideSass__shadow"
@@ -91,8 +91,15 @@ export default () => {
       />
 
       <ThemeExample
-        title={<code>useEuiShadow(size)</code>}
         type="hook"
+        title={<code>useEuiShadow(size, options)</code>}
+        props={`size?: '${EuiThemeShadowSizes.join("' | '")}';
+
+options?: {
+  color?: string;
+  property?: 'box-shadow' | 'filter';
+  borderAllInHighContrastMode?: boolean;
+};`}
         description={
           <>
             <p>
@@ -102,7 +109,7 @@ export default () => {
             </p>
             <p>
               Usually you want to avoid putting shadows on containers with the
-              same background color of its parent (e.g. white on white);
+              same background color of its parent (e.g. white on white).
             </p>
           </>
         }
@@ -131,7 +138,7 @@ export const ShadowValuesJS = () => {
     return {
       id: shadow,
       token: customColor
-        ? `useEuiShadow('${shadow}', euiTheme.colors.accent);`
+        ? `useEuiShadow('${shadow}', { color: euiTheme.colors.accent });`
         : `useEuiShadow('${shadow}');`,
       description: _EuiShadowSizesDescriptions[shadow],
     };
@@ -142,7 +149,7 @@ export const ShadowValuesJS = () => {
       // @ts-ignore TODO
       id: 'flat',
       token: customColor
-        ? 'useEuiShadowFlat(euiTheme.colors.accent);'
+        ? 'useEuiShadowFlat({ color: euiTheme.colors.accent });'
         : 'useEuiShadowFlat();',
       description:
         'Similar to shadow medium but without the bottom depth. Useful for popovers that drop UP rather than DOWN.',
diff --git a/packages/eui/src-docs/src/views/theme/other/other.tsx b/packages/eui/src-docs/src/views/theme/other/other.tsx
index 68202c35c23..ec0c3518dbd 100644
--- a/packages/eui/src-docs/src/views/theme/other/other.tsx
+++ b/packages/eui/src-docs/src/views/theme/other/other.tsx
@@ -1,4 +1,5 @@
 import React, { useContext, useMemo } from 'react';
+import { Link } from 'react-router-dom';
 
 import { GuideTabbedPage } from '../../../components/guide_tabbed_page';
 import { ThemeContext } from '../../../components/with_theme';
@@ -139,11 +140,7 @@ export default () => {
 
         <EuiSpacer />
 
-        <EuiCallOut
-          color="warning"
-          iconType="accessibility"
-          title={<code>euiCanAnimate</code>}
-        >
+        <EuiCallOut iconType="accessibility" title={<code>euiCanAnimate</code>}>
           <p>
             For accessbility support, we highly recommend always wrapping
             animations and transitions with this{' '}
@@ -174,6 +171,20 @@ export default () => {
           <h2 id={`${otherSections[1].id}`}>{`${otherSections[1].title}`}</h2>
         </EuiText>
 
+        <EuiSpacer />
+        <EuiCallOut iconType="accessibility" title="Shadows in high contrast">
+          <p>
+            Keep in mind that shadows will not render in{' '}
+            <Link to="/theming/high-contrast-mode">
+              forced high contrast modes
+            </Link>
+            . EUI's shadow utilities automatically replace shadows with bottom
+            borders, which will render better in high contrast modes. These
+            utilities can also be configured to render their high contrast
+            borders around the entire element.
+          </p>
+        </EuiCallOut>
+
         {shadowContent}
       </GuideSection>
 
diff --git a/packages/eui/src-docs/src/views/theme/provider.tsx b/packages/eui/src-docs/src/views/theme/provider.tsx
index 9454943d271..6cab1216518 100644
--- a/packages/eui/src-docs/src/views/theme/provider.tsx
+++ b/packages/eui/src-docs/src/views/theme/provider.tsx
@@ -10,7 +10,7 @@ import {
 } from '../../../../src';
 
 export default () => {
-  const { euiTheme, colorMode } = useEuiTheme();
+  const { euiTheme, colorMode, highContrastMode } = useEuiTheme();
   return (
     <EuiPanel grow={false} paddingSize="l" color="subdued">
       <EuiFlexGroup responsive={false} alignItems="center">
@@ -44,13 +44,13 @@ export default () => {
         <EuiFlexItem grow={false}>
           <EuiText size="s">
             <EuiCode transparentBackground>colorMode:</EuiCode>
+            <code>{colorMode}</code>
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiText size="s" color="subdued">
-            <p>
-              <code>{colorMode}</code>
-            </p>
+          <EuiText size="s">
+            <EuiCode transparentBackground>highContrastMode:</EuiCode>
+            <code>{String(highContrastMode)}</code>
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/packages/eui/src-docs/src/views/theme/theme_example.js b/packages/eui/src-docs/src/views/theme/theme_example.js
index eb88f718b90..9e0f67016ca 100644
--- a/packages/eui/src-docs/src/views/theme/theme_example.js
+++ b/packages/eui/src-docs/src/views/theme/theme_example.js
@@ -33,16 +33,13 @@ export const ThemeExample = {
     <>
       <EuiText>
         <p>
-          EUI is in the progress of switching it&apos;s core styles processor
-          from Sass to <EuiLink href="https://emotion.sh">Emotion</EuiLink>. To
-          take full advantage of this context layer, wrap the root of your
-          application with a single{' '}
+          While{' '}
           <EuiLink href="#utilities/provider">
             <strong>EuiProvider</strong>
-          </EuiLink>
-          . While <strong>EuiProvider</strong> should not be included more than
-          once, you may use multiple nested <strong>EuiThemeProviders</strong>{' '}
-          to customize section-specific or component-specific{' '}
+          </EuiLink>{' '}
+          should not be included more than once at the top level of your app,
+          you may use multiple nested <strong>EuiThemeProviders</strong> to
+          customize section-specific or component-specific{' '}
           <Link to="/theming/color-mode#rendering-a-specific-color-mode">
             color modes
           </Link>{' '}
@@ -57,32 +54,44 @@ export const ThemeExample = {
       text: (
         <>
           <p>
-            The context layer that enables theming (including the default theme
-            styles) comes from <EuiCode>EuiThemeProvider</EuiCode>.{' '}
-            <EuiCode>EuiThemeProvider</EuiCode> accepts three props, all of
-            which have default values and are therefore optional. To use the
-            default EUI theme, no configuration is required.
+            The context layer that enables theming comes from{' '}
+            <EuiCode>EuiThemeProvider</EuiCode>.{' '}
+            <EuiCode>EuiThemeProvider</EuiCode> accepts four main props (all of
+            which have default values and are therefore optional):
           </p>
           <ul>
             <li>
-              <EuiCode language="ts">theme: EuiThemeSystem</EuiCode> Raw theme
-              values. Calculated values are acceptable.
+              <EuiCode language="ts">theme:</EuiCode> Raw theme values.
+              Calculated values are acceptable. For the full shape of an EUI
+              theme, see the{' '}
+              <EuiLink href="#/theming/customizing-themes">
+                global values
+              </EuiLink>{' '}
+              page.
             </li>
             <li>
-              <EuiCode language="ts">colorMode: EuiThemeColorMode</EuiCode>{' '}
-              Simply {"'light'"} or {"'dark'"}
+              <EuiCode language="ts">modify:</EuiCode> Accepts an object of
+              overrides for theme values. For usage examples, see{' '}
+              <EuiLink href="#/theming/theme-provider#simple-instance-overrides">
+                Simple instance overrides
+              </EuiLink>{' '}
+              below.
             </li>
             <li>
-              <EuiCode language="ts">modify: EuiThemeModifications</EuiCode>{' '}
-              Overrides and modifications for theme values.
+              <EuiCode language="ts">colorMode:</EuiCode> Accepts 'light',
+              'dark', or 'inverse'. For usage, see the{' '}
+              <EuiLink href="#/theming/color-mode">Color mode</EuiLink> page.
+            </li>
+            <li>
+              <EuiCode language="ts">highContrastMode:</EuiCode> Accepts a
+              true/false boolean. For usage, see the{' '}
+              <EuiLink href="#/theming/high-contrast-mode">
+                High contrast mode
+              </EuiLink>{' '}
+              page.
             </li>
           </ul>
-          <p>
-            The concept for each prop is explained in subsequent sections. More
-            information on the full shape of an EUI theme, see the{' '}
-            <EuiLink href="#/theming/customizing-themes">Global Values</EuiLink>{' '}
-            page.
-          </p>
+          <p>To use the default EUI theme, no configuration is required.</p>
         </>
       ),
       demo: <Provider />,
@@ -99,25 +108,27 @@ export const ThemeExample = {
       text: (
         <>
           <p>
-            Using the react hook <strong>useEuiTheme()</strong> makes it very
-            easy to consume the EUI static and computed variables like colors
-            and sizing. It simply passes back an object of the current theme
-            which includes
+            Using the React hook <EuiCode>useEuiTheme()</EuiCode> makes it very
+            easy to consume EUI's static and computed variables, like colors and
+            sizing. It simply passes back an object of the current theme which
+            includes:
           </p>
           <ul>
             <li>
-              <EuiCode language="ts">euiTheme: EuiThemeComputed</EuiCode> All
-              the calculated keys including any modifications
+              <EuiCode language="ts">euiTheme:</EuiCode> All the calculated keys
+              including any modifications
+            </li>
+            <li>
+              <EuiCode language="ts">modifications:</EuiCode> Only the
+              modification keys
             </li>
             <li>
-              <EuiCode language="ts">colorMode: EuiThemeColorMode</EuiCode>{' '}
-              Simply {"'light'"} or {"'dark'"}
+              <EuiCode language="ts">colorMode:</EuiCode> Either "LIGHT" or
+              "DARK"
             </li>
             <li>
-              <EuiCode language="ts">
-                modifications: EuiThemeModifications
-              </EuiCode>{' '}
-              Only the modification keys
+              <EuiCode language="ts">highContrastMode:</EuiCode> Either
+              'forced', 'preferred', or <EuiCode>false</EuiCode>
             </li>
           </ul>
           <p>
diff --git a/packages/eui/src/components/avatar/avatar.styles.ts b/packages/eui/src/components/avatar/avatar.styles.ts
index 9be85116d9c..bdd170fcfee 100644
--- a/packages/eui/src/components/avatar/avatar.styles.ts
+++ b/packages/eui/src/components/avatar/avatar.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS } from '../../global_styling';
+import { logicalSizeCSS, mathWithUnits } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 const _avatarSize = ({
@@ -18,9 +18,7 @@ const _avatarSize = ({
   fontSize: string;
 }) => {
   return `
-    ${logicalCSS('width', size)};
-    ${logicalCSS('height', size)};
-    line-height: ${size};
+    ${logicalSizeCSS(size)};
     font-size: ${fontSize};
   `;
 };
@@ -36,8 +34,7 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
     vertical-align: middle;
     background-size: cover;
     background-color: ${euiTheme.colors.lightShade};
-    ${logicalTextAlignCSS('center')}
-    ${logicalCSS('overflow-x', 'hidden')}
+    overflow: hidden;
     /* Explicitly state weight so it doesn't get overridden by inheritance */
     font-weight: ${euiTheme.font.weight.medium};
   `,
@@ -69,19 +66,19 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
   m: css(
     _avatarSize({
       size: euiTheme.size.xl,
-      fontSize: `calc(${euiTheme.size.base} * 0.9)`,
+      fontSize: mathWithUnits(euiTheme.size.base, (x) => x * 0.9),
     })
   ),
   l: css(
     _avatarSize({
       size: euiTheme.size.xxl,
-      fontSize: `calc(${euiTheme.size.l} * 0.8)`,
+      fontSize: mathWithUnits(euiTheme.size.l, (x) => x * 0.8),
     })
   ),
   xl: css(
     _avatarSize({
-      size: `calc(${euiTheme.size.base} * 4)`,
-      fontSize: `calc(${euiTheme.size.xl} * 0.8)`,
+      size: euiTheme.size.xxxxl,
+      fontSize: mathWithUnits(euiTheme.size.xl, (x) => x * 0.8),
     })
   ),
   // Casing
diff --git a/packages/eui/src/components/avatar/avatar.tsx b/packages/eui/src/components/avatar/avatar.tsx
index fc410e87abc..8bf445c8cc7 100644
--- a/packages/eui/src/components/avatar/avatar.tsx
+++ b/packages/eui/src/components/avatar/avatar.tsx
@@ -15,6 +15,7 @@ import {
   euiPaletteColorBlindBehindText,
   toInitials,
   useEuiMemoizedStyles,
+  useEuiTheme,
 } from '../../services';
 import { IconType, EuiIcon, IconSize, IconColor } from '../icon';
 
@@ -126,10 +127,12 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
 }) => {
   checkValidInitials(initials);
   const { casing = type === 'space' ? 'none' : 'uppercase', ...rest } = props;
+  const { highContrastMode, euiTheme } = useEuiTheme();
 
   const isPlain = color === 'plain';
   const isSubdued = color === 'subdued';
   const isNamedColor = isPlain || isSubdued || color === null;
+  const isForcedColors = highContrastMode === 'forced';
 
   const classes = classNames(
     'euiAvatar',
@@ -174,20 +177,28 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
     }
   }, [imageUrl, color, isNamedColor, name.length]);
 
+  const highContrastBorder = useMemo(
+    // Render a border since background-colors are ignored in Windows forced contrast themes
+    () => (isForcedColors ? { border: euiTheme.border.thin } : undefined),
+    [isForcedColors, euiTheme]
+  );
+
   const iconCustomColor = useMemo(() => {
+    // Force icons to single colors in forced high contrast mode
+    if (isForcedColors) return euiTheme.colors.fullShade;
     // `null` allows icons to keep their default color (e.g. app icons)
     if (iconColor === null) return undefined;
     // Otherwise continue to pass on `iconColor`
     if (iconColor) return iconColor;
     // Fall back to the adjusted text color if it exists
     return avatarStyle?.color;
-  }, [iconColor, avatarStyle?.color]);
+  }, [iconColor, avatarStyle?.color, isForcedColors, euiTheme]);
 
   return (
     <div
       css={cssStyles}
       className={classes}
-      style={{ ...style, ...avatarStyle }}
+      style={{ ...style, ...avatarStyle, ...highContrastBorder }}
       aria-label={isDisabled ? undefined : name}
       role={isDisabled ? 'presentation' : 'img'}
       title={name}
diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.stories.tsx b/packages/eui/src/components/badge/beta_badge/beta_badge.stories.tsx
index b3b1004c289..4f4744faf8a 100644
--- a/packages/eui/src/components/badge/beta_badge/beta_badge.stories.tsx
+++ b/packages/eui/src/components/badge/beta_badge/beta_badge.stories.tsx
@@ -6,8 +6,11 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { EuiTitle } from '../../title';
+
 import { EuiBetaBadge, EuiBetaBadgeProps } from './beta_badge';
 
 const meta: Meta<EuiBetaBadgeProps> = {
@@ -34,3 +37,18 @@ export const Playground: Story = {
     label: 'Beta',
   },
 };
+
+export const TitleAlignment: Story = {
+  tags: ['vrt-only'],
+  args: {
+    label: 'Beta',
+  },
+  render: (args: EuiBetaBadgeProps) => (
+    <EuiTitle size="s">
+      <h1>
+        Beta badges will also line up nicely with titles{' '}
+        <EuiBetaBadge {...args} />
+      </h1>
+    </EuiTitle>
+  ),
+};
diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts
index 625e21d99a5..af08ada3785 100644
--- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts
+++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts
@@ -9,6 +9,7 @@
 import { css } from '@emotion/react';
 import {
   logicalCSS,
+  logicalSizeCSS,
   euiFocusRing,
   euiFontSizeFromScale,
   euiTextTruncate,
@@ -21,10 +22,25 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, colorMode } = euiThemeContext;
   const badgeColors = euiBadgeColors(euiThemeContext);
 
+  const sizes = {
+    m: {
+      height: euiTheme.size.l,
+      padding: euiTheme.size.base,
+    },
+    s: {
+      height: mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base),
+      padding: euiTheme.size.m,
+    },
+  };
+  // Line height is needed over inline-flex centering for text `vertical-align`ment
+  const getLineHeight = (height: string) =>
+    mathWithUnits([height, euiTheme.border.width.thin], (x, y) => x - y * 2);
+
   return {
     euiBetaBadge: css`
       display: inline-block;
       border-radius: ${euiTheme.size.l};
+      border: ${euiTheme.border.width.thin} solid transparent;
       cursor: default;
 
       font-weight: ${euiTheme.font.weight.bold};
@@ -46,38 +62,27 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
     hollow: css`
       color: ${badgeColors.hollow.color};
       background-color: ${badgeColors.hollow.backgroundColor};
-      box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
-        ${badgeColors.hollow.borderColor};
+      border-color: ${badgeColors.hollow.borderColor};
     `,
     warning: css(badgeColors.warning),
     // Font sizes
     m: css`
       font-size: ${euiFontSizeFromScale('xs', euiTheme)};
-      line-height: ${euiTheme.size.l};
+      line-height: ${getLineHeight(sizes.m.height)};
     `,
     s: css`
-      font-size: 0.625rem;
-      line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)};
+      font-size: ${euiFontSizeFromScale('xxxs', euiTheme)};
+      line-height: ${getLineHeight(sizes.s.height)};
     `,
-    // Padding/width sizes
     badgeSizes: {
       default: {
-        m: `
-        ${logicalCSS('padding-horizontal', euiTheme.size.base)}`,
-        s: `
-        ${logicalCSS('padding-horizontal', euiTheme.size.m)}`,
+        m: logicalCSS('padding-horizontal', sizes.m.padding),
+        s: logicalCSS('padding-horizontal', sizes.s.padding),
       },
       // When it's just an icon or a single letter, make the badge a circle
       circle: {
-        m: `
-          ${logicalCSS('width', euiTheme.size.l)}
-        `,
-        s: `
-          ${logicalCSS(
-            'width',
-            mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)
-          )}
-        `,
+        m: logicalSizeCSS(sizes.m.height),
+        s: logicalSizeCSS(sizes.s.height),
       },
     },
     euiBetaBadge__icon: css`
diff --git a/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts b/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts
index 04e0c4bb2e6..722ba4aeda8 100644
--- a/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts
+++ b/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts
@@ -14,6 +14,7 @@ import {
   euiNumberFormat,
   mathWithUnits,
 } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../../services';
 import { euiBadgeColors } from '../color_utils';
 
@@ -24,10 +25,18 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => {
   return {
     euiNotificationBadge: css`
       flex-shrink: 0; /* Ensures it never scales down below its intended size */
-      display: inline-block;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
       vertical-align: middle;
       ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
       border-radius: ${euiTheme.border.radius.small};
+      ${highContrastModeStyles(euiThemeContext, {
+        forced: `
+          border: ${euiTheme.border.thin};
+          overflow: hidden; /* Fix text clipping */
+        `,
+      })}
       cursor: default;
 
       font-size: ${euiFontSizeFromScale('xs', euiTheme)};
@@ -41,12 +50,10 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     // Sizes
     s: css`
-      line-height: ${euiTheme.size.base};
       ${logicalCSS('height', euiTheme.size.base)}
       ${logicalCSS('min-width', euiTheme.size.base)}
     `,
     m: css`
-      line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)};
       ${logicalCSS(
         'height',
         mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)
diff --git a/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index c4bcc9134dc..3fc78452fba 100644
--- a/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
+++ b/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -48,14 +48,18 @@ exports[`CollapsedItemActions custom actions 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -22px; left: -16px; z-index: 2000;"
+        style="top: -18px; left: -16px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-left"
-          data-popover-arrow="left"
-          style="left: 0px; top: 10px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="top: 9px; left: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-left"
+            data-popover-arrow="left"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -158,14 +162,18 @@ exports[`CollapsedItemActions default actions 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -22px; left: -16px; z-index: 2000;"
+        style="top: -18px; left: -16px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-left"
-          data-popover-arrow="left"
-          style="left: 0px; top: 10px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="top: 9px; left: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-left"
+            data-popover-arrow="left"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/basic_table/basic_table.stories.tsx b/packages/eui/src/components/basic_table/basic_table.stories.tsx
index b7f1929f78d..57e447eb822 100644
--- a/packages/eui/src/components/basic_table/basic_table.stories.tsx
+++ b/packages/eui/src/components/basic_table/basic_table.stories.tsx
@@ -320,6 +320,15 @@ export const ExpandedNestedTable: Story = {
   },
 };
 
+export const HighContrastMobile: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    ...ExpandedRow.args,
+    responsiveBreakpoint: true,
+  },
+};
+
 const StatefulPlayground = ({
   items,
   pagination,
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/bottom_bar/bottom_bar.styles.ts b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
index eb6dd268e90..df1d825f765 100644
--- a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
+++ b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
@@ -7,8 +7,9 @@
  */
 
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme, shade } from '../../services';
+import { euiCanAnimate, logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins';
 
 const euiBottomBarAppear = keyframes`
@@ -30,8 +31,12 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
     euiBottomBar: css`
-      ${euiShadowFlat(euiThemeContext)}
-      background: ${shade(euiTheme.colors.lightestShade, 0.5)};
+      background-color: ${shade(euiTheme.colors.lightestShade, 0.5)};
+      ${logicalCSS('border-top', euiTheme.border.thin)}
+      ${highContrastModeStyles(euiThemeContext, {
+        none: euiShadowFlat(euiThemeContext),
+      })}
+
       ${euiCanAnimate} {
         animation: ${euiBottomBarAppear} ${euiTheme.animation.slow}
           ${euiTheme.animation.resistance};
diff --git a/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap b/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap
index 3cb6081df0d..5dd466d66a5 100644
--- a/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap
+++ b/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap
@@ -46,14 +46,18 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap b/packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
index aae72d83cd5..656e7fafe8a 100644
--- a/packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
+++ b/packages/eui/src/components/breadcrumbs/__snapshots__/breadcrumb.test.tsx.snap
@@ -61,14 +61,18 @@ exports[`EuiBreadcrumbCollapsed renders a ... breadcrumb with collapsed content
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts
index be36e19dbaf..c96cd359546 100644
--- a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts
+++ b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts
@@ -17,13 +17,14 @@ import {
   logicalBorderRadiusCSS,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button';
 
 /**
  * Styles cast to inner <a>, <button>, <span> elements
  */
 export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme, colorMode, highContrastMode } = euiThemeContext;
 
   // Reuse button colors for `type="application`" clickable breadcrumbs
   const applicationButtonColors = euiButtonColor(euiThemeContext, 'primary');
@@ -39,6 +40,28 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     color: tintOrShade(euiTheme.colors.darkestShade, 0.2, colorMode),
   };
 
+  // Create an arrow "border" in high contrast modes. We have to use a
+  // filter/drop-shadow workaround to get a border working with clip-path.
+  // Note: the filter must be on the parent wrapper, not on the clipped element
+  const dropShadow = (borderColor: string) =>
+    `filter: drop-shadow(${euiTheme.border.width.thin} 0 0 ${
+      highContrastMode === 'forced' ? euiTheme.border.color : borderColor
+    });`;
+  const applicationHighContrastArrow = highContrastModeStyles(euiThemeContext, {
+    preferred: `
+      &:is(a, button) {
+        .euiBreadcrumb:has(&) {
+          ${dropShadow(applicationButtonColors.color)}
+        }
+      }
+      &:not(a, button) {
+        .euiBreadcrumb:has(&) {
+          ${dropShadow(applicationTextColors.color)}
+        }
+      }
+    `,
+  });
+
   return {
     euiBreadcrumb__content: css`
       /* Unset EuiLink's bolder font weight */
@@ -90,38 +113,38 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiFontSize(euiThemeContext, 'xs')}
       font-weight: ${euiTheme.font.weight.medium};
       background-color: ${applicationTextColors.backgroundColor};
-      clip-path: polygon(
-        0 0,
-        calc(100% - ${euiTheme.size.s}) 0,
-        100% 50%,
-        calc(100% - ${euiTheme.size.s}) 100%,
-        0 100%,
-        ${euiTheme.size.s} 50%
-      );
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `border: ${euiTheme.border.width.thin} solid currentColor;`,
+      })}
       color: ${applicationTextColors.color};
       line-height: ${euiTheme.size.base};
       ${logicalCSS('padding-vertical', euiTheme.size.xs)}
       ${logicalCSS('padding-horizontal', euiTheme.size.base)}
 
-      &:is(a),
-      &:is(button) {
+      &:is(a, button) {
         background-color: ${applicationButtonColors.backgroundColor};
         color: ${applicationButtonColors.color};
+      }
 
-        :focus {
-          ${euiFocusRing(euiThemeContext, 'inset')}
+      &:focus {
+        ${euiFocusRing(euiThemeContext, 'inset')}
+      }
 
-          :focus-visible {
-            border-radius: ${euiTheme.border.radius.medium};
-            clip-path: none;
-          }
+      &:focus-visible {
+        border-radius: ${euiTheme.border.radius.medium};
+        clip-path: none;
+
+        .euiBreadcrumb:has(&) {
+          z-index: 2;
+          ${highContrastModeStyles(euiThemeContext, {
+            preferred: 'filter: none;',
+          })}
         }
       }
     `,
     applicationStyles: {
       onlyChild: css`
         border-radius: ${euiTheme.border.radius.medium};
-        clip-path: none;
         ${logicalCSS('padding-horizontal', euiTheme.size.m)}
       `,
       firstChild: css`
@@ -137,6 +160,18 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
           0 100%
         );
         ${logicalCSS('padding-left', euiTheme.size.m)}
+        ${applicationHighContrastArrow}
+      `,
+      intermediateChild: `
+        clip-path: polygon(
+          0 0,
+          calc(100% - ${euiTheme.size.s}) 0,
+          100% 50%,
+          calc(100% - ${euiTheme.size.s}) 100%,
+          0 100%,
+          ${euiTheme.size.s} 50%
+        );
+        ${applicationHighContrastArrow}
       `,
       lastChild: css`
         ${logicalBorderRadiusCSS(
diff --git a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.tsx b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.tsx
index fff31ef6f89..dcb1b9a0f77 100644
--- a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.tsx
+++ b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.tsx
@@ -54,7 +54,10 @@ export const EuiBreadcrumbContent: FunctionComponent<
   const classes = classNames('euiBreadcrumb__content', className);
 
   const styles = useEuiMemoizedStyles(euiBreadcrumbContentStyles);
-  const cssStyles = [styles.euiBreadcrumb__content, styles[type]];
+  const cssStyles: ArrayCSSInterpolation = [
+    styles.euiBreadcrumb__content,
+    styles[type],
+  ];
   if (isApplication) {
     if (isOnlyBreadcrumb) {
       cssStyles.push(styles.applicationStyles.onlyChild);
@@ -62,6 +65,8 @@ export const EuiBreadcrumbContent: FunctionComponent<
       cssStyles.push(styles.applicationStyles.firstChild);
     } else if (isLastBreadcrumb) {
       cssStyles.push(styles.applicationStyles.lastChild);
+    } else {
+      cssStyles.push(styles.applicationStyles.intermediateChild);
     }
   }
   const truncationStyles = [
diff --git a/packages/eui/src/components/breadcrumbs/breadcrumb.styles.ts b/packages/eui/src/components/breadcrumbs/breadcrumb.styles.ts
index 126c787cffa..65a640cf42c 100644
--- a/packages/eui/src/components/breadcrumbs/breadcrumb.styles.ts
+++ b/packages/eui/src/components/breadcrumbs/breadcrumb.styles.ts
@@ -19,11 +19,6 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => {
     euiBreadcrumb: css`
       align-items: center;
       display: flex;
-      ${logicalCSS(
-        // See .euiBreadcrumbs__list's negative margin-bottom
-        'margin-bottom',
-        euiTheme.size.xs
-      )}
     `,
     isTruncated: css`
       overflow: hidden;
@@ -36,15 +31,14 @@ export const euiBreadcrumbStyles = (euiThemeContext: UseEuiTheme) => {
     page: css`
       &:not(:last-of-type) {
         &::after {
-          background: ${euiTheme.colors.lightShade};
           content: '';
           flex-shrink: 0;
           ${logicalCSS('margin-top', euiTheme.size.xs)}
           ${logicalCSS('margin-bottom', 0)}
           ${logicalCSS('margin-horizontal', euiTheme.size.s)}
           ${logicalCSS('height', euiTheme.size.base)}
-          ${logicalCSS('width', '1px')}
-          transform: translateY(-1px) rotate(15deg);
+          ${logicalCSS('border-right', euiTheme.border.thin)}
+          transform: translateY(-${euiTheme.border.width.thin}) rotate(15deg);
         }
       }
     `,
diff --git a/packages/eui/src/components/breadcrumbs/breadcrumbs.styles.ts b/packages/eui/src/components/breadcrumbs/breadcrumbs.styles.ts
index 284d2c927a2..10a59fefe02 100644
--- a/packages/eui/src/components/breadcrumbs/breadcrumbs.styles.ts
+++ b/packages/eui/src/components/breadcrumbs/breadcrumbs.styles.ts
@@ -20,11 +20,7 @@ export const euiBreadcrumbsListStyles = (euiThemeContext: UseEuiTheme) => {
       display: flex;
       flex-wrap: wrap;
       line-height: ${euiTheme.size.l};
-      ${logicalCSS(
-        // Add vertical space between breadcrumbs, but make sure the whole breadcrumb set doesn't add space below itself
-        'margin-bottom',
-        `-${euiTheme.size.xs}`
-      )}
+      row-gap: ${euiTheme.size.xs};
       ${logicalCSS(
         // Ensure it shrinks if the window is narrow
         'min-width',
diff --git a/packages/eui/src/components/button/button.stories.tsx b/packages/eui/src/components/button/button.stories.tsx
index f6135409d97..dfb9e9e7691 100644
--- a/packages/eui/src/components/button/button.stories.tsx
+++ b/packages/eui/src/components/button/button.stories.tsx
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -13,6 +14,7 @@ import {
   enableFunctionToggleControls,
 } from '../../../.storybook/utils';
 
+import { EuiButtonEmpty } from './button_empty';
 import { EuiButton, Props as EuiButtonProps } from './button';
 
 const meta: Meta<EuiButtonProps> = {
@@ -49,3 +51,16 @@ export const Playground: Story = {
   },
 };
 disableStorybookControls(Playground, ['buttonRef']);
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  render: () => (
+    <div css={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+      <EuiButton>Button</EuiButton>
+      <EuiButton fill>Filled</EuiButton>
+      <EuiButton disabled>Disabled</EuiButton>
+      <EuiButtonEmpty>Empty</EuiButtonEmpty>
+    </div>
+  ),
+};
diff --git a/packages/eui/src/components/button/button_group/button_group.stories.tsx b/packages/eui/src/components/button/button_group/button_group.stories.tsx
index 41537d321ea..8ec87a08ae6 100644
--- a/packages/eui/src/components/button/button_group/button_group.stories.tsx
+++ b/packages/eui/src/components/button/button_group/button_group.stories.tsx
@@ -155,3 +155,32 @@ export const WithTooltips: Story = {
     idToSelectedMap: { button1: true },
   },
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  render: () => {
+    const props = {
+      options: [
+        { id: '1', label: 'One', isDisabled: true },
+        { id: '2', label: 'Two' },
+        { id: '3', label: 'Three' },
+        { id: '4', label: 'Four' },
+        { id: '5', label: 'Five' },
+        { id: '6', label: 'Six' },
+      ],
+      type: 'multi' as const,
+      idToSelectedMap: { '3': true, '4': true },
+      legend: '',
+      onChange: () => {},
+    };
+    return (
+      <>
+        <EuiButtonGroup {...props} color="primary" />
+        <br />
+        <br />
+        <EuiButtonGroup {...props} buttonSize="compressed" />
+      </>
+    );
+  },
+};
diff --git a/packages/eui/src/components/button/button_group/button_group.styles.ts b/packages/eui/src/components/button/button_group/button_group.styles.ts
index cd934fc9d26..048ad0c60d5 100644
--- a/packages/eui/src/components/button/button_group/button_group.styles.ts
+++ b/packages/eui/src/components/button/button_group/button_group.styles.ts
@@ -9,6 +9,10 @@
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../../form/form.styles';
 
 export const euiButtonGroupStyles = {
@@ -50,15 +54,64 @@ export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {
     // Sizes
     m: css`
       border-radius: ${euiTheme.border.radius.medium};
+      ${_highContrastStyles(euiThemeContext)}
     `,
     s: css`
       border-radius: ${euiTheme.border.radius.small};
+      ${_highContrastStyles(euiThemeContext)}
     `,
     compressed: css`
       ${logicalCSS('height', controlCompressedHeight)}
       background-color: ${backgroundColor};
       border: ${euiTheme.border.width.thin} solid ${borderColor};
       border-radius: ${controlCompressedBorderRadius};
+      ${_highContrastStyles(euiThemeContext, true)}
     `,
   };
 };
+
+const _highContrastStyles = (
+  euiThemeContext: UseEuiTheme,
+  compressed?: boolean
+) => {
+  const { euiTheme } = euiThemeContext;
+
+  // Account for buttons within tooltip wrappers in selectors
+  const getButtonChildSelectors = (selector: string) => `
+    & > .euiButtonGroupButton${selector},
+    & > .euiButtonGroup__tooltipWrapper${selector} .euiButtonGroupButton`;
+
+  return highContrastModeStyles(euiThemeContext, {
+    preferred: compressed
+      ? `
+        .euiButtonGroupButton {
+          border: none;
+        }
+      `
+      : // Conditionally unset the high contrast borders passed by `euiButtonColor` -
+        // faux borders between selected/unselected buttons are rendered by pseudo elements,
+        // and can flip colors depending on selected/unselected siblings
+        `
+        ${getButtonChildSelectors(':not(:first-child, :last-child)')} {
+          ${logicalCSS('border-horizontal', 'none')}
+        }
+        ${getButtonChildSelectors(':first-child')} {
+          ${logicalCSS('border-right', 'none')}
+        }
+        ${getButtonChildSelectors(':last-child')} {
+          ${logicalCSS('border-left', 'none')}
+        }
+      `,
+    forced: `
+      .euiButtonGroupButton-isSelected {
+        ${preventForcedColors(euiThemeContext)}
+        color: ${euiTheme.colors.emptyShade};
+        background-color: ${euiTheme.colors.fullShade};
+      }
+
+      .euiButtonGroupButton[disabled] {
+        opacity: 0.5;
+      }
+    `,
+  });
+};
diff --git a/packages/eui/src/components/button/button_group/button_group_button.styles.ts b/packages/eui/src/components/button/button_group/button_group_button.styles.ts
index 2074d38e79a..5b5a0e1324f 100644
--- a/packages/eui/src/components/button/button_group/button_group_button.styles.ts
+++ b/packages/eui/src/components/button/button_group/button_group_button.styles.ts
@@ -31,7 +31,7 @@ import { euiScreenReaderOnly } from '../../accessibility';
 import { euiFormVariables } from '../../form/form.styles';
 
 export const euiButtonGroupButtonStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
 
   const { controlCompressedHeight, controlCompressedBorderRadius } =
     euiFormVariables(euiThemeContext);
@@ -82,20 +82,46 @@ export const euiButtonGroupButtonStyles = (euiThemeContext: UseEuiTheme) => {
         }
       `,
       get borders() {
+        // We use pseudo elements to avoid affecing button width, and to allow
+        // inheriting high contrast border colors
         const selectors =
           '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        const selectedColor = transparentize(euiTheme.colors.emptyShade, 0.2);
-        const unselectedColor = transparentize(euiTheme.colors.fullShade, 0.1);
-        const borderWidth = euiTheme.border.width.thin;
+        const selectedColor = highContrastMode
+          ? euiTheme.colors.emptyShade
+          : transparentize(euiTheme.colors.emptyShade, 0.2);
+        const unselectedColor = highContrastMode
+          ? 'inherit'
+          : transparentize(euiTheme.colors.fullShade, 0.1);
 
         // "Borders" between buttons should be present between two of the same colored buttons,
         // and absent between selected vs non-selected buttons (different colors)
         return `
+          position: relative;
+
+          &::before {
+            position: absolute;
+            ${logicalCSS('left', 0)}
+            ${logicalCSS(
+              'vertical',
+              highContrastMode ? `-${euiTheme.border.width.thin}` : 0
+            )}
+            ${logicalCSS('border-left-style', 'solid')}
+            ${logicalCSS('border-left-width', euiTheme.border.width.thin)}
+            pointer-events: none;
+          }
+        
           &:not(${selectors}) + *:not(${selectors}) {
-            box-shadow: -${borderWidth} 0 0 0 ${unselectedColor};
+            &::before {
+              content: '';
+              border-color: ${unselectedColor};
+            }
           }
+
           &:is(${selectors}) + *:is(${selectors}) {
-            box-shadow: -${borderWidth} 0 0 0 ${selectedColor};
+            &::before {
+              content: '';
+              border-color: ${selectedColor};
+            }
           }
         `;
       },
diff --git a/packages/eui/src/components/card/card.styles.ts b/packages/eui/src/components/card/card.styles.ts
index 40330325af4..fdd7be66970 100644
--- a/packages/eui/src/components/card/card.styles.ts
+++ b/packages/eui/src/components/card/card.styles.ts
@@ -67,8 +67,7 @@ export const euiCardStyles = (
       },
       disabled: css`
         cursor: not-allowed; /* Duplicate property due to Chrome bug */
-        background-color: ${euiButtonColor(euiThemeContext, 'disabled')};
-        color: ${euiTheme.colors.disabledText};
+        ${euiButtonColor(euiThemeContext, 'disabled')}
       `,
     },
 
diff --git a/packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap b/packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
index 138937d7811..55547d8d909 100644
--- a/packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
+++ b/packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiCheckableCard is rendered 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -96,7 +96,7 @@ exports[`EuiCheckableCard renders children 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -142,7 +142,7 @@ exports[`EuiCheckableCard renders disabled 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
@@ -182,7 +182,7 @@ exports[`EuiCheckableCard renders panel props 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
diff --git a/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap b/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
index 381ac18ad39..b12d9b7efaa 100644
--- a/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
+++ b/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap
@@ -41,14 +41,18 @@ exports[`EuiCodeBlockAnnotation renders 1`] = `
         data-popover-panel="true"
         data-test-subj="euiCodeBlockAnnotationPopover"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 6001;"
+        style="top: 16px; left: -18px; z-index: 6001;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap b/packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap
index 0c229ef9d34..2bd4013988c 100644
--- a/packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap
+++ b/packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap
@@ -1009,7 +1009,7 @@ exports[`line utils highlightByLine with line numbers with highlighted lines add
         "properties": {
           "className": [
             "euiCodeBlock__lineText",
-            "css-96t2rh-euiCodeBlock__lineText-isHighlighted",
+            "css-qzoymg-euiCodeBlock__lineText-isHighlighted",
           ],
         },
         "tagName": "span",
@@ -1160,7 +1160,7 @@ exports[`line utils highlightByLine with line numbers with highlighted lines add
         "properties": {
           "className": [
             "euiCodeBlock__lineText",
-            "css-96t2rh-euiCodeBlock__lineText-isHighlighted",
+            "css-qzoymg-euiCodeBlock__lineText-isHighlighted",
           ],
         },
         "tagName": "span",
diff --git a/packages/eui/src/components/code/code_block.stories.tsx b/packages/eui/src/components/code/code_block.stories.tsx
index 7d4d0b7f832..299105496c1 100644
--- a/packages/eui/src/components/code/code_block.stories.tsx
+++ b/packages/eui/src/components/code/code_block.stories.tsx
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj, ReactRenderer } from '@storybook/react';
 import type { PlayFunctionContext } from '@storybook/csf';
 
@@ -102,3 +103,33 @@ export const Annotations: Story = {
     expect(dialog).toHaveTextContent('Hello world');
   },
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    whiteSpace: 'pre',
+    language: 'json',
+    lineNumbers: {
+      start: 32,
+      highlight: '32, 34-37, 40',
+      annotations: {
+        34: (
+          <>
+            A <b>special</b> note about this line
+          </>
+        ),
+        38: 'Also accepts quick plaintext notes',
+      },
+    },
+    children: `"OriginLocation": [
+  {
+    "coordinates": [
+      -97.43309784,
+      37.64989853
+    ],
+    "type": "Point"
+  }
+],`,
+  },
+};
diff --git a/packages/eui/src/components/code/code_block.styles.ts b/packages/eui/src/components/code/code_block.styles.ts
index 895051a72cc..cab4a1da792 100644
--- a/packages/eui/src/components/code/code_block.styles.ts
+++ b/packages/eui/src/components/code/code_block.styles.ts
@@ -13,6 +13,7 @@ import {
   euiScrollBarStyles,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 
 import { euiCodeSyntaxVariables } from './code_syntax.styles';
@@ -27,6 +28,11 @@ export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
       display: block;
       position: relative;
       background: ${codeSyntaxVariables.backgroundColor};
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `border: ${euiTheme.border.thin};`,
+        // Fix scrolling text occluding the border in Windows high contrast mode
+        forced: 'overflow: hidden;',
+      })}
 
       ${codeSyntaxVariables.tokensCss}
     `,
diff --git a/packages/eui/src/components/code/code_block_annotations.style.ts b/packages/eui/src/components/code/code_block_annotations.style.ts
index b9faf685fc1..ade4170b3cd 100644
--- a/packages/eui/src/components/code/code_block_annotations.style.ts
+++ b/packages/eui/src/components/code/code_block_annotations.style.ts
@@ -12,9 +12,11 @@ import {
   logicalSizeCSS,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 
-export const euiCodeBlockAnnotationsStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiCodeBlockAnnotationsStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   const buttonIconSize = mathWithUnits(euiTheme.size.base, (x) => x - 1.5);
 
   return {
@@ -30,8 +32,15 @@ export const euiCodeBlockAnnotationsStyles = ({ euiTheme }: UseEuiTheme) => {
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: ${euiTheme.colors.primary};
       border-radius: 50%;
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `background-color: ${euiTheme.colors.primary};`,
+        // Windows high contrast themes ignore background-color
+        forced: `
+          border: ${mathWithUnits(buttonIconSize, (x) => x / 2)} solid ${
+          euiTheme.colors.primary
+        };`,
+      })}
     `,
   };
 };
diff --git a/packages/eui/src/components/code/code_block_line.styles.ts b/packages/eui/src/components/code/code_block_line.styles.ts
index 74766b8dbbe..6b1402101b0 100644
--- a/packages/eui/src/components/code/code_block_line.styles.ts
+++ b/packages/eui/src/components/code/code_block_line.styles.ts
@@ -14,14 +14,26 @@
  */
 
 import { css } from '@emotion/css';
-import { euiBackgroundColor } from '../../global_styling';
+import { euiBackgroundColor, mathWithUnits } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 // Note: These styles must be in a separate file due to using `css` from `@emotion/css`
 // (i.e., applying styles in vanilla JS / directly to DOM nodes instead of React)
 
 export const euiCodeBlockLineStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
+  const lineMargins = euiTheme.size.m;
+  const lineWidth = euiTheme.border.width.thin;
+
+  // Increase highlight border width in high contrast modes
+  const highlightWidth = highContrastMode
+    ? mathWithUnits(euiTheme.border.width.thick, (x) => x * 1.5)
+    : euiTheme.border.width.thick;
+  const highlightOffset = mathWithUnits(
+    [lineMargins, lineWidth, highlightWidth],
+    (x, y, z) => x + y - z
+  );
 
   return {
     euiCodeBlock__line: css`
@@ -35,14 +47,14 @@ export const euiCodeBlockLineStyles = (euiThemeContext: UseEuiTheme) => {
       euiCodeBlock__lineText: css`
         flex-grow: 1;
         display: inline-block;
-        padding-inline-start: ${euiTheme.size.m};
-        border-inline-start: ${euiTheme.border.thin};
+        padding-inline-start: ${lineMargins};
+        border-inline-start: ${lineWidth} solid ${euiTheme.border.color};
         user-select: text;
       `,
       isHighlighted: css`
         background: ${euiBackgroundColor(euiThemeContext, 'primary')};
-        border-inline-start: ${euiTheme.border.width.thick} solid
-          ${euiTheme.colors.primary};
+        border-inline-start: ${highlightWidth} solid ${euiTheme.colors.primary};
+        padding-inline-start: ${highlightOffset};
       `,
     },
     lineNumber: {
@@ -51,7 +63,7 @@ export const euiCodeBlockLineStyles = (euiThemeContext: UseEuiTheme) => {
         flex-grow: 0;
         flex-shrink: 0;
         user-select: none;
-        padding-inline-end: ${euiTheme.size.m};
+        padding-inline-end: ${lineMargins};
         box-sizing: content-box; /* Width is calculated in JS and padding needs to be added on to that value */
       `,
       euiCodeBlock__lineNumber: css`
diff --git a/packages/eui/src/components/code/code_syntax.styles.ts b/packages/eui/src/components/code/code_syntax.styles.ts
index 4a7b9e374bb..f8b4fa0b51b 100644
--- a/packages/eui/src/components/code/code_syntax.styles.ts
+++ b/packages/eui/src/components/code/code_syntax.styles.ts
@@ -14,13 +14,21 @@ import {
 
 const visColors = euiPaletteColorBlind();
 
+export const euiCodeTextColors = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    backgroundColor: euiTheme.colors.lightestShade,
+    color: euiTheme.colors.text,
+  };
+};
+
 // These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
-export const euiCodeSyntaxVariables = ({ euiTheme }: UseEuiTheme) => {
-  const backgroundColor = euiTheme.colors.lightestShade;
+export const euiCodeSyntaxVariables = (euiThemeContext: UseEuiTheme) => {
+  const { backgroundColor, color } = euiCodeTextColors(euiThemeContext);
+  const { euiTheme } = euiThemeContext;
 
   return {
-    backgroundColor: backgroundColor,
-    color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
+    backgroundColor,
+    color,
     inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
     selectedBackgroundColor: 'inherit',
     commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(
diff --git a/packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
index f55129006bb..2639124e3e7 100644
--- a/packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap
@@ -61,14 +61,18 @@ exports[`KibanaCollapsibleNavSolution renders docked icons: popover 1`] = `
   data-popover-open="true"
   data-popover-panel="true"
   role="dialog"
-  style="top: -22px; left: 16px; z-index: 2000;"
+  style="top: -18px; left: 16px; z-index: 2000;"
   tabindex="0"
 >
   <div
-    class="euiPopover__arrow emotion-euiPopoverArrow-right"
-    data-popover-arrow="right"
-    style="left: 0px; top: 10px;"
-  />
+    class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+    style="top: 9px; right: 100%;"
+  >
+    <div
+      class="euiPopover__arrow emotion-euiPopoverArrow-right"
+      data-popover-arrow="right"
+    />
+  </div>
   <p
     class="emotion-euiScreenReaderOnly"
     id="generated-id"
@@ -188,7 +192,7 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher: popover
   data-popover-open="true"
   data-popover-panel="true"
   role="dialog"
-  style="top: 0px; left: -22px; z-index: 2000; inline-size: 0px;"
+  style="top: 0px; left: -18px; z-index: 2000; inline-size: 0px;"
   tabindex="0"
 >
   <p
diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
index 8d98cd4474e..23cda9ceadd 100644
--- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
     >
       <div
         class="euiToolTip__arrow emotion-euiToolTip__arrow-left"
-        style="left: 0px; top: 4px;"
+        style="top: 3px; left: 100%;"
       />
       <div>
         Nav item
diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
index 6fc0081a4bd..8efdac1f7ad 100644
--- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
@@ -47,14 +47,18 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -22px; left: 16px; z-index: 2000;"
+        style="top: -18px; left: 16px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-right"
-          data-popover-arrow="right"
-          style="left: 0px; top: 10px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="top: 9px; right: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-right"
+            data-popover-arrow="right"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
index 001024b5f5f..2ee742f5c3a 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
@@ -6,9 +6,15 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { euiPaletteColorBlind } from '../../../services';
+import {
+  euiPaletteColorBlind,
+  euiPaletteForStatus,
+  euiPaletteForTemperature,
+} from '../../../services';
+import { EuiSpacer } from '../../spacer';
 
 import {
   EuiColorPaletteDisplay,
@@ -33,3 +39,51 @@ export const Playground: Story = {
     palette: euiPaletteColorBlind(),
   },
 };
+
+const paletteWithStops = [
+  { stop: 100, color: 'white' },
+  { stop: 250, color: 'lightgray' },
+  { stop: 320, color: 'gray' },
+  { stop: 470, color: 'black' },
+];
+
+export const PaletteWithStops: Story = {
+  args: {
+    palette: paletteWithStops,
+  },
+};
+
+/**
+ * VRT only
+ */
+
+export const KitchenSink: Story = {
+  tags: ['vrt-only'],
+  render: () => (
+    <>
+      <EuiColorPaletteDisplay
+        type="fixed"
+        palette={euiPaletteForStatus(6)}
+        size="xs"
+      />
+      <EuiSpacer />
+      <EuiColorPaletteDisplay
+        type="gradient"
+        palette={euiPaletteForTemperature(4)}
+        size="s"
+      />
+      <EuiSpacer />
+      <EuiColorPaletteDisplay
+        type="gradient"
+        palette={paletteWithStops}
+        size="m"
+      />
+    </>
+  ),
+};
+
+export const HighContrast: Story = {
+  ...KitchenSink,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts
index 279785d34c0..763b1994e7a 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts
@@ -10,15 +10,18 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme, transparentize } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
+import { preventForcedColors } from '../../../global_styling/functions/high_contrast';
 
 export const euiColorPaletteDisplayStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
 
-  // Border is a pseudo element with transparency
-  const border = `${euiTheme.border.width.thin} solid ${transparentize(
-    euiTheme.colors.darkestShade,
-    0.2
-  )}`;
+  const border = highContrastMode
+    ? euiTheme.border.thin
+    : // Border is a pseudo element with transparency
+      `${euiTheme.border.width.thin} solid ${transparentize(
+        euiTheme.colors.darkestShade,
+        0.2
+      )}`;
 
   return {
     euiColorPaletteDisplay: css`
@@ -26,6 +29,7 @@ export const euiColorPaletteDisplayStyles = (euiThemeContext: UseEuiTheme) => {
       display: flex;
       flex-direction: row;
       overflow: hidden;
+      ${preventForcedColors(euiThemeContext)}
 
       &::after {
         content: '';
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
index 8452f13346e..397bd2abeae 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, useMemo } from 'react';
 import { CommonProps } from '../../common';
 import { getFixedLinearGradient } from '../utils';
 import { EuiScreenReaderOnly } from '../../accessibility';
@@ -26,14 +26,15 @@ interface paletteItem {
 export const EuiColorPaletteDisplayFixed: FunctionComponent<
   EuiColorPaletteDisplayFixedProps
 > = ({ palette, title, ...rest }) => {
-  const fixedGradient = getFixedLinearGradient(palette);
-
-  const paletteStops = fixedGradient.map((item: paletteItem, index: number) => (
-    <span
-      style={{ backgroundColor: item.color, width: item.width }}
-      key={`${item.color}-${index}`}
-    />
-  ));
+  const paletteStops = useMemo(() => {
+    const fixedGradient = getFixedLinearGradient(palette);
+    return fixedGradient.map((item: paletteItem, index: number) => (
+      <span
+        style={{ backgroundColor: item.color, width: item.width }}
+        key={`${item.color}-${index}`}
+      />
+    ));
+  }, [palette]);
 
   return (
     <span {...rest}>
diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx
index 2a08df65a8a..3a5f80f45c3 100644
--- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx
+++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx
@@ -19,7 +19,7 @@ export interface EuiColorPaletteDisplayGradientProps
 
 export const EuiColorPaletteDisplayGradient: FunctionComponent<
   EuiColorPaletteDisplayGradientProps
-> = ({ palette, title, style = {}, ...rest }) => {
+> = ({ palette, title, style, ...rest }) => {
   const gradient = getLinearGradient(palette);
 
   return (
diff --git a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
index 2bbfe75acb0..9d119373fbc 100644
--- a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -381,7 +381,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
         class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
         data-popover-panel="true"
         role="dialog"
-        style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
+        style="top: 0px; left: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div
diff --git a/packages/eui/src/components/color_picker/color_picker.stories.tsx b/packages/eui/src/components/color_picker/color_picker.stories.tsx
index 25016e76ee1..e7349adc7ec 100644
--- a/packages/eui/src/components/color_picker/color_picker.stories.tsx
+++ b/packages/eui/src/components/color_picker/color_picker.stories.tsx
@@ -56,6 +56,21 @@ export const InlineWithAllElements: Story = {
   },
 };
 
+export const HighContrast: Story = {
+  ...InlineWithAllElements,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
+
+export const HighContrastDarkMode: Story = {
+  ...HighContrast,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true, colorMode: 'dark' },
+  play: async ({ canvasElement }) => {
+    canvasElement.querySelector<HTMLInputElement>('.euiHue__range')?.focus?.();
+  },
+};
+
 const StatefulColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   color: _color,
   format,
diff --git a/packages/eui/src/components/color_picker/color_picker.styles.ts b/packages/eui/src/components/color_picker/color_picker.styles.ts
index 0531e7f8240..f6a39fc8d11 100644
--- a/packages/eui/src/components/color_picker/color_picker.styles.ts
+++ b/packages/eui/src/components/color_picker/color_picker.styles.ts
@@ -12,7 +12,7 @@ import { UseEuiTheme, transparentize } from '../../services';
 import { logicalCSS, mathWithUnits } from '../../global_styling';
 
 export const euiColorPickerStyles = (euiThemeContext: UseEuiTheme) => {
-  const euiTheme = euiThemeContext.euiTheme;
+  const { euiTheme, highContrastMode } = euiThemeContext;
 
   // 5 columns of swatches + margins + border
   const colorPickerWidth = mathWithUnits(
@@ -37,10 +37,23 @@ export const euiColorPickerStyles = (euiThemeContext: UseEuiTheme) => {
       gap: ${euiTheme.size.s};
     `,
 
+    // `!important`s required to override default EuiFormControlLayout styles */
     euiColorPicker__alphaRange: css`
+      /* stylelint-disable declaration-no-important */
       .euiRangeInput {
         ${logicalCSS('min-width', 0)}
+        ${logicalCSS('width', `calc(3ch + ${euiTheme.size.l}) !important`)}
+        padding-inline: ${euiTheme.size.xs};
       }
+
+      .euiFormControlLayout__append {
+        padding-inline: ${euiTheme.size.xxs} !important;
+      }
+
+      & > .euiFormControlLayout {
+        flex-shrink: 0;
+      }
+      /* stylelint-enable declaration-no-important */
     `,
 
     // Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
@@ -48,7 +61,10 @@ export const euiColorPickerStyles = (euiThemeContext: UseEuiTheme) => {
     euiColorPicker__swatchInputIcon: css`
       .euiSwatchInput__stroke {
         fill: none;
-        stroke: ${transparentize(euiTheme.colors.fullShade, 0.2)};
+        stroke: ${transparentize(
+          euiTheme.colors.fullShade,
+          highContrastMode ? 1 : 0.2
+        )};
       }
     `,
   };
diff --git a/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts b/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts
index ea923c0248f..537e6b8572f 100644
--- a/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts
+++ b/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts
@@ -14,6 +14,10 @@ import {
   mathWithUnits,
   euiOutline,
 } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 
 export const euiColorPickerSwatchStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -27,10 +31,16 @@ export const euiColorPickerSwatchStyles = (euiThemeContext: UseEuiTheme) => {
         euiTheme.border.radius.medium,
         (x) => x / 2
       )};
-      border: ${euiTheme.border.width.thin} solid
-        ${transparentize(euiTheme.colors.fullShade, 0.1)};
-      box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
-        ${transparentize(euiTheme.colors.emptyShade, 0.05)};
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          border: ${euiTheme.border.width.thin} solid
+            ${transparentize(euiTheme.colors.fullShade, 0.1)};
+          box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
+            ${transparentize(euiTheme.colors.emptyShade, 0.05)};
+        `,
+        preferred: `border: ${euiTheme.border.thin};`,
+        forced: preventForcedColors(euiThemeContext),
+      })}
       cursor: pointer;
 
       &:disabled {
diff --git a/packages/eui/src/components/color_picker/hue.styles.ts b/packages/eui/src/components/color_picker/hue.styles.ts
index 49811a9524b..5cbf66c581e 100644
--- a/packages/eui/src/components/color_picker/hue.styles.ts
+++ b/packages/eui/src/components/color_picker/hue.styles.ts
@@ -10,6 +10,10 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme, transparentize } from '../../services';
 import { logicalCSS, mathWithUnits } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 import {
   euiRangeThumbPerBrowser,
   euiRangeThumbStyle,
@@ -35,6 +39,7 @@ export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
     euiHue: css`
       ${logicalCSS('height', height)}
       border-radius: ${height};
+
       /* stylelint-disable color-no-hex */
       background: linear-gradient(
         to right,
@@ -47,6 +52,11 @@ export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
         #ff0094 100%
       );
       /* stylelint-enable color-no-hex */
+
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `border: ${euiTheme.border.thin};`,
+        forced: preventForcedColors(euiThemeContext),
+      })}
     `,
 
     euiHue__range: css`
@@ -70,26 +80,45 @@ export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
       }
       /* stylelint-enable property-no-vendor-prefix */
 
-      /* Indicator styles - for some incredibly bizarre reason, stylelint is unhappy about
-         the semicolons here and can't be stylelint-disabled, hence the syntax workaround */
-      ${euiRangeThumbPerBrowser(
-        [
-          euiRangeThumbStyle(euiThemeContext),
-          'background-color: inherit',
-          `border-width: ${thumbBorder}`,
-          'border-radius: 100%',
-          `box-shadow: ${thumbBoxShadow}`,
-        ].join(';\n')
-      )}
+      ${euiRangeThumbPerBrowser(`
+        ${euiRangeThumbStyle(euiThemeContext)}
+        border-width: ${thumbBorder};
+
+        ${highContrastModeStyles(euiThemeContext, {
+          none: `
+            background-color: transparent;
+            box-shadow: ${thumbBoxShadow};
+          `,
+          preferred: `
+            background-color: ${euiTheme.colors.ghost};
+            border: ${thumbBorder} solid ${euiTheme.colors.ink};
+            box-shadow: none;
+          `,
+        })}
+      `)}
 
       /* Remove wrapping outline and show focus on thumb only */
       &:focus {
         outline: none;
       }
 
-      &:focus-visible {
-        ${euiRangeThumbPerBrowser(euiRangeThumbFocusBoxShadow(euiThemeContext))}
-      }
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          &:focus-visible {
+            ${euiRangeThumbPerBrowser(
+              euiRangeThumbFocusBoxShadow(euiThemeContext)
+            )}
+          }
+        `,
+        preferred: `
+          &:focus {
+            ${euiRangeThumbPerBrowser(`
+              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.ink};
+              outline-offset: 0;
+            `)}
+          }
+        `,
+      })}
     `,
   };
 };
diff --git a/packages/eui/src/components/color_picker/saturation.styles.ts b/packages/eui/src/components/color_picker/saturation.styles.ts
index a2198d81e80..39d78f8165b 100644
--- a/packages/eui/src/components/color_picker/saturation.styles.ts
+++ b/packages/eui/src/components/color_picker/saturation.styles.ts
@@ -14,23 +14,26 @@ import {
   logicalSizeCSS,
   mathWithUnits,
 } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 
 export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   const indicatorSize = euiTheme.size.m;
-
-  const borderRadius = mathWithUnits(
-    euiTheme.border.radius.medium,
-    (x) => x / 2
-  );
+  const borderRadius = euiTheme.border.radius.small;
+  // Without this slight decrease in border radius, the color can be seen
+  // peeking through the top left corner of the saturation gradient
+  const gradientBorderRadius = mathWithUnits(borderRadius, (x) => x - 1);
 
   return {
     euiSaturation: css`
       z-index: 3; /* Required to be above the hue slider, which can overlap */
       position: relative;
+      aspect-ratio: 1 / 1;
       ${logicalCSS('width', '100%')}
-      ${logicalCSS('padding-bottom', '100%')}
       border-radius: ${borderRadius};
       touch-action: none; /* prevent TouchMove events from scrolling page */
 
@@ -39,19 +42,42 @@ export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
         outline: none; /* Hide focus ring from tabindex=0 */
 
         .euiSaturation__indicator {
-          outline: none; /* Standardize indicator focus ring */
-          box-shadow: 0 0 0 ${euiTheme.focus.width} ${euiTheme.colors.primary};
-          border-color: ${euiTheme.colors.primary};
+          ${highContrastModeStyles(euiThemeContext, {
+            none: `
+              outline: none; /* Standardize indicator focus ring */
+              box-shadow: 0 0 0 ${euiTheme.focus.width} ${euiTheme.colors.primary};
+              border-color: ${euiTheme.colors.primary};
+            `,
+            preferred: `
+              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.ink};
+              outline-offset: 0;
+            `,
+          })}
         }
       }
+
+      ${highContrastModeStyles(euiThemeContext, {
+        // The border must be in an overlaid pseudo element to not affect the
+        // width/height/position of the indicator, or cause border-radius issues
+        preferred: `
+          &::after {
+            z-index: 1;
+            content: '';
+            position: absolute;
+            inset: 0;
+            border: ${euiTheme.border.thin};
+            border-radius: inherit;
+            pointer-events: none;
+          }
+        `,
+        forced: preventForcedColors(euiThemeContext),
+      })}
     `,
 
     euiSaturation__lightness: css`
       position: absolute;
       inset: 0;
-      ${logicalCSS('top', '-1px')} /* Hides a slight color inconsistency */
-
-      border-radius: ${borderRadius};
+      border-radius: ${gradientBorderRadius};
       background: linear-gradient(
         to right,
         rgba(255, 255, 255, 1),
@@ -61,28 +87,35 @@ export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
     euiSaturation__saturation: css`
       position: absolute;
       inset: 0;
-      ${logicalCSS('top', '-1px')} /* Hides a slight color inconsistency */
-
-      border-radius: ${borderRadius};
+      border-radius: ${gradientBorderRadius};
       background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
     `,
 
     euiSaturation__indicator: css`
+      z-index: 2;
       position: absolute;
       ${logicalSizeCSS(indicatorSize)}
       transform: translateX(-50%) translateY(-50%);
-      border: ${euiTheme.border.width.thin} solid
-        ${euiTheme.colors.darkestShade};
       border-radius: 100%;
 
-      &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: 100%;
-        border: ${euiTheme.border.width.thin} solid
-          ${euiTheme.colors.lightestShade};
-      }
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.darkestShade};
+
+          &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 100%;
+            border: ${euiTheme.border.width.thin} solid
+              ${euiTheme.colors.lightestShade};
+          }
+        `,
+        preferred: `
+          border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.ink};
+          background-color: ${euiTheme.colors.ghost};
+        `,
+      })}
     `,
   };
 };
diff --git a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index c0ed3b3cbec..acbb21c572a 100644
--- a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -141,7 +141,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 0px; left: -22px; z-index: 2000; inline-size: 0px;"
+        style="top: 0px; left: -18px; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div
diff --git a/packages/eui/src/components/comment_list/comment_event.styles.ts b/packages/eui/src/components/comment_list/comment_event.styles.ts
index 8ef8471d794..ae41884cbe0 100644
--- a/packages/eui/src/components/comment_list/comment_event.styles.ts
+++ b/packages/eui/src/components/comment_list/comment_event.styles.ts
@@ -9,6 +9,7 @@
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -28,7 +29,16 @@ export const euiCommentEventHeaderStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   return {
-    euiCommentEvent__header: css``,
+    euiCommentEvent__header: css`
+      ${highContrastModeStyles(euiThemeContext, {
+        // Remove duplicate high contrast panel borders
+        preferred: `
+          & > .euiPanel {
+            border: none;
+          }
+      `,
+      })}
+    `,
     border: css`
       ${logicalCSS('border-bottom-style', 'solid')}
       ${logicalCSS('border-bottom-width', euiTheme.border.width.thin)}
diff --git a/packages/eui/src/components/comment_list/comment_event.tsx b/packages/eui/src/components/comment_list/comment_event.tsx
index f0e1d464deb..a4f462a10fd 100644
--- a/packages/eui/src/components/comment_list/comment_event.tsx
+++ b/packages/eui/src/components/comment_list/comment_event.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 
-import { useEuiMemoizedStyles } from '../../services';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
 import { useEuiBorderColorCSS } from '../../global_styling';
 import { CommonProps } from '../common';
 import { IconType } from '../icon';
@@ -99,7 +99,6 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
   if (isTypeUpdate && !eventColor) {
     eventColor = 'transparent';
   }
-  const showEventBorders = isTypeRegular;
 
   const panelProps: EuiPanelProps = useMemo(
     () => ({
@@ -118,13 +117,16 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
   /**
    * Styles
    */
+  const { highContrastMode } = useEuiTheme();
+  const showEventBorders = isTypeRegular;
+  const showHighContrastBorder = isTypeUpdate && highContrastMode;
   const borderStyles = useEuiBorderColorCSS();
 
   const styles = useEuiMemoizedStyles(euiCommentEventStyles);
   const cssStyles = [
     styles.euiCommentEvent,
-    showEventBorders && styles.border,
-    showEventBorders && borderStyles[eventColor!],
+    (showEventBorders || showHighContrastBorder) && styles.border,
+    (showEventBorders || showHighContrastBorder) && borderStyles[eventColor!],
   ];
 
   const headerStyles = useEuiMemoizedStyles(euiCommentEventHeaderStyles);
diff --git a/packages/eui/src/components/comment_list/comment_list.stories.tsx b/packages/eui/src/components/comment_list/comment_list.stories.tsx
index 3dc994e160c..27c56022d1f 100644
--- a/packages/eui/src/components/comment_list/comment_list.stories.tsx
+++ b/packages/eui/src/components/comment_list/comment_list.stories.tsx
@@ -10,6 +10,8 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiText } from '../text';
+import { EuiTextArea } from '../form';
+import { EuiAvatar } from '../avatar';
 import { EuiButtonIcon } from '../button';
 import { EuiBadge } from '../badge';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
@@ -109,3 +111,87 @@ export const Playground: Story = {
     ],
   },
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    comments: [
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: 'added a comment',
+        timestamp: 'on 3rd March 2022',
+        children: 'Phishing emails have been on the rise since February',
+        actions: copyAction,
+      },
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: (
+          <EuiFlexGroup
+            responsive={false}
+            alignItems="center"
+            gutterSize="xs"
+            wrap
+          >
+            <EuiFlexItem grow={false}>added tags</EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>case</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>phishing</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge>security</EuiBadge>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ),
+        timestamp: 'on 3rd March 2022',
+        eventIcon: 'tag',
+        eventIconAriaLabel: 'tag',
+      },
+      {
+        username: 'system',
+        timelineAvatar: 'dot',
+        timelineAvatarAriaLabel: 'System',
+        event: 'pushed a new incident',
+        timestamp: 'on 4th March 2022',
+        eventColor: 'danger',
+      },
+      {
+        username: 'tiago',
+        timelineAvatar: <EuiAvatar name="tiago" />,
+        event: 'added a comment',
+        timestamp: 'on 4th March 2022',
+        actions: copyAction,
+        children: 'Take a look at this Office.exe',
+      },
+      {
+        username: 'emma',
+        timelineAvatar: <EuiAvatar name="emma" />,
+        event: (
+          <>
+            marked case as <EuiBadge color="warning">In progress</EuiBadge>
+          </>
+        ),
+        timestamp: 'on 4th March 2022',
+      },
+      {
+        username: 'you',
+        timelineAvatar: (
+          <EuiAvatar name="Cat" imageUrl="https://picsum.photos/id/40/64" />
+        ),
+        children: (
+          <EuiTextArea
+            fullWidth
+            value={`Thanks Tiago for taking a look.
+
+I also found something suspicious: Update.exe`}
+            onChange={() => {}}
+          />
+        ),
+      },
+    ],
+  },
+};
diff --git a/packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap b/packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
index 3f3195e9a97..f3eba43fe76 100644
--- a/packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
+++ b/packages/eui/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`EuiContextMenuItem tooltip behavior 1`] = `
       </div>
       <div
         class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
-        style="left: 4px; top: 0px;"
+        style="left: 3px; top: 100%;"
       />
       <div>
         tooltip content
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.styles.ts b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.styles.ts
index c551ee37d1a..6378acc53e1 100644
--- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.styles.ts
+++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.styles.ts
@@ -15,6 +15,7 @@ import {
   logicalSizeCSS,
   mathWithUnits,
 } from '../../../../global_styling';
+import { highContrastModeStyles } from '../../../../global_styling/functions/high_contrast';
 
 import { euiDataGridVariables } from '../../data_grid.styles';
 import {
@@ -126,6 +127,11 @@ export const euiDataGridCellActionsStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('width', '120%')}
         ${logicalCSS('height', '100%')}
       }
+
+      /* Remove button borders in high contrast mode */
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: 'border: none;',
+      })}
     `,
   };
 };
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
index da2ae883a92..5c87de9db26 100644
--- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
+++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
@@ -254,7 +254,7 @@ describe('EuiDataGridCellPopover', () => {
         openCellPopover('B');
         cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
           .should('have.css', 'width', '400px')
-          .should('have.css', 'height', '88px');
+          .should('have.css', 'height', '90px');
       });
 
       it('matches the width of the column if the column width is larger than 400px', () => {
@@ -270,7 +270,7 @@ describe('EuiDataGridCellPopover', () => {
         openCellPopover('B');
         cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
           .should('have.css', 'width', '500px')
-          .should('have.css', 'height', '64px');
+          .should('have.css', 'height', '66px');
       });
     });
   });
diff --git a/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap b/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap
index 6c37e70bbda..5ed8e1084c2 100644
--- a/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap
@@ -42,14 +42,18 @@ exports[`ColumnActions renders 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 23px; left: -22px; z-index: 2000;"
+        style="top: 23px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
index dbe3c0d14f1..0724e62dd0f 100644
--- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -54,14 +54,18 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
index a0f9485c137..2f51058cae0 100644
--- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -54,14 +54,18 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
index 516434fd731..defbe15c80e 100644
--- a/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
@@ -240,14 +240,18 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
index 7e0d365cc01..c8ad4ab1b10 100644
--- a/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -50,14 +50,18 @@ exports[`useDataGridKeyboardShortcuts [React 16] returns a popover containing a
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -299,14 +303,18 @@ exports[`useDataGridKeyboardShortcuts [React 17] returns a popover containing a
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -549,14 +557,18 @@ exports[`useDataGridKeyboardShortcuts [React 18] returns a popover containing a
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; z-index: 2000;"
+        style="top: 16px; left: -18px; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/datagrid/controls/column_selector.styles.ts b/packages/eui/src/components/datagrid/controls/column_selector.styles.ts
index 762f5adfc2c..cd26451674b 100644
--- a/packages/eui/src/components/datagrid/controls/column_selector.styles.ts
+++ b/packages/eui/src/components/datagrid/controls/column_selector.styles.ts
@@ -34,7 +34,9 @@ export const euiDataGridColumnSelectorStyles = (
       padding: ${euiTheme.size.xs};
 
       &.euiDataGridColumnSelector__item-isDragging {
-        ${euiShadowLarge(euiThemeContext)}
+        ${euiShadowLarge(euiThemeContext, {
+          borderAllInHighContrastMode: true,
+        })}
         background-color: ${euiTheme.colors.emptyShade};
       }
     `,
diff --git a/packages/eui/src/components/datagrid/controls/column_sorting.styles.ts b/packages/eui/src/components/datagrid/controls/column_sorting.styles.ts
index bff801e04c9..c2e85b86d6e 100644
--- a/packages/eui/src/components/datagrid/controls/column_sorting.styles.ts
+++ b/packages/eui/src/components/datagrid/controls/column_sorting.styles.ts
@@ -43,7 +43,9 @@ export const euiDataGridColumnSortingStyles = (
       ${logicalCSS('padding-horizontal', euiTheme.size.s)}
 
       &.euiDataGridColumnSorting__item-isDragging {
-        ${euiShadowLarge(euiThemeContext)}
+        ${euiShadowLarge(euiThemeContext, {
+          borderAllInHighContrastMode: true,
+        })}
         background-color: ${euiTheme.colors.emptyShade};
       }
     `,
diff --git a/packages/eui/src/components/datagrid/data_grid.styles.ts b/packages/eui/src/components/datagrid/data_grid.styles.ts
index 49b92c8782b..d63564bb3fa 100644
--- a/packages/eui/src/components/datagrid/data_grid.styles.ts
+++ b/packages/eui/src/components/datagrid/data_grid.styles.ts
@@ -15,6 +15,7 @@ import {
   logicalSizeCSS,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 export const euiDataGridVariables = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -79,14 +80,24 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
           padding: ${cellPadding[size]};
         }
 
-        /* Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780 */
         .euiDataGridRowCell__content--lineCountHeight,
         .euiDataGridRowCell__content--autoBelowLineCountHeight {
-          ${logicalCSS('padding-bottom', 0)}
-          ${logicalCSS(
-            'border-bottom',
-            `${cellPadding[size]} solid transparent`
-          )}
+          ${highContrastModeStyles(euiThemeContext, {
+            // Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780
+            none: `
+              ${logicalCSS('padding-bottom', 0)}
+              ${logicalCSS(
+                'border-bottom',
+                `${cellPadding[size]} solid transparent`
+              )}
+            `,
+            // Unfortunately this workaround backfires in Windows high contrast themes, which force
+            // border-color, so we can't use it. We'll use a clip-path workaround instead.
+            get forced() {
+              const bottomY = `calc(100% - ${cellPadding[size]})`;
+              return `clip-path: polygon(0 0, 100% 0, 100% ${bottomY}, 0 ${bottomY});`;
+            },
+          })}
         }
 
         /* Ensure the column actions button maintains its size for accessible click/tap targeting
diff --git a/packages/eui/src/components/datagrid/pagination/data_grid_pagination.styles.ts b/packages/eui/src/components/datagrid/pagination/data_grid_pagination.styles.ts
index 006f5033efc..0feb59d069d 100644
--- a/packages/eui/src/components/datagrid/pagination/data_grid_pagination.styles.ts
+++ b/packages/eui/src/components/datagrid/pagination/data_grid_pagination.styles.ts
@@ -18,12 +18,22 @@ export const euiDataGridPaginationStyles = ({ euiTheme }: UseEuiTheme) => ({
     ${logicalCSS('padding-top', euiTheme.size.xs)}
 
     .euiDataGrid--fullScreen & {
+      position: relative;
       ${logicalCSS('padding-bottom', euiTheme.size.xs)}
       background-color: ${euiTheme.colors.lightestShade};
 
-      /* Use box-shadow instead of border-top to avoid duplicating the border-bottom on grid cells */
-      box-shadow: ${euiTheme.border.width.thin} 0 0
-        ${euiTheme.border.width.thin} ${euiTheme.border.color};
+      /* Use a pseudo element instead of:
+       * 1. border-top directly on the element, to avoid duplicating the border-bottom on grid cells
+       * 2. box-shadow, so that the border renders on Windows high contrast themes
+       */
+      &::before {
+        content: '';
+        position: absolute;
+        ${logicalCSS('top', `-${euiTheme.border.width.thin}`)}
+        ${logicalCSS('horizontal', 0)}
+        ${logicalCSS('border-top', euiTheme.border.thin)}
+        pointer-events: none;
+      }
     }
   `,
 });
diff --git a/packages/eui/src/components/datagrid/utils/scrolling.styles.ts b/packages/eui/src/components/datagrid/utils/scrolling.styles.ts
index 640b1544c5e..535189337b5 100644
--- a/packages/eui/src/components/datagrid/utils/scrolling.styles.ts
+++ b/packages/eui/src/components/datagrid/utils/scrolling.styles.ts
@@ -10,6 +10,7 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../services';
 import { logicalCSS, mathWithUnits } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 
 export const euiDataGridScrollBarStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -29,26 +30,52 @@ export const euiDataGridScrollBarStyles = (euiThemeContext: UseEuiTheme) => {
       /* Ensure the underlying grid is still interactable */
       pointer-events: none;
 
-      /* Ensure the scrolling data grid body always has border edges regardless of cell position */
-      box-shadow: inset 0 0 0 ${borderWidth} ${borderColor};
+      ${highContrastModeStyles(euiThemeContext, {
+        // Ensure the scrolling data grid body always has border edges regardless of cell position
+        none: `box-shadow: inset 0 0 0 ${borderWidth} ${borderColor};`,
+        // Windows high contrast themes ignore box-shadow, so use a pseudo element workaround
+        forced: `
+          &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            ${logicalCSS('border-vertical', euiTheme.border.thin)}
+          }
+          &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            ${logicalCSS('border-horizontal', euiTheme.border.thin)}
+          }
+        `,
+      })}
 
       .euiDataGrid--bordersHorizontal & {
-        box-shadow: inset 0 -${mathWithUnits(borderWidth, (x) => x * 2)} 0 -${borderWidth}
-          ${borderColor};
+        ${highContrastModeStyles(euiThemeContext, {
+          none: `
+            box-shadow: inset 0 -${mathWithUnits(
+              borderWidth,
+              (x) => x * 2
+            )} 0 -${borderWidth} ${borderColor};
+          `,
+          forced: `
+            &::after {
+              display: none;
+            }
+          `,
+        })}
       }
     `,
     // Ensure the horizontal scrollbar has a top border
     euiDataGrid__scrollBarOverlayBottom: css`
       position: absolute;
       inset-inline: 0;
-      ${logicalCSS('height', borderWidth)}
-      background-color: ${borderColor};
+      ${logicalCSS('border-top', euiTheme.border.thin)}
     `,
     // Ensure the vertical scrollbar has a left border
     euiDataGrid__scrollBarOverlayRight: css`
       position: absolute;
-      ${logicalCSS('width', borderWidth)}
-      background-color: ${borderColor};
+      ${logicalCSS('border-left', euiTheme.border.thin)}
     `,
     // Note: Scroll bar border positions are set via JS inline style, since
     // JS has access to the exact OS scrollbar width/height and CSS doesn't
diff --git a/packages/eui/src/components/date_picker/date_picker.stories.tsx b/packages/eui/src/components/date_picker/date_picker.stories.tsx
index c0fb6439e9e..9aea2690272 100644
--- a/packages/eui/src/components/date_picker/date_picker.stories.tsx
+++ b/packages/eui/src/components/date_picker/date_picker.stories.tsx
@@ -205,6 +205,16 @@ export const RestrictedDaySelect: Story = {
   },
 };
 
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    ...TimeSelect.args,
+    ...RestrictedDaySelect.args,
+    selected: moment('01/02/1970').hours(23).minutes(0),
+  },
+};
+
 const StatefulDatePicker = ({
   selected,
   onChange,
diff --git a/packages/eui/src/components/date_picker/date_picker.styles.ts b/packages/eui/src/components/date_picker/date_picker.styles.ts
index 598a01615b5..e7e05b034ba 100644
--- a/packages/eui/src/components/date_picker/date_picker.styles.ts
+++ b/packages/eui/src/components/date_picker/date_picker.styles.ts
@@ -53,7 +53,9 @@ export const euiDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
       shadow: css`
         .euiFormControlLayout {
           background-color: ${euiTheme.colors.emptyShade};
-          ${euiShadowMedium(euiThemeContext)}
+          ${euiShadowMedium(euiThemeContext, {
+            borderAllInHighContrastMode: true,
+          })}
         }
       `,
       // Needs to come before shadow CSS so that it doesn't override their background-colors
diff --git a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
index fb6a21b5711..612e49e58db 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
+++ b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
@@ -118,6 +118,12 @@ export const FullWidth: Story = {
   render: (args) => <StatefulPlayground {...args} />,
 };
 
+export const HighContrast: Story = {
+  ...RestrictedSelection,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
+
 /**
  * Helpers
  */
diff --git a/packages/eui/src/components/date_picker/date_picker_range.styles.ts b/packages/eui/src/components/date_picker/date_picker_range.styles.ts
index 49aec5e60d0..6c6ef5215dd 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.styles.ts
+++ b/packages/eui/src/components/date_picker/date_picker_range.styles.ts
@@ -96,7 +96,9 @@ export const euiDatePickerRangeInlineStyles = (
     `,
     shadow: css`
       .euiFormControlLayoutDelimited {
-        ${euiShadowMedium(euiThemeContext)}
+        ${euiShadowMedium(euiThemeContext, {
+          borderAllInHighContrastMode: true,
+        })}
       }
     `,
 
diff --git a/packages/eui/src/components/date_picker/react_date_picker.styles.ts b/packages/eui/src/components/date_picker/react_date_picker.styles.ts
index cc2654106fb..661050d2f22 100644
--- a/packages/eui/src/components/date_picker/react_date_picker.styles.ts
+++ b/packages/eui/src/components/date_picker/react_date_picker.styles.ts
@@ -16,8 +16,10 @@ import {
   euiFontSize,
   euiYScroll,
   logicalCSS,
+  logicalSizeCSS,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import {
   euiButtonColor,
   euiButtonEmptyColor,
@@ -30,7 +32,13 @@ import {
   euiFormControlDefaultShadow,
 } from '../form/form.styles';
 
-export const euiDatePickerVariables = ({ euiTheme }: UseEuiTheme) => {
+export const euiDatePickerVariables = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+  const unsetHighContrastBorder = <T extends object>(styles: T) => ({
+    ...styles,
+    border: undefined,
+  });
+
   return {
     gapSize: euiTheme.size.xs,
     get paddingSize() {
@@ -44,13 +52,59 @@ export const euiDatePickerVariables = ({ euiTheme }: UseEuiTheme) => {
         (x, y) => x + y
       );
     },
+
+    colors: {
+      day: {
+        inMonth: euiTheme.colors.title,
+        outsideMonth: euiTheme.colors.subduedText,
+        header: euiTheme.colors.subduedText,
+        today: euiTheme.colors.primary,
+      },
+
+      hover: unsetHighContrastBorder(
+        euiButtonColor(euiThemeContext, 'primary')
+      ),
+      disabled: unsetHighContrastBorder(
+        euiButtonColor(euiThemeContext, 'disabled')
+      ),
+
+      get inRange() {
+        return this.hover;
+      },
+      inRangeAndDisabled: {
+        backgroundColor: euiButtonEmptyColor(euiThemeContext, 'primary')
+          .backgroundColor,
+      },
+
+      selected:
+        highContrastMode !== 'forced'
+          ? euiButtonFillColor(euiThemeContext, 'primary')
+          : {
+              color: euiTheme.colors.emptyShade,
+              backgroundColor: euiTheme.colors.fullShade,
+              forcedColorAdjust: 'none',
+            },
+      selectedAndDisabled:
+        highContrastMode !== 'forced'
+          ? euiButtonColor(euiThemeContext, 'danger')
+          : {
+              color: euiTheme.colors.dangerText,
+              backgroundColor: euiTheme.colors.emptyShade,
+              border: `${euiTheme.border.width.thin} solid ${euiTheme.colors.dangerText};`,
+            },
+
+      highlighted: euiButtonColor(euiThemeContext, 'success'),
+    },
+
+    animationSpeed: euiTheme.animation.fast,
   };
 };
+type DatePickerVars = ReturnType<typeof euiDatePickerVariables>;
 
 export const euiReactDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
-  const { gapSize, paddingSize, headerOffset } =
-    euiDatePickerVariables(euiThemeContext);
+  const datePickerVars = euiDatePickerVariables(euiThemeContext);
+  const { gapSize, paddingSize, headerOffset } = datePickerVars;
 
   return {
     euiReactDatePicker: css`
@@ -137,14 +191,17 @@ export const euiReactDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
         }
       }
 
-      ${_monthYearDropdowns(euiThemeContext)}
-      ${_dayCalendarStyles(euiThemeContext)}
-      ${_timeSelectStyles(euiThemeContext)}
+      ${_monthYearDropdowns(euiThemeContext, datePickerVars)}
+      ${_dayCalendarStyles(euiThemeContext, datePickerVars)}
+      ${_timeSelectStyles(euiThemeContext, datePickerVars)}
     `,
   };
 };
 
-export const _monthYearDropdowns = (euiThemeContext: UseEuiTheme) => {
+const _monthYearDropdowns = (
+  euiThemeContext: UseEuiTheme,
+  { colors }: DatePickerVars
+) => {
   const { euiTheme } = euiThemeContext;
   const formStyles = euiFormControlStyles(euiThemeContext);
 
@@ -188,7 +245,7 @@ export const _monthYearDropdowns = (euiThemeContext: UseEuiTheme) => {
       padding: ${euiTheme.size.xs};
       background-color: ${euiTheme.colors.emptyShade};
       border-radius: ${euiTheme.border.radius.medium};
-      ${euiShadowSmall(euiThemeContext)}
+      ${euiShadowSmall(euiThemeContext, { borderAllInHighContrastMode: true })}
     }
 
     .react-datepicker__year-dropdown {
@@ -202,10 +259,11 @@ export const _monthYearDropdowns = (euiThemeContext: UseEuiTheme) => {
     .react-datepicker__year-option,
     .react-datepicker__month-option,
     .react-datepicker__month-year-option {
+      display: flex;
+      align-items: center;
+      ${logicalCSS('height', euiTheme.size.l)}
       ${logicalCSS('margin-vertical', euiTheme.size.xs)}
       ${logicalCSS('padding-horizontal', euiTheme.size.s)}
-      ${logicalCSS('height', euiTheme.size.l)}
-      line-height: ${euiTheme.size.l};
       font-size: ${euiFontSize(euiThemeContext, 's').fontSize};
       border-radius: ${euiTheme.border.radius.small};
       cursor: pointer;
@@ -215,12 +273,12 @@ export const _monthYearDropdowns = (euiThemeContext: UseEuiTheme) => {
       }
 
       &--preselected {
-        background-color: ${euiTheme.focus.backgroundColor};
+        ${colors.hover}
       }
 
       &--selected_year,
       &--selected_month {
-        ${euiButtonFillColor(euiThemeContext, 'primary')}
+        ${colors.selected}
       }
 
       /* Hide checkmark next to selected option */
@@ -231,42 +289,37 @@ export const _monthYearDropdowns = (euiThemeContext: UseEuiTheme) => {
   `;
 };
 
-export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
+const _dayCalendarStyles = (
+  euiThemeContext: UseEuiTheme,
+  { gapSize, colors, animationSpeed }: DatePickerVars
+) => {
   const { euiTheme } = euiThemeContext;
-  const { gapSize } = euiDatePickerVariables(euiThemeContext);
 
   const daySize = euiTheme.size.xl;
   const dayMargin = mathWithUnits(gapSize, (x) => x / 2);
-  const rangeBackgroundColor = euiButtonColor(
-    euiThemeContext,
-    'primary'
-  ).backgroundColor;
   const rangeMarginOffset = mathWithUnits(dayMargin, (x) => x * 1.5);
 
-  const animationSpeed = euiTheme.animation.fast;
-
   return css`
     .react-datepicker__day-names,
     .react-datepicker__week {
       display: flex;
-      /* stylelint-disable no-extra-semicolons */
       justify-content: space-between;
       flex-grow: 1;
-      color: ${euiTheme.colors.subduedText};
+      color: ${colors.day.header};
     }
 
     .react-datepicker__day-name,
     .react-datepicker__day {
-      display: inline-block;
-      ${logicalCSS('width', daySize)}
-      line-height: ${daySize};
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      ${logicalSizeCSS(daySize)}
       margin: ${dayMargin};
       font-weight: ${euiTheme.font.weight.medium};
-      text-align: center;
     }
 
     .react-datepicker__day {
-      color: ${euiTheme.colors.title};
+      color: ${colors.day.inMonth};
       border-radius: ${euiTheme.border.radius.small};
 
       ${euiCanAnimate} {
@@ -275,7 +328,7 @@ export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
       }
 
       &:hover {
-        ${euiButtonColor(euiThemeContext, 'primary')}
+        ${colors.hover}
         text-decoration: underline;
         cursor: pointer;
 
@@ -286,60 +339,88 @@ export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
       }
 
       &--today {
-        color: ${euiTheme.colors.primary};
+        color: ${colors.day.today};
         font-weight: ${euiTheme.font.weight.bold};
       }
 
       &--outside-month {
-        color: ${euiTheme.colors.subduedText};
+        color: ${colors.day.outsideMonth};
       }
 
       &--highlighted,
       &--highlighted:hover {
-        ${euiButtonColor(euiThemeContext, 'success')};
+        ${colors.highlighted}
       }
 
       &--in-range,
       &--in-range:hover {
-        ${euiButtonColor(euiThemeContext, 'primary')};
-      }
-
-      /* Ranges use 2 side box-shadows that are the same as the button
-       * background to fill the gap between margins */
-      /* stylelint-disable-next-line selector-not-notation */
-      &--in-range:not(&--selected):not(:hover):not(&--disabled) {
-        box-shadow: -${rangeMarginOffset} 0 ${rangeBackgroundColor},
-          ${rangeMarginOffset} 0 ${rangeBackgroundColor};
-        border-radius: 0;
-
-        &:first-child {
-          box-shadow: ${rangeMarginOffset} 0 ${rangeBackgroundColor};
-        }
-
-        &:last-child {
-          box-shadow: -${rangeMarginOffset} 0 ${rangeBackgroundColor};
-        }
-      }
-      /* Animate smoothly on hover */
-      &--in-range:not(&--selected) {
-        ${euiCanAnimate} {
-          transition: transform ${animationSpeed} ease-in-out,
-            box-shadow ${animationSpeed} ease-in-out,
-            border-radius ${animationSpeed} ease-in-out,
-            background-color ${animationSpeed} ease-in;
-        }
-      }
+        ${colors.inRange}
+      }
+
+      ${highContrastModeStyles(euiThemeContext, {
+        // Ranges use 2 side box-shadows that are the same as the button
+        // background to fill the gap between margins
+        none: `
+          &--in-range:not(&--selected):not(:hover):not(&--disabled) {
+            box-shadow: -${rangeMarginOffset} 0 ${colors.inRange.backgroundColor},
+              ${rangeMarginOffset} 0 ${colors.inRange.backgroundColor};
+            border-radius: 0;
+
+            &:first-child {
+              box-shadow: ${rangeMarginOffset} 0 ${colors.inRange.backgroundColor};
+            }
+
+            &:last-child {
+              box-shadow: -${rangeMarginOffset} 0 ${colors.inRange.backgroundColor};
+            }
+          }
+          /* Animate smoothly on hover */
+          &--in-range:not(&--selected) {
+            ${euiCanAnimate} {
+              transition: transform ${animationSpeed} ease-in-out,
+                box-shadow ${animationSpeed} ease-in-out,
+                border-radius ${animationSpeed} ease-in-out,
+                background-color ${animationSpeed} ease-in;
+            }
+          }
+        `,
+        // In Windows high contrast mode, use borders and pseudo elements instead of background colors
+        forced: `
+          &--in-range:not(&--selected) {
+            position: relative;
+            transform: none;
+
+            &::before {
+              content: '';
+              position: absolute;
+              inset-inline: -${dayMargin};
+              inset-block: ${dayMargin};
+              border-block: ${euiTheme.border.thin};
+              pointer-events: none;
+            }
+          }
+          &--range-start:not(&--selected)::before {
+            border-inline-start: ${euiTheme.border.thin};
+          }
+          &--range-end:not(&--selected)::before {
+            border-inline-end: ${euiTheme.border.thin};
+          }
+        `,
+      })}
 
       &--selected,
       &--selected:hover,
       &--in-selecting-range,
       &--in-selecting-range:hover {
-        ${euiButtonFillColor(euiThemeContext, 'primary')}
+        ${colors.selected}
       }
 
       &--disabled,
       &--disabled:hover {
-        ${euiButtonColor(euiThemeContext, 'disabled')}
+        ${colors.disabled}
+        ${highContrastModeStyles(euiThemeContext, {
+          forced: 'opacity: 0.5;',
+        })}
         cursor: not-allowed;
         text-decoration: none;
         transform: none;
@@ -348,23 +429,27 @@ export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
       &--disabled.react-datepicker__day--in-range:not(&--selected) {
         &,
         &:hover {
-          background-color: ${euiButtonEmptyColor(euiThemeContext, 'primary')
-            .backgroundColor};
+          ${colors.inRangeAndDisabled}
         }
       }
 
       &--in-selecting-range:not(&--in-range),
       &--disabled.react-datepicker__day--selected,
       &--disabled.react-datepicker__day--selected:hover {
-        ${euiButtonColor(euiThemeContext, 'danger')}
+        ${colors.selectedAndDisabled}
+        ${highContrastModeStyles(euiThemeContext, {
+          forced: 'opacity: 1;',
+        })}
       }
     }
   `;
 };
 
-export const _timeSelectStyles = (euiThemeContext: UseEuiTheme) => {
+const _timeSelectStyles = (
+  euiThemeContext: UseEuiTheme,
+  { gapSize, colors, animationSpeed }: DatePickerVars
+) => {
   const { euiTheme } = euiThemeContext;
-  const { gapSize } = euiDatePickerVariables(euiThemeContext);
 
   return css`
     .react-datepicker__time-container {
@@ -403,14 +488,15 @@ export const _timeSelectStyles = (euiThemeContext: UseEuiTheme) => {
     }
 
     .react-datepicker__time-list-item {
-      ${logicalCSS('margin-horizontal', 'auto')};
-      ${logicalCSS('padding-horizontal', euiTheme.size.s)};
-      ${logicalCSS('height', euiTheme.size.l)}
-      line-height: ${euiTheme.size.l};
+      display: flex;
+      justify-content: align-center;
+      align-items: center;
+      ${logicalCSS('min-height', euiTheme.size.l)}
+      ${logicalCSS('margin-horizontal', 'auto')}
+      ${logicalCSS('padding-horizontal', euiTheme.size.s)}
       font-size: ${euiFontSize(euiThemeContext, 'xs').fontSize};
       font-weight: ${euiTheme.font.weight.medium};
       white-space: nowrap;
-      text-align: center;
       border-radius: ${euiTheme.border.radius.small};
 
       &:not(:disabled):hover {
@@ -420,24 +506,31 @@ export const _timeSelectStyles = (euiThemeContext: UseEuiTheme) => {
 
       &--disabled {
         cursor: not-allowed;
-        color: ${euiTheme.colors.disabledText};
+        color: ${colors.disabled.color};
       }
 
       &--injected {
-        ${euiButtonEmptyColor(euiThemeContext, 'success')}
+        ${colors.highlighted}
       }
 
       &--selected {
-        ${euiButtonFillColor(euiThemeContext, 'primary')}
+        ${colors.selected}
       }
 
       /* closest current time but not selected (also applied when using arrow keys to indicate focus) */
       &--preselected {
-        background-color: ${euiTheme.focus.backgroundColor};
+        ${colors.hover}
+        ${highContrastModeStyles(euiThemeContext, {
+          // Use negative margins to offset the added border width
+          forced: `
+            border: ${euiTheme.border.thin};
+            margin-inline: -${euiTheme.border.width.thin};
+          `,
+        })}
       }
 
       ${euiCanAnimate} {
-        transition: background-color ${euiTheme.animation.fast} ease-in;
+        transition: background-color ${animationSpeed} ease-in;
       }
     }
 
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
index b96934c9020..74c4c637c44 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
@@ -20,11 +20,13 @@ import {
   logicalCSS,
   mathWithUnits,
 } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 import {
   euiFormVariables,
   euiFormControlDefaultShadow,
   euiFormControlInvalidStyles,
   euiFormControlDisabledStyles,
+  euiFormControlShowBackgroundUnderline,
 } from '../../form/form.styles';
 
 export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
@@ -141,7 +143,10 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
       euiSuperDatePicker__formControlLayout: css`
         .euiFormControlLayout__childrenWrapper {
           ${euiFormControlDefaultShadow(euiThemeContext)}
-          box-shadow: none;
+          ${highContrastModeStyles(euiThemeContext, {
+            none: 'box-shadow: none;',
+            preferred: 'border: none;',
+          })}
         }
       `,
       default: css`
@@ -152,14 +157,19 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
 
         /* Focus/selection underline per-button */
         .euiDatePopoverButton {
-          ${euiFormControlDefaultShadow(euiThemeContext)}
-          box-shadow: none;
+          ${euiFormControlDefaultShadow(euiThemeContext, {
+            withBorder: false,
+            withBackgroundColor: false,
+          })}
         }
 
         .euiDatePopoverButton:focus,
         .euiPopover-isOpen .euiDatePopoverButton {
           --euiFormControlStateColor: ${euiTheme.colors.primary};
-          background-size: 100% 100%;
+          ${euiFormControlShowBackgroundUnderline(
+            euiThemeContext,
+            euiTheme.colors.primary
+          )}
         }
       `,
       disabled: css`
@@ -186,16 +196,31 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
 
         /* Focus/selection underline per-button */
         .euiDatePopoverButton {
-          ${euiFormControlDefaultShadow(euiThemeContext)}
-          background-color: inherit;
-          box-shadow: none;
+          ${euiFormControlDefaultShadow(euiThemeContext, {
+            withBorder: false,
+            withBackgroundColor: false,
+          })}
         }
 
         .euiDatePopoverButton:focus,
         .euiPopover-isOpen .euiDatePopoverButton {
           --euiFormControlStateColor: ${euiTheme.colors.success};
-          background-size: 100% 100%;
+          ${euiFormControlShowBackgroundUnderline(
+            euiThemeContext,
+            euiTheme.colors.success
+          )}
         }
+
+        ${highContrastModeStyles(euiThemeContext, {
+          // Force the fill color of all icons/svgs to give a bit more indication of state,
+          // since Windows high contrast themes otherwise override background/text color
+          forced: `
+            svg,
+            & + * svg {
+              fill: ${euiTheme.colors.success};
+            }
+          `,
+        })}
       `,
     },
   };
diff --git a/packages/eui/src/components/empty_prompt/empty_prompt.stories.tsx b/packages/eui/src/components/empty_prompt/empty_prompt.stories.tsx
index db5e316f1e5..4b97fdf5fac 100644
--- a/packages/eui/src/components/empty_prompt/empty_prompt.stories.tsx
+++ b/packages/eui/src/components/empty_prompt/empty_prompt.stories.tsx
@@ -97,3 +97,18 @@ export const PageTemplate: Story = {
     ),
   },
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: Playground.args,
+};
+
+export const HighContrastTransparent: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    ...Playground.args,
+    color: 'transparent',
+  },
+};
diff --git a/packages/eui/src/components/empty_prompt/empty_prompt.styles.ts b/packages/eui/src/components/empty_prompt/empty_prompt.styles.ts
index 07da2e3dddd..8f7e706a6d6 100644
--- a/packages/eui/src/components/empty_prompt/empty_prompt.styles.ts
+++ b/packages/eui/src/components/empty_prompt/empty_prompt.styles.ts
@@ -14,6 +14,7 @@ import {
   logicalCSS,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 
 export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
@@ -141,9 +142,15 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
       // Colors
       transparent: css`
         background-color: ${euiTheme.colors.body};
+        ${highContrastModeStyles(euiThemeContext, {
+          preferred: `border: ${euiTheme.border.thin};`,
+        })}
       `,
       plain: css`
         background-color: ${euiTheme.colors.body};
+        ${highContrastModeStyles(euiThemeContext, {
+          preferred: logicalCSS('border-top', generateFooterBorder('plain')),
+        })}
       `,
       subdued: css`
         ${logicalCSS('border-top', generateFooterBorder('subdued'))}
diff --git a/packages/eui/src/components/error_boundary/error_boundary.stories.tsx b/packages/eui/src/components/error_boundary/error_boundary.stories.tsx
index 535abafcdec..579941fc2b8 100644
--- a/packages/eui/src/components/error_boundary/error_boundary.stories.tsx
+++ b/packages/eui/src/components/error_boundary/error_boundary.stories.tsx
@@ -37,3 +37,9 @@ export const Playground: Story = {
     onError: console.log,
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/error_boundary/error_boundary.styles.ts b/packages/eui/src/components/error_boundary/error_boundary.styles.ts
index 27adf527c3a..f1c34cdc27a 100644
--- a/packages/eui/src/components/error_boundary/error_boundary.styles.ts
+++ b/packages/eui/src/components/error_boundary/error_boundary.styles.ts
@@ -8,24 +8,44 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { transparentize, UseEuiTheme } from '../../services';
 
-export const euiErrorBoundaryStyles = ({ euiTheme }: UseEuiTheme) => {
-  const color1 = transparentize(euiTheme.colors.danger, 0.25);
-  const color2 = transparentize(euiTheme.colors.danger, 0.05);
+export const euiErrorBoundaryStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+  const color1 = transparentize(
+    euiTheme.colors.danger,
+    highContrastMode ? 1 : 0.25
+  );
+  const color2 = transparentize(
+    euiTheme.colors.danger,
+    highContrastMode ? 0.25 : 0.05
+  );
 
   return {
     euiErrorBoundary: css`
-      background-image: repeating-linear-gradient(
-        45deg,
-        ${color1},
-        ${color1} 1px,
-        ${color2} 1px,
-        ${color2} 19px
-      );
-      background-size: 54px 54px; /* Fix for Safari 15.4+ */
       ${logicalCSS('padding-horizontal', euiTheme.size.base)}
       ${logicalCSS('padding-vertical', euiTheme.size.base)}
+
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          background-image: repeating-linear-gradient(
+            45deg,
+            ${color1},
+            ${color1} 1px,
+            ${color2} 1px,
+            ${color2} 19px
+          );
+          background-size: 54px 54px; /* Fix for Safari 15.4+ */
+        `,
+        // Windows high contrast themes ignore background-images that aren't url()s.
+        // We can fake a basic danger-colored "border" with a little inline SVG trickery
+        forced: `
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='${encodeURIComponent(
+            euiTheme.colors.dangerText
+          )}' /%3E%3C/svg%3E");
+        `,
+      })}
     `,
   };
 };
diff --git a/packages/eui/src/components/expression/expression.stories.tsx b/packages/eui/src/components/expression/expression.stories.tsx
index 788b24c6cde..ed5ad9b7d43 100644
--- a/packages/eui/src/components/expression/expression.stories.tsx
+++ b/packages/eui/src/components/expression/expression.stories.tsx
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiExpression, EuiExpressionProps } from './expression';
@@ -34,3 +35,74 @@ export const Playground: Story = {
     value: 'World',
   },
 };
+
+export const KitchenSink: Story = {
+  tags: ['vrt-only'],
+  render: () => (
+    <>
+      {/* Inline */}
+      <EuiExpression description="Select" value="count(*)" onClick={() => {}} />
+      <EuiExpression
+        description="From"
+        value="kibana_sample_data_ky_counties left"
+      />
+      <EuiExpression
+        description="join"
+        value="kibana_sample_data_ky_avl right"
+        onClick={() => {}}
+      />
+      <EuiExpression
+        description="on"
+        value="left.smis = right.kytccountynmbr"
+      />
+      <EuiExpression
+        description="group by"
+        value="right.kytccountynmbr"
+        onClick={() => {}}
+        color="accent"
+      />
+      <EuiExpression description="sort by" value="count" />
+
+      {/* Columns */}
+      <EuiExpression
+        display="columns"
+        description="indices"
+        value={
+          <>
+            <p>.kibana_task_manager,</p>
+            <p>kibana_sample_data_ecommerce</p>
+          </>
+        }
+        onClick={() => {}}
+      />
+      <EuiExpression
+        display="columns"
+        description="when"
+        value="count()"
+        isActive={true}
+        onClick={() => {}}
+        // Show focus state but hide the outline for VRT
+        autoFocus
+        css={{ outline: 'none !important' }}
+      />
+      <EuiExpression
+        display="columns"
+        description="except"
+        value="kibana_sample_data_ky_counties"
+        isInvalid={true}
+      />
+      <EuiExpression
+        display="columns"
+        description="join"
+        descriptionWidth={50}
+        value="with custom description width"
+      />
+    </>
+  ),
+};
+
+export const HighContrast: Story = {
+  ...KitchenSink,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/expression/expression.styles.ts b/packages/eui/src/components/expression/expression.styles.ts
index 7a43f176717..6f67600d436 100644
--- a/packages/eui/src/components/expression/expression.styles.ts
+++ b/packages/eui/src/components/expression/expression.styles.ts
@@ -16,6 +16,7 @@ import {
   euiTextTruncate,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { transparentize } from '../../services/color';
 import { UseEuiTheme } from '../../services';
 
@@ -34,10 +35,6 @@ export const euiExpressionStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiTextBreakWord()}
       display: inline-block;
       font-family: ${euiTheme.font.familyCode};
-      ${logicalCSS(
-        'border-bottom',
-        `${euiTheme.border.width.thick} solid transparent`
-      )}
       ${euiFontSize(euiThemeContext, 's')}
       ${logicalTextAlignCSS('left')}
       ${logicalShorthandCSS(
@@ -57,15 +54,17 @@ export const euiExpressionStyles = (euiThemeContext: UseEuiTheme) => {
 
     // Variants
     columns: css`
-      border-color: transparent;
-      /* Ensures there's no flash of the dashed style before turning solid for the active state */
-      ${logicalCSS('border-bottom-style', 'solid')}
-      ${logicalCSS('margin-bottom', euiTheme.size.xs)}
-
-      ${logicalCSS('width', '100%')}
       display: flex;
+      ${logicalCSS('width', '100%')}
+      ${logicalCSS('margin-bottom', euiTheme.size.xs)}
       padding: ${euiTheme.size.xs};
-      border-radius: ${euiTheme.size.xs};
+      ${highContrastModeStyles(euiThemeContext, {
+        // Render the bottom border in high contrast mode for extra visibility
+        none: `
+          border-radius: ${euiTheme.size.xs};
+          border-color: transparent;
+        `,
+      })}
     `,
 
     truncate: css`
diff --git a/packages/eui/src/components/filter_group/filter_button.stories.tsx b/packages/eui/src/components/filter_group/filter_button.stories.tsx
index bf881964f74..ef0979a0a28 100644
--- a/packages/eui/src/components/filter_group/filter_button.stories.tsx
+++ b/packages/eui/src/components/filter_group/filter_button.stories.tsx
@@ -94,3 +94,9 @@ export const FullWidthAndGrow: Story = {
     </EuiFilterGroup>
   ),
 };
+
+export const HighContrast: Story = {
+  ...FullWidthAndGrow,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/filter_group/filter_button.styles.ts b/packages/eui/src/components/filter_group/filter_button.styles.ts
index 682458bde8c..7025a0accdc 100644
--- a/packages/eui/src/components/filter_group/filter_button.styles.ts
+++ b/packages/eui/src/components/filter_group/filter_button.styles.ts
@@ -28,17 +28,39 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
   const { controlHeight, borderColor } = euiFormVariables(euiThemeContext);
 
-  // Box shadow simulates borders without affecting width
-  const leftBoxShadow = `-${euiTheme.border.width.thin} 0 0 0 ${borderColor}`;
+  const border = `${euiTheme.border.width.thin} solid ${borderColor}`;
+
+  // Pseudo elements create borders without affecting width. We also prefer them
+  // over box-shadow for Windows high contrast theme compatibility
+  const leftBorder = `
+    &::before {
+      content: '';
+      position: absolute;
+      ${logicalCSS('right', '100%')}
+      ${logicalCSS('vertical', 0)}
+      ${logicalCSS('border-left', border)}
+    }
+  `;
   // Bottom borders are needed for responsive flex-wrap behavior
-  const bottomBoxShadow = `0 ${euiTheme.border.width.thin} 0 0 ${borderColor}`;
+  const bottomBorder = `
+    &::after {
+      content: '';
+      position: absolute;
+      ${logicalCSS('top', '100%')}
+      ${logicalCSS('horizontal', 0)}
+      ${logicalCSS('border-bottom', border)}
+    }
+  `;
 
   return {
     euiFilterButton: css`
+      position: relative;
       ${euiFilterButtonDisplay(euiThemeContext)}
       ${logicalCSS('height', controlHeight)}
       border-radius: 0;
-      box-shadow: ${leftBoxShadow}, ${bottomBoxShadow};
+
+      ${leftBorder}
+      ${bottomBorder}
 
       /* :not(:disabled) specificity needed to override EuiButtonEmpty styles */
       &:hover:not(:disabled),
@@ -59,8 +81,11 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => {
     withNext: css`
       & + .euiFilterButton {
         ${logicalCSS('margin-left', `-${euiTheme.size.xs}`)}
+
         /* Remove just the left faux border */
-        box-shadow: ${bottomBoxShadow};
+        &::before {
+          display: none;
+        }
       }
     `,
     noGrow: css`
diff --git a/packages/eui/src/components/filter_group/filter_group.styles.ts b/packages/eui/src/components/filter_group/filter_group.styles.ts
index 561b04e5612..407742a5fff 100644
--- a/packages/eui/src/components/filter_group/filter_group.styles.ts
+++ b/packages/eui/src/components/filter_group/filter_group.styles.ts
@@ -11,7 +11,9 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../services';
 import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form/form.styles';
+
 import { euiFilterButtonDisplay } from './filter_button.styles';
 
 export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
@@ -32,7 +34,10 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
       overflow: hidden;
 
       background-color: ${backgroundColor};
-      box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${borderColor};
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${borderColor};`,
+        forced: `border: ${euiTheme.border.thin};`,
+      })}
 
       /* Account for popover or tooltip wrappers around EuiFilterButtons */
       > *:not(.euiFilterButton) {
diff --git a/packages/eui/src/components/filter_group/filter_select_item.styles.ts b/packages/eui/src/components/filter_group/filter_select_item.styles.ts
index 1083c067772..f18cf2c764d 100644
--- a/packages/eui/src/components/filter_group/filter_select_item.styles.ts
+++ b/packages/eui/src/components/filter_group/filter_select_item.styles.ts
@@ -45,7 +45,10 @@ export const euiFilterSelectItemStyles = (euiThemeContext: UseEuiTheme) => {
       color: ${euiTheme.colors.text};
       ${logicalCSS(
         'border-bottom',
-        `${euiTheme.border.width.thin} solid ${euiTheme.colors.lightestShade}`
+        `${euiTheme.border.width.thin} solid ${transparentize(
+          euiTheme.border.color,
+          0.4
+        )}`
       )}
 
       &:hover {
diff --git a/packages/eui/src/components/flyout/_flyout_close_button.styles.ts b/packages/eui/src/components/flyout/_flyout_close_button.styles.ts
index 26f94686a62..4026a43a9e8 100644
--- a/packages/eui/src/components/flyout/_flyout_close_button.styles.ts
+++ b/packages/eui/src/components/flyout/_flyout_close_button.styles.ts
@@ -33,7 +33,7 @@ export const euiFlyoutCloseButtonStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     outside: css`
       /* Match dropshadow */
-      ${euiShadowXLarge(euiThemeContext)}
+      ${euiShadowXLarge(euiThemeContext, { borderAllInHighContrastMode: true })}
       /* Override the hover and focus transitions of buttons */
       animation: none !important; /* stylelint-disable-line declaration-no-important */
     `,
diff --git a/packages/eui/src/components/flyout/flyout.stories.tsx b/packages/eui/src/components/flyout/flyout.stories.tsx
index 3303996248c..42aca36117f 100644
--- a/packages/eui/src/components/flyout/flyout.stories.tsx
+++ b/packages/eui/src/components/flyout/flyout.stories.tsx
@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { EuiButton, EuiText, EuiTitle } from '../index';
+import { EuiButton, EuiCallOut, EuiText, EuiTitle } from '../index';
 
 import {
   EuiFlyout,
@@ -136,3 +136,25 @@ export const PushFlyouts: Story = {
     );
   },
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    children: (
+      <>
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2>Flyout header</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody banner={<EuiCallOut>Flyout banner</EuiCallOut>}>
+          Flyout body
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiButton fill>Flyout footer</EuiButton>
+        </EuiFlyoutFooter>
+      </>
+    ),
+  },
+};
diff --git a/packages/eui/src/components/flyout/flyout.styles.ts b/packages/eui/src/components/flyout/flyout.styles.ts
index 58df36deb6c..2d469ed8c10 100644
--- a/packages/eui/src/components/flyout/flyout.styles.ts
+++ b/packages/eui/src/components/flyout/flyout.styles.ts
@@ -107,7 +107,7 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
 
     // Type
     overlay: css`
-      ${euiShadowXLarge(euiThemeContext)}
+      ${euiShadowXLarge(euiThemeContext, { borderAllInHighContrastMode: true })}
     `,
     push: {
       push: css`
diff --git a/packages/eui/src/components/flyout/flyout_body.styles.ts b/packages/eui/src/components/flyout/flyout_body.styles.ts
index e039d7cc6e8..9420a24b4ac 100644
--- a/packages/eui/src/components/flyout/flyout_body.styles.ts
+++ b/packages/eui/src/components/flyout/flyout_body.styles.ts
@@ -13,8 +13,10 @@ import {
   logicalCSSWithFallback,
   euiYScrollWithShadows,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 export const euiFlyoutBodyStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiFlyoutBody: css`
       ${logicalCSSWithFallback('overflow-y', 'hidden')}
@@ -31,6 +33,9 @@ export const euiFlyoutBodyStyles = (euiThemeContext: UseEuiTheme) => {
     },
     euiFlyoutBody__banner: css`
       ${logicalCSSWithFallback('overflow-x', 'hidden')}
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: logicalCSS('border-bottom', euiTheme.border.thin),
+      })}
     `,
   };
 };
diff --git a/packages/eui/src/components/flyout/flyout_footer.styles.ts b/packages/eui/src/components/flyout/flyout_footer.styles.ts
index 8cb5b41ac31..ef35d5a5eb7 100644
--- a/packages/eui/src/components/flyout/flyout_footer.styles.ts
+++ b/packages/eui/src/components/flyout/flyout_footer.styles.ts
@@ -8,6 +8,8 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
+import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 export const euiFlyoutFooterStyles = (euiThemeContext: UseEuiTheme) => {
   const euiTheme = euiThemeContext.euiTheme;
@@ -16,6 +18,9 @@ export const euiFlyoutFooterStyles = (euiThemeContext: UseEuiTheme) => {
     euiFlyoutFooter: css`
       background-color: ${euiTheme.colors.lightestShade};
       flex-grow: 0;
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: logicalCSS('border-top', euiTheme.border.thin),
+      })}
     `,
   };
 };
diff --git a/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx b/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx
index 28b8a177620..9f97f3d83f3 100644
--- a/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx
+++ b/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx
@@ -44,3 +44,9 @@ export const Playground: Story = {
     },
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/form/file_picker/file_picker.styles.ts b/packages/eui/src/components/form/file_picker/file_picker.styles.ts
index 59a9b08cf29..37180266cb1 100644
--- a/packages/eui/src/components/form/file_picker/file_picker.styles.ts
+++ b/packages/eui/src/components/form/file_picker/file_picker.styles.ts
@@ -98,7 +98,7 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiTextTruncate()}
       color: ${euiTheme.colors.text};
       border: ${euiTheme.border.width.thick} dashed
-        var(--euiFormControlStateColor, ${euiTheme.colors.lightShade});
+        var(--euiFormControlStateColor, ${euiTheme.border.color});
 
       ${euiCanAnimate} {
         transition: border-color ${euiTheme.animation.fast} ease-in,
diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx
index 57af8d78585..6f4f22a35b8 100644
--- a/packages/eui/src/components/form/form.styles.test.tsx
+++ b/packages/eui/src/components/form/form.styles.test.tsx
@@ -54,6 +54,7 @@ describe('euiFormVariables', () => {
         "iconAffordance": "24px",
         "iconCompressedAffordance": "18px",
         "maxWidth": "400px",
+        "stateUnderlineHeight": "2px",
         "textColor": "#343741",
       }
     `);
@@ -123,11 +124,11 @@ describe('euiFormControlStyles', () => {
 
         ",
         "focus": "
-        --euiFormControlStateColor: #07C;
-        background-color: #FFF;
-        background-size: 100% 100%;
-        outline: none; /* Remove all outlines and rely on our own bottom border gradient */
-      ",
+          --euiFormControlStateColor: #07C;
+          background-color: #FFF;
+          background-size: 100% 100%;
+          outline: none; /* Remove all outlines and rely on our own bottom border gradient */
+        ",
         "formWidth": "
             max-inline-size: 400px;
             inline-size: 100%;
@@ -142,9 +143,9 @@ describe('euiFormControlStyles', () => {
             border-radius: 0;
           ",
         "invalid": "
-        --euiFormControlStateColor: #BD271E;
-        background-size: 100% 100%;
-      ",
+          --euiFormControlStateColor: #BD271E;
+          background-size: 100% 100%;
+        ",
         "readOnly": "
           cursor: default;
           color: #343741;
@@ -152,6 +153,7 @@ describe('euiFormControlStyles', () => {
 
           background-color: #FFF;
           --euiFormControlStateColor: transparent;
+          
         ",
         "shared": "
             
@@ -184,16 +186,16 @@ describe('euiFormControlStyles', () => {
         
             
           border: none;
-          box-shadow: inset 0 0 0 1px rgba(32,38,47,0.1);
+            box-shadow: inset 0 0 0 1px rgba(32,38,47,0.1);
           background-color: #f9fbfd;
           background-repeat: no-repeat;
-          background-size: 0% 100%;
-          background-image: linear-gradient(to top,
-            var(--euiFormControlStateColor),
-            var(--euiFormControlStateColor) 2px,
-            transparent 2px,
-            transparent 100%
-          );
+            background-size: 0% 100%;
+            background-image: linear-gradient(to top,
+              var(--euiFormControlStateColor),
+              var(--euiFormControlStateColor) 2px,
+              transparent 2px,
+              transparent 100%
+            );
           @media screen and (prefers-reduced-motion: no-preference) {
             transition:
               background-image 150ms ease-in,
@@ -224,26 +226,40 @@ describe('euiFormCustomControlStyles', () => {
         "input": {
           "disabled": {
             "selected": "
-                label: disabled;
-                color: #69707D;
-                background-color: #D3DAE6;
-              ",
+                  
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+                
+                  color: #69707D;
+                ",
+            "shared": "
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+                ",
             "unselected": "
-                label: disabled;
-                color: #D3DAE6;
-                background-color: #D3DAE6;
-                cursor: not-allowed;
-              ",
+                  
+                  label: disabled;
+                  cursor: not-allowed;
+                  background-color: #D3DAE6;
+                  border-color: #D3DAE6;
+                
+                  color: #D3DAE6;
+                ",
           },
           "enabled": {
             "selected": "
                 color: #FFF;
                 background-color: #07C;
+                border-color: #07C;
               ",
             "unselected": "
                 color: transparent;
                 background-color: #FFF;
-                border: 1px solid #919296;
+                border-color: #919296;
 
                 &:has(input:focus) {
                   border-color: #07C;
@@ -257,6 +273,8 @@ describe('euiFormCustomControlStyles', () => {
               display: flex;
               justify-content: center;
               align-items: center;
+              /* For Windows high contrast themes, a border must always be rendered, not just a background */
+              border: 1px solid transparent;
 
               &:has(input:focus-visible) {
                 outline: 2px solid #07C;
diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts
index df283452f0d..679252d78c1 100644
--- a/packages/eui/src/components/form/form.styles.ts
+++ b/packages/eui/src/components/form/form.styles.ts
@@ -20,6 +20,7 @@ import {
   euiCanAnimate,
   euiFontSize,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
 
 // There are multiple components that only need the form max-width size &
@@ -29,9 +30,11 @@ export const euiFormMaxWidth = ({ euiTheme }: UseEuiTheme) =>
   mathWithUnits(euiTheme.size.base, (x) => x * 25);
 
 export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme, colorMode, highContrastMode } = euiThemeContext;
   const isColorDark = colorMode === 'DARK';
-  const backgroundColor = isColorDark
+  const backgroundColor = highContrastMode
+    ? euiTheme.colors.emptyShade
+    : isColorDark
     ? shade(euiTheme.colors.lightestShade, 0.4)
     : tint(euiTheme.colors.lightestShade, 0.6);
 
@@ -48,6 +51,9 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
     controlCompressedBorderRadius: euiTheme.border.radius.small,
     iconAffordance: mathWithUnits(euiTheme.size.base, (x) => x * 1.5),
     iconCompressedAffordance: mathWithUnits(euiTheme.size.m, (x) => x * 1.5),
+    stateUnderlineHeight: highContrastMode
+      ? mathWithUnits(euiTheme.border.width.thick, (x) => x * 2)
+      : euiTheme.border.width.thick,
   };
 
   const colors = {
@@ -55,12 +61,14 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
     backgroundColor: backgroundColor,
     backgroundDisabledColor: darken(euiTheme.colors.lightestShade, 0.05),
     backgroundReadOnlyColor: euiTheme.colors.emptyShade,
-    borderColor: transparentize(
-      colorMode === 'DARK'
-        ? euiTheme.colors.ghost
-        : darken(euiTheme.border.color, 4),
-      0.1
-    ),
+    borderColor: highContrastMode
+      ? euiTheme.border.color
+      : transparentize(
+          colorMode === 'DARK'
+            ? euiTheme.colors.ghost
+            : darken(euiTheme.border.color, 4),
+          0.1
+        ),
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)(
@@ -139,7 +147,10 @@ export const euiFormControlStyles = (euiThemeContext: UseEuiTheme) => {
     // In group
     inGroup: `
       ${logicalCSS('height', '100%')}
-      box-shadow: none;
+      ${highContrastModeStyles(euiThemeContext, {
+        none: 'box-shadow: none;',
+        preferred: 'border: none;',
+      })}
       border-radius: 0;
     `,
 
@@ -196,26 +207,41 @@ export const euiFormControlDefaultShadow = (
   const { euiTheme } = euiThemeContext;
   const form = euiFormVariables(euiThemeContext);
 
-  // We use inset box-shadow instead of border to skip extra height calculations
-  const border = `
-    border: none;
-    box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${form.borderColor};
-  `.trim();
+  const border = highContrastModeStyles(euiThemeContext, {
+    // We use inset box-shadow instead of border to skip extra height calculations
+    none: `
+      border: none;
+      box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${form.borderColor};
+    `,
+    // In high contrast mode, this doesn't matter - we need to prioritize visibility
+    preferred: `
+      border: ${euiTheme.border.width.thin} solid ${euiTheme.border.color};
+    `,
+  });
 
   const backgroundColor = `
     background-color: ${form.backgroundColor};
   `.trim();
 
-  const backgroundGradient = `
-    background-repeat: no-repeat;
-    background-size: 0% 100%;
-    background-image: linear-gradient(to top,
-      var(--euiFormControlStateColor),
-      var(--euiFormControlStateColor) ${euiTheme.border.width.thick},
-      transparent ${euiTheme.border.width.thick},
-      transparent 100%
-    );
-  `.trim();
+  const backgroundGradient = highContrastModeStyles(euiThemeContext, {
+    none: `
+      background-repeat: no-repeat;
+      background-size: 0% 100%;
+      background-image: linear-gradient(to top,
+        var(--euiFormControlStateColor),
+        var(--euiFormControlStateColor) ${form.stateUnderlineHeight},
+        transparent ${form.stateUnderlineHeight},
+        transparent 100%
+      );
+    `,
+    // Windows high contrast mode overrides/hides background gradients - we'll need another approach
+    forced: `
+      background-repeat: no-repeat;
+      background-size: 0% ${form.stateUnderlineHeight};
+      background-position: bottom left;
+      background-origin: border-box;
+    `,
+  });
 
   const backgroundAnimation = `
     ${euiCanAnimate} {
@@ -234,24 +260,29 @@ export const euiFormControlDefaultShadow = (
   `;
 };
 
-export const euiFormControlFocusStyles = ({
-  euiTheme,
-  colorMode,
-}: UseEuiTheme) => `
-  --euiFormControlStateColor: ${euiTheme.colors.primary};
-  background-color: ${
+export const euiFormControlFocusStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, colorMode } = euiThemeContext;
+  const focusColor = euiTheme.colors.primary;
+  const backgroundColor =
     colorMode === 'DARK'
       ? shade(euiTheme.colors.emptyShade, 0.4)
-      : euiTheme.colors.emptyShade
-  };
-  background-size: 100% 100%;
-  outline: none; /* Remove all outlines and rely on our own bottom border gradient */
-`;
+      : euiTheme.colors.emptyShade;
+  return `
+    --euiFormControlStateColor: ${focusColor};
+    background-color: ${backgroundColor};
+    ${euiFormControlShowBackgroundUnderline(euiThemeContext, focusColor)}
+    outline: none; /* Remove all outlines and rely on our own bottom border gradient */
+  `;
+};
 
-export const euiFormControlInvalidStyles = ({ euiTheme }: UseEuiTheme) => `
-  --euiFormControlStateColor: ${euiTheme.colors.danger};
-  background-size: 100% 100%;
-`;
+export const euiFormControlInvalidStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const invalidColor = euiTheme.colors.danger;
+  return `
+    --euiFormControlStateColor: ${invalidColor};
+    ${euiFormControlShowBackgroundUnderline(euiThemeContext, invalidColor)}
+  `;
+};
 
 export const euiFormControlDisabledStyles = (euiThemeContext: UseEuiTheme) => {
   const form = euiFormVariables(euiThemeContext);
@@ -281,6 +312,9 @@ export const euiFormControlReadOnlyStyles = (euiThemeContext: UseEuiTheme) => {
 
     background-color: ${form.backgroundReadOnlyColor};
     --euiFormControlStateColor: transparent;
+    ${highContrastModeStyles(euiThemeContext, {
+      forced: 'background-image: none;',
+    })}
   `;
 };
 
@@ -319,6 +353,27 @@ export const euiFormControlAutoFillStyles = (euiThemeContext: UseEuiTheme) => {
   `;
 };
 
+export const euiFormControlShowBackgroundUnderline = (
+  euiThemeContext: UseEuiTheme,
+  color: string
+) => {
+  if (euiThemeContext.highContrastMode !== 'forced') {
+    return 'background-size: 100% 100%;';
+  }
+
+  // Windows high contrast themes ignore all background-images that aren't url-based,
+  // so to restore the linear-gradient that provides important visual information, we're
+  // using a static inline SVG workaround
+  const fill = encodeURIComponent(color);
+  const inlineSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='${fill}' /%3E%3C/svg%3E`;
+
+  const { stateUnderlineHeight } = euiFormVariables(euiThemeContext);
+  return `
+    background-size: 100% ${stateUnderlineHeight};
+    background-image: url("${inlineSVG}");
+  `;
+};
+
 const euiPlaceholderPerBrowser = (content: string) => `
   &::-webkit-input-placeholder { ${content} }
   &::-moz-placeholder { ${content} }
@@ -332,7 +387,7 @@ const euiPlaceholderPerBrowser = (content: string) => `
  */
 
 export const euiFormCustomControlVariables = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme, colorMode, highContrastMode } = euiThemeContext;
 
   const sizes = {
     control: euiTheme.size.base,
@@ -342,10 +397,11 @@ export const euiFormCustomControlVariables = (euiThemeContext: UseEuiTheme) => {
 
   const colors = {
     unselected: euiTheme.colors.emptyShade,
-    unselectedBorder:
-      colorMode === 'DARK'
-        ? tint(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
-        : shade(euiTheme.colors.lightestShade, 0.4),
+    unselectedBorder: highContrastMode
+      ? euiTheme.border.color
+      : colorMode === 'DARK'
+      ? tint(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
+      : shade(euiTheme.colors.lightestShade, 0.4),
     selected: euiTheme.colors.primary,
     selectedIcon: euiTheme.colors.emptyShade,
     disabled: euiTheme.colors.lightShade,
@@ -366,7 +422,7 @@ export const euiFormCustomControlVariables = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
   const controlVars = euiFormCustomControlVariables(euiThemeContext);
 
   const centerWithLabel = mathWithUnits(
@@ -387,6 +443,8 @@ export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => {
         display: flex;
         justify-content: center;
         align-items: center;
+        /* For Windows high contrast themes, a border must always be rendered, not just a background */
+        border: ${euiTheme.border.width.thin} solid transparent;
 
         &:has(input:focus-visible) {
           outline: ${euiTheme.focus.width} solid ${controlVars.colors.selected};
@@ -409,11 +467,12 @@ export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => {
         selected: `
           color: ${controlVars.colors.selectedIcon};
           background-color: ${controlVars.colors.selected};
+          border-color: ${controlVars.colors.selected};
         `,
         unselected: `
           color: transparent;
           background-color: ${controlVars.colors.unselected};
-          border: ${euiTheme.border.width.thin} solid ${controlVars.colors.unselectedBorder};
+          border-color: ${controlVars.colors.unselectedBorder};
 
           &:has(input:focus) {
             border-color: ${controlVars.colors.selected};
@@ -421,17 +480,29 @@ export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => {
         `,
       },
       disabled: {
-        selected: `
-          label: disabled;
-          color: ${controlVars.colors.disabledIcon};
-          background-color: ${controlVars.colors.disabled};
-        `,
-        unselected: `
-          label: disabled;
-          color: ${controlVars.colors.disabled};
-          background-color: ${controlVars.colors.disabled};
-          cursor: not-allowed;
-        `,
+        get shared() {
+          const borderColor = highContrastMode
+            ? controlVars.colors.disabledIcon
+            : controlVars.colors.disabled;
+          return `
+            label: disabled;
+            cursor: not-allowed;
+            background-color: ${controlVars.colors.disabled};
+            border-color: ${borderColor};
+          `;
+        },
+        get selected() {
+          return `
+            ${this.shared}
+            color: ${controlVars.colors.disabledIcon};
+          `;
+        },
+        get unselected() {
+          return `
+            ${this.shared}
+            color: ${controlVars.colors.disabled};
+          `;
+        },
       },
 
       // Looks better centered at different zoom levels than just <EuiIcon size="s" />
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
index 405f8031d82..e1841dcd668 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
@@ -131,6 +131,7 @@ export const AppendPrepend: Story = {
               <EuiText size="s">Tooltip</EuiText>
             </EuiToolTip>
           }
+          autoFocus
         />
         <EuiFieldText
           placeholder="XS empty button in a popover & tooltip"
@@ -263,3 +264,15 @@ export const AppendPrepend: Story = {
     );
   },
 };
+
+export const HighContrast: Story = {
+  ...AppendPrepend,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
+
+export const HighContrastDarkMode: Story = {
+  ...AppendPrepend,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true, colorMode: 'dark' },
+};
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
index fa66f0cca95..59bf66a7d93 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
@@ -14,6 +14,7 @@ import {
   logicalCSS,
   mathWithUnits,
 } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 
 import { euiFormVariables } from '../form.styles';
 
@@ -141,8 +142,16 @@ export const euiFormControlLayoutSideNodeStyles = (
         ${logicalCSS('padding-right', euiTheme.size.s)}
       }
     `,
-    append: css``,
-    prepend: css``,
+    append: css(
+      highContrastModeStyles(euiThemeContext, {
+        preferred: logicalCSS('border-left', euiTheme.border.thin),
+      })
+    ),
+    prepend: css(
+      highContrastModeStyles(euiThemeContext, {
+        preferred: logicalCSS('border-right', euiTheme.border.thin),
+      })
+    ),
     uncompressed: `
       ${text} {
         ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts
index 4da1965775f..0e448e18ba5 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts
@@ -8,22 +8,29 @@
 
 import { css } from '@emotion/react';
 
+import { logicalSizeCSS, mathWithUnits } from '../../../global_styling';
 import { UseEuiTheme } from '../../../services';
 
 export const EuiFormControlLayoutClearButtonStyles = ({
   euiTheme,
   colorMode,
+  highContrastMode,
 }: UseEuiTheme) => {
   const backgroundColor =
-    colorMode === 'DARK'
+    colorMode === 'DARK' || highContrastMode // mediumShade is not sufficient WCAG contrast
       ? euiTheme.colors.darkShade
       : euiTheme.colors.mediumShade;
+
   return {
     euiFormControlLayoutClearButton: css`
       pointer-events: all;
-      background-color: ${backgroundColor};
+      display: flex;
+      justify-content: center;
+      align-items: center;
       border-radius: 50%;
-      line-height: 0; /* ensures the icon stays vertically centered */
+      /* Windows high contrast themes ignore background-color, so we use border to color the button instead for better support */
+      border-style: solid;
+      border-color: ${backgroundColor};
 
       &:disabled {
         cursor: not-allowed;
@@ -31,18 +38,31 @@ export const EuiFormControlLayoutClearButtonStyles = ({
       }
     `,
 
-    euiFormControlLayoutClearButton__icon: css`
-      transform: scale(0.5);
-      fill: ${euiTheme.colors.emptyShade};
-      stroke: ${euiTheme.colors.emptyShade};
-    `,
     size: {
-      s: css`
-        stroke-width: ${euiTheme.size.xs};
+      s: `
+        ${logicalSizeCSS(euiTheme.size.m)}
+        border-width: ${mathWithUnits(euiTheme.size.m, (x) => x / 2)};
+      `,
+      m: `
+        ${logicalSizeCSS(euiTheme.size.base)}
+        border-width: ${mathWithUnits(euiTheme.size.base, (x) => x / 2)};
       `,
-      m: css`
-        stroke-width: ${euiTheme.size.xxs};
+    },
+
+    icon: {
+      euiFormControlLayoutClearButton__icon: css`
+        transform: scale(0.5);
+        fill: ${euiTheme.colors.emptyShade};
+        stroke: ${euiTheme.colors.emptyShade};
       `,
+      size: {
+        s: css`
+          stroke-width: ${euiTheme.size.xs};
+        `,
+        m: css`
+          stroke-width: ${euiTheme.size.xxs};
+        `,
+      },
     },
   };
 };
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
index 072da96221d..4e37cf77cec 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
@@ -26,9 +26,10 @@ export const EuiFormControlLayoutClearButton: FunctionComponent<
 > = ({ className, onClick, size = 'm', ...rest }) => {
   const classes = classNames('euiFormControlLayoutClearButton', className);
   const styles = useEuiMemoizedStyles(EuiFormControlLayoutClearButtonStyles);
+  const cssStyles = [styles.euiFormControlLayoutClearButton, styles.size[size]];
   const iconStyles = [
-    styles.euiFormControlLayoutClearButton__icon,
-    styles.size[size],
+    styles.icon.euiFormControlLayoutClearButton__icon,
+    styles.icon.size[size],
   ];
 
   const ariaLabel = useEuiI18n(
@@ -39,7 +40,7 @@ export const EuiFormControlLayoutClearButton: FunctionComponent<
   return (
     <button
       type="button"
-      css={styles.euiFormControlLayoutClearButton}
+      css={cssStyles}
       className={classes}
       onClick={onClick}
       aria-label={ariaLabel}
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx
index b2a8c5a5e22..6497f16ad33 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx
@@ -139,7 +139,9 @@ export const KitchenSink: Story = {
         css={{ display: 'flex', flexDirection: 'column', gap: 10 }}
       >
         <EuiFormControlLayoutDelimited
-          startControl={<EuiFieldNumber controlOnly placeholder="0" />}
+          startControl={
+            <EuiFieldNumber controlOnly placeholder="0" autoFocus />
+          }
           endControl={<EuiFieldNumber controlOnly placeholder="100" />}
         />
         <EuiFormControlLayoutDelimited
@@ -201,3 +203,15 @@ export const KitchenSink: Story = {
     );
   },
 };
+
+export const HighContrast: Story = {
+  ...KitchenSink,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
+
+export const HighContrastDarkMode: Story = {
+  ...KitchenSink,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true, colorMode: 'dark' },
+};
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts
index f6cff7c3cb1..895573ba2da 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts
@@ -60,6 +60,7 @@ export const euiFormControlLayoutDelimited__delimiter = css`
 
 export const euiFormControlLayoutDelimited__input = css`
   box-shadow: none;
+  border: none; /* Account for high contrast mode borders */
   border-radius: 0;
   text-align: center;
   ${logicalCSS('height', '100%')}
diff --git a/packages/eui/src/components/form/radio/__snapshots__/radio.test.tsx.snap b/packages/eui/src/components/form/radio/__snapshots__/radio.test.tsx.snap
index c9700ec7d5b..ce0258e0244 100644
--- a/packages/eui/src/components/form/radio/__snapshots__/radio.test.tsx.snap
+++ b/packages/eui/src/components/form/radio/__snapshots__/radio.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiRadio is rendered 1`] = `
   >
     <span
       class="emotion-euiRadio__icon"
-      data-euiicon-type="dot"
+      data-euiicon-type="empty"
     />
     <input
       class="euiRadio__input emotion-euiRadio__input"
@@ -54,7 +54,7 @@ exports[`EuiRadio props disabled is rendered 1`] = `
   >
     <span
       class="emotion-euiRadio__icon"
-      data-euiicon-type="dot"
+      data-euiicon-type="empty"
     />
     <input
       class="euiRadio__input emotion-euiRadio__input"
@@ -76,7 +76,7 @@ exports[`EuiRadio props label is rendered 1`] = `
   >
     <span
       class="emotion-euiRadio__icon"
-      data-euiicon-type="dot"
+      data-euiicon-type="empty"
     />
     <input
       class="euiRadio__input emotion-euiRadio__input"
@@ -105,7 +105,7 @@ exports[`EuiRadio props labelProps is rendered 1`] = `
   >
     <span
       class="emotion-euiRadio__icon"
-      data-euiicon-type="dot"
+      data-euiicon-type="empty"
     />
     <input
       class="euiRadio__input emotion-euiRadio__input"
@@ -134,7 +134,7 @@ exports[`EuiRadio props value is rendered 1`] = `
   >
     <span
       class="emotion-euiRadio__icon"
-      data-euiicon-type="dot"
+      data-euiicon-type="empty"
     />
     <input
       class="euiRadio__input emotion-euiRadio__input"
diff --git a/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap b/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
index 673cc97064a..2fd5437a085 100644
--- a/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
+++ b/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`EuiRadioGroup props idSelected is rendered 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
@@ -81,7 +81,7 @@ exports[`EuiRadioGroup props legend is rendered 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
@@ -105,7 +105,7 @@ exports[`EuiRadioGroup props legend is rendered 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
@@ -136,7 +136,7 @@ exports[`EuiRadioGroup props name is propagated to radios 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
@@ -161,7 +161,7 @@ exports[`EuiRadioGroup props name is propagated to radios 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
@@ -193,7 +193,7 @@ exports[`EuiRadioGroup props options are rendered 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
@@ -217,7 +217,7 @@ exports[`EuiRadioGroup props options are rendered 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
@@ -249,7 +249,7 @@ exports[`EuiRadioGroup props value is propagated to radios 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
@@ -274,7 +274,7 @@ exports[`EuiRadioGroup props value is propagated to radios 1`] = `
     >
       <span
         class="emotion-euiRadio__icon"
-        data-euiicon-type="dot"
+        data-euiicon-type="empty"
       />
       <input
         class="euiRadio__input emotion-euiRadio__input"
diff --git a/packages/eui/src/components/form/radio/radio.tsx b/packages/eui/src/components/form/radio/radio.tsx
index 932da3f2051..026a62e0ced 100644
--- a/packages/eui/src/components/form/radio/radio.tsx
+++ b/packages/eui/src/components/form/radio/radio.tsx
@@ -85,7 +85,10 @@ export const EuiRadio: FunctionComponent<EuiRadioProps> = ({
   return (
     <div css={styles.euiRadio} className={classes} {...rest}>
       <div css={inputStyles} className="euiRadio__circle">
-        <EuiIcon css={styles.input.euiRadio__icon} type="dot" />
+        <EuiIcon
+          css={styles.input.euiRadio__icon}
+          type={checked ? 'dot' : 'empty'} // Note that the icon does explicitly need to be empty for Windows high contrast themes
+        />
         <input
           css={styles.input.euiRadio__input}
           className="euiRadio__input"
diff --git a/packages/eui/src/components/form/radio/radio_group.stories.tsx b/packages/eui/src/components/form/radio/radio_group.stories.tsx
index f7b1acd9a27..e3fb7eb3b09 100644
--- a/packages/eui/src/components/form/radio/radio_group.stories.tsx
+++ b/packages/eui/src/components/form/radio/radio_group.stories.tsx
@@ -41,3 +41,9 @@ export const Playground: Story = {
     },
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
index 9813c324b0d..896ad676099 100644
--- a/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
+++ b/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
@@ -105,7 +105,7 @@ exports[`EuiDualRange props levels renders levels when levels prop is set 1`] =
       aria-valuenow="1"
       class="euiRangeThumb emotion-euiRangeThumb"
       role="slider"
-      style="inset-inline-start: 0; background-color: rgb(189, 39, 30);"
+      style="inset-inline-start: 0; --euiRangeThumbColor: #BD271E;"
       tabindex="0"
     />
     <div
@@ -115,7 +115,7 @@ exports[`EuiDualRange props levels renders levels when levels prop is set 1`] =
       aria-valuenow="8"
       class="euiRangeThumb emotion-euiRangeThumb"
       role="slider"
-      style="inset-inline-start: 0; background-color: rgb(189, 39, 30);"
+      style="inset-inline-start: 0; --euiRangeThumbColor: #BD271E;"
       tabindex="0"
     />
     <div
diff --git a/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap b/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap
index 6d56644398d..3110d8a5ae2 100644
--- a/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap
+++ b/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`EuiRange allows value prop to accept a number 1`] = `
       class="euiRangeTooltip emotion-euiRangeTooltip"
     >
       <output
-        class="euiRangeTooltip__value emotion-euiRangeTooltip__value-right"
+        class="euiRangeTooltip__value emotion-euiRangeTooltip__value-right-right"
         style="inset-inline-start: 8%;"
       >
         8
@@ -326,12 +326,12 @@ exports[`EuiRange props levels should render 1`] = `
     </div>
     <input
       aria-hidden="false"
-      class="euiRangeSlider emotion-euiRangeSlider-thumb"
+      class="euiRangeSlider emotion-euiRangeSlider"
       id="generated-id"
       max="100"
       min="0"
       step="1"
-      style="color: rgb(189, 39, 30);"
+      style="--euiRangeThumbColor: #BD271E;"
       type="range"
       value="20"
     />
@@ -454,7 +454,7 @@ exports[`EuiRange props slider should display in popover 1`] = `
         data-popover-panel="true"
         data-test-subj="test"
         role="dialog"
-        style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
+        style="top: 0px; left: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
         <p
           class="emotion-euiScreenReaderOnly"
@@ -619,7 +619,7 @@ exports[`EuiRange props value should render 1`] = `
       class="euiRangeTooltip emotion-euiRangeTooltip"
     >
       <output
-        class="euiRangeTooltip__value emotion-euiRangeTooltip__value-left"
+        class="euiRangeTooltip__value emotion-euiRangeTooltip__value-left-left"
         style="inset-inline-end: 0%;"
       >
         before
diff --git a/packages/eui/src/components/form/range/dual_range.stories.tsx b/packages/eui/src/components/form/range/dual_range.stories.tsx
index 4784b2925d4..5a2120100e5 100644
--- a/packages/eui/src/components/form/range/dual_range.stories.tsx
+++ b/packages/eui/src/components/form/range/dual_range.stories.tsx
@@ -9,6 +9,7 @@
 import React, { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { LOKI_SELECTORS } from '../../../../.storybook/loki';
 import {
   enableFunctionToggleControls,
   moveStorybookControlsToCategory,
@@ -43,7 +44,7 @@ const meta: Meta<EuiDualRangeProps> = {
     },
     showInput: {
       control: 'radio',
-      options: [true, false, 'inputWithPopover'],
+      options: [false, true, 'inputWithPopover'],
     },
     inputPopoverProps: {
       if: { arg: 'showInput', eq: 'inputWithPopover' },
@@ -70,7 +71,6 @@ const meta: Meta<EuiDualRangeProps> = {
     minInputProps: {},
     maxInputProps: {},
     inputPopoverProps: {},
-    ticks: [],
   },
 };
 moveStorybookControlsToCategory<EuiDualRangeProps>(
@@ -152,31 +152,6 @@ export const Input: Story = {
   render: (args) => <StatefulPlayground {...args} />,
 };
 
-export const InputWithPopover: Story = {
-  parameters: {
-    controls: {
-      include: [
-        'showInput',
-        'append',
-        'prepend',
-        'inputPopoverProps',
-        'isInvalid',
-        'isLoading',
-        'max',
-        'min',
-        'value',
-        'minInputProps',
-        'maxInputProps',
-      ],
-    },
-  },
-  args: {
-    value: [25, 50],
-    showInput: 'inputWithPopover',
-  },
-  render: (args) => <StatefulPlayground {...args} />,
-};
-
 export const Levels: Story = {
   parameters: {
     controls: {
@@ -207,7 +182,7 @@ const StatefulPlayground = ({
     }
   }, [value]);
 
-  const handelOnChange = (
+  const handleOnChange = (
     values: EuiDualRangeProps['value'],
     isValid: boolean,
     e?: _DualRangeChangeEvent
@@ -216,5 +191,64 @@ const StatefulPlayground = ({
     onChange?.(values, isValid, e);
   };
 
-  return <EuiDualRange value={values} onChange={handelOnChange} {...rest} />;
+  return <EuiDualRange value={values} onChange={handleOnChange} {...rest} />;
+};
+
+/**
+ * VRT only
+ */
+
+export const InputWithPopover: Story = {
+  tags: ['vrt-only'],
+  parameters: {
+    loki: { chromeSelector: LOKI_SELECTORS.portal },
+  },
+  args: {
+    showInput: 'inputWithPopover',
+    min: 0,
+    max: 100,
+    value: [10, 80],
+    // Should render ticks, levels, highlights, and tooltips in their correct positions
+    showLabels: true,
+    showTicks: true,
+    ticks: [
+      { label: '20kb', value: 20 },
+      { label: '100kb', value: 100 },
+    ],
+    levels: [
+      { min: 0, max: 20, color: 'danger' },
+      { min: 20, max: 100, color: 'success' },
+    ],
+  },
+  // Force input popover open via programmatic ref
+  render: function Render(args) {
+    const [ref, setRef] = useState<any>();
+    useEffect(() => {
+      ref?.onInputFocus();
+    }, [ref]);
+    return <EuiDualRange {...args} ref={setRef} />;
+  },
+};
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    fullWidth: true,
+    compressed: true,
+    showInput: true,
+    min: 0,
+    max: 100,
+    value: [10, 80],
+    showLabels: true,
+    showTicks: true,
+    ticks: [
+      { label: '20kb', value: 20 },
+      { label: '100kb', value: 100 },
+    ],
+    levels: [
+      { min: 0, max: 20, color: 'danger' },
+      { min: 20, max: 100, color: 'success' },
+    ],
+  },
 };
diff --git a/packages/eui/src/components/form/range/dual_range.tsx b/packages/eui/src/components/form/range/dual_range.tsx
index 487733bd49c..c9f01dd77a1 100644
--- a/packages/eui/src/components/form/range/dual_range.tsx
+++ b/packages/eui/src/components/form/range/dual_range.tsx
@@ -579,13 +579,13 @@ export class EuiDualRangeClass extends Component<
     const leftThumbStyles = leftThumbColor
       ? {
           ...leftThumbPosition,
-          backgroundColor: euiRangeLevelColor(leftThumbColor, theme.euiTheme),
+          '--euiRangeThumbColor': euiRangeLevelColor(leftThumbColor, theme),
         }
       : leftThumbPosition;
     const rightThumbStyles = rightThumbColor
       ? {
           ...rightThumbPosition,
-          backgroundColor: euiRangeLevelColor(rightThumbColor, theme.euiTheme),
+          '--euiRangeThumbColor': euiRangeLevelColor(rightThumbColor, theme),
         }
       : rightThumbPosition;
 
diff --git a/packages/eui/src/components/form/range/range.spec.tsx b/packages/eui/src/components/form/range/range.spec.tsx
deleted file mode 100644
index 46489c8861f..00000000000
--- a/packages/eui/src/components/form/range/range.spec.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-/// <reference types="cypress" />
-/// <reference types="cypress-real-events" />
-/// <reference types="../../../../cypress/support" />
-
-import React from 'react';
-
-import { EuiRange } from './range';
-import { EuiDualRange } from './dual_range';
-
-const sharedProps = {
-  min: 0,
-  max: 100,
-  onChange: () => {},
-  showTicks: true,
-  showLabels: true,
-  levels: [
-    {
-      min: 0,
-      max: 20,
-      color: 'danger',
-    },
-    {
-      min: 20,
-      max: 100,
-      color: 'success',
-    },
-  ],
-};
-const firstExpectedLevel = /^0px 256[.0-9]+px$/;
-const secondExpectedLevel = /^72[.0-9]+px 0px$/;
-
-describe('EuiRange', () => {
-  const props = {
-    ...sharedProps,
-    value: 50,
-    showValue: true,
-    showRange: true,
-    tickInterval: 20,
-  };
-
-  // TODO: These should likely be visual snapshot regression tests instead
-  const assertRangePositions = () => {
-    // Ticks
-    cy.get('.euiRangeTick')
-      .first()
-      .should('have.css', 'inset-inline-start', '8px');
-    cy.get('.euiRangeTick')
-      .eq(3)
-      .should('have.css', 'inset-inline-start')
-      .and('match', /^195[.0-9]+px$/);
-    cy.get('.euiRangeTick')
-      .last()
-      .should('have.css', 'inset-inline-start')
-      .and('match', /^320[.0-9]+px$/);
-
-    // Levels - present in both EuiRangeLevels and EuiHighlight
-    cy.get('.euiRangeLevel')
-      .eq(0)
-      .should('have.css', 'inset-inline')
-      .and('match', firstExpectedLevel);
-    cy.get('.euiRangeLevel')
-      .eq(2)
-      .should('have.css', 'inset-inline')
-      .and('match', firstExpectedLevel);
-
-    cy.get('.euiRangeLevel')
-      .eq(1)
-      .should('have.css', 'inset-inline')
-      .and('match', secondExpectedLevel);
-    cy.get('.euiRangeLevel')
-      .eq(3)
-      .should('have.css', 'inset-inline')
-      .and('match', secondExpectedLevel);
-
-    // Highlight
-    cy.get('.euiRangeHighlight > div')
-      .should('have.css', 'margin-inline-start', '0px')
-      .should('have.css', 'inline-size')
-      .and('match', /^164[.0-9]+px$/);
-
-    // Tooltip
-    cy.get('.euiRangeTooltip > output')
-      .should('have.css', 'inset-inline-start')
-      .and('match', /^156[.0-9]+px$/);
-  };
-
-  it('renders ticks, levels, highlights, and tooltips in their correct positions', () => {
-    cy.mount(<EuiRange {...props} />);
-    assertRangePositions();
-  });
-
-  it('inputWithPopover', () => {
-    cy.realMount(
-      <EuiRange
-        {...props}
-        showInput="inputWithPopover"
-        inputPopoverProps={{ panelPaddingSize: 'none' }} // Makes the asserted/computed widths equivalent
-      />
-    );
-    cy.realPress('Tab');
-    assertRangePositions();
-  });
-});
-
-describe('EuiDualRange', () => {
-  const props = {
-    ...sharedProps,
-    value: [10, 80] as [number, number],
-    ticks: [
-      { label: '20kb', value: 20 },
-      { label: '100kb', value: 100 },
-    ],
-  };
-
-  // TODO: These should likely be visual snapshot regression tests instead
-  const assertRangePositions = () => {
-    // Ticks
-    cy.get('.euiRangeTick')
-      .first()
-      .should('have.css', 'inset-inline-start')
-      .and('match', /^69[.0-9]+px$/);
-    cy.get('.euiRangeTick')
-      .last()
-      .should('have.css', 'inset-inline-end', '0px');
-
-    // Levels - present in both EuiRangeLevels and EuiHighlight
-    cy.get('.euiRangeLevel')
-      .eq(0)
-      .should('have.css', 'inset-inline')
-      .and('match', firstExpectedLevel);
-    cy.get('.euiRangeLevel')
-      .eq(2)
-      .should('have.css', 'inset-inline')
-      .and('match', firstExpectedLevel);
-
-    cy.get('.euiRangeLevel')
-      .eq(1)
-      .should('have.css', 'inset-inline')
-      .and('match', secondExpectedLevel);
-    cy.get('.euiRangeLevel')
-      .eq(3)
-      .should('have.css', 'inset-inline')
-      .and('match', secondExpectedLevel);
-
-    // Highlight
-    cy.get('.euiRangeHighlight > div')
-      .should('have.css', 'margin-inline-start')
-      .and('match', /^32[.0-9]+px$/);
-    cy.get('.euiRangeHighlight > div')
-      .should('have.css', 'inline-size')
-      .and('match', /^229[.0-9]+px$/);
-
-    // Thumbs
-    cy.get('.euiRangeThumb')
-      .first()
-      .should('have.css', 'inset-inline-start')
-      .and('match', /^31[.0-9]+px$/);
-    cy.get('.euiRangeThumb')
-      .last()
-      .should('have.css', 'inset-inline-start')
-      .and('match', /^249[.0-9]+px$/);
-  };
-
-  it('renders ticks, levels, highlights, and thumbs in their correct positions', () => {
-    cy.mount(<EuiDualRange {...props} />);
-    assertRangePositions();
-  });
-
-  it('inputWithPopover', () => {
-    cy.realMount(
-      <EuiDualRange
-        {...props}
-        showInput="inputWithPopover"
-        inputPopoverProps={{ panelPaddingSize: 'none' }} // Makes the asserted/computed widths equivalent
-      />
-    );
-    cy.realPress('Tab');
-    assertRangePositions();
-  });
-});
diff --git a/packages/eui/src/components/form/range/range.stories.tsx b/packages/eui/src/components/form/range/range.stories.tsx
index 1885e0afef0..ba56b9420bc 100644
--- a/packages/eui/src/components/form/range/range.stories.tsx
+++ b/packages/eui/src/components/form/range/range.stories.tsx
@@ -9,6 +9,7 @@
 import React, { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { LOKI_SELECTORS } from '../../../../.storybook/loki';
 import {
   enableFunctionToggleControls,
   moveStorybookControlsToCategory,
@@ -66,6 +67,13 @@ const meta: Meta<EuiRangeProps> = {
         undefined: undefined,
       },
     },
+    showInput: {
+      control: 'radio',
+      options: [false, true, 'inputWithPopover'],
+    },
+    inputPopoverProps: {
+      if: { arg: 'showInput', eq: 'inputWithPopover' },
+    },
   },
   args: {
     min: 0,
@@ -88,7 +96,6 @@ const meta: Meta<EuiRangeProps> = {
     // adding tickInterval value to prevent error about
     // too many ticks when enabling showTicks
     tickInterval: 10,
-    ticks: [],
   },
 };
 
@@ -200,6 +207,7 @@ export const Levels: Story = {
       { min: 20, max: 100, color: 'success' },
     ],
     showLabels: true,
+    showRange: true,
   },
   render: (args) => <StatefulPlayground {...args} />,
 };
@@ -213,10 +221,79 @@ const StatefulPlayground = ({ value, onChange, ...rest }: EuiRangeProps) => {
     }
   }, [value]);
 
-  const handelOnChange = (e: _SingleRangeChangeEvent, isValid: boolean) => {
+  const handleOnChange = (e: _SingleRangeChangeEvent, isValid: boolean) => {
     setValue(e.currentTarget.value);
     onChange?.(e, isValid);
   };
 
-  return <EuiRange value={_value} onChange={handelOnChange} {...rest} />;
+  return <EuiRange value={_value} onChange={handleOnChange} {...rest} />;
+};
+
+/**
+ * VRT only
+ */
+
+export const InputWithPopover: Story = {
+  tags: ['vrt-only'],
+  parameters: {
+    loki: { chromeSelector: LOKI_SELECTORS.portal },
+  },
+  args: {
+    showInput: 'inputWithPopover',
+    min: 0,
+    max: 100,
+    value: 50,
+    // Should render ticks, levels, highlights, and tooltips in their correct positions
+    showLabels: true,
+    showValue: true,
+    showRange: true,
+    showTicks: true,
+    tickInterval: 20,
+    levels: [
+      { min: 0, max: 20, color: 'danger' },
+      { min: 20, max: 100, color: 'success' },
+    ],
+  },
+  // Force input popover open via programmatic ref
+  render: function Render(args) {
+    const [ref, setRef] = useState<any>();
+    useEffect(() => {
+      // For some reason Loki throws a width/render error if not wrapped in a timeout.
+      // This doesn't happen on production
+      if (ref) setTimeout(() => ref.onInputFocus(), 1);
+    }, [ref]);
+    return <EuiRange {...args} ref={setRef} />;
+  },
+};
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    fullWidth: true,
+    compressed: true,
+    showInput: true,
+    min: 0,
+    max: 100,
+    value: 50,
+    showLabels: true,
+    showValue: true,
+    showRange: true,
+    showTicks: true,
+    tickInterval: 20,
+  },
+};
+
+export const DarkMode: Story = {
+  tags: ['vrt-only'],
+  globals: { colorMode: 'dark' },
+  args: {
+    min: 0,
+    max: 100,
+    value: 50,
+    showValue: true,
+    showRange: true,
+    showTicks: true,
+    tickInterval: 50,
+  },
 };
diff --git a/packages/eui/src/components/form/range/range.styles.ts b/packages/eui/src/components/form/range/range.styles.ts
index 20ee973f5d8..5fa02cde28e 100644
--- a/packages/eui/src/components/form/range/range.styles.ts
+++ b/packages/eui/src/components/form/range/range.styles.ts
@@ -9,10 +9,14 @@
 import { css } from '@emotion/react';
 import { UseEuiTheme, hexToRgb } from '../../../services';
 import { mathWithUnits } from '../../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form.styles';
 
 export const euiRangeVariables = (euiThemeContext: UseEuiTheme) => {
-  const euiTheme = euiThemeContext.euiTheme;
+  const { euiTheme, highContrastMode } = euiThemeContext;
   const trackHeight = '6px';
   const thumbHeight = euiTheme.size.base;
   const thumbWidth = euiTheme.size.base;
@@ -20,23 +24,32 @@ export const euiRangeVariables = (euiThemeContext: UseEuiTheme) => {
 
   return {
     trackColor: euiTheme.colors.lightShade,
-    highlightColor: euiTheme.colors.darkShade,
+    highlightColor: highContrastMode
+      ? euiTheme.colors.fullShade
+      : euiTheme.colors.darkShade,
     focusColor: euiTheme.colors.primary,
 
     thumbHeight: thumbHeight,
     thumbWidth: thumbWidth,
     thumbBorderWidth: euiTheme.border.width.thick,
     thumbBorderColor: euiTheme.colors.emptyShade,
-    thumbBackgroundColor: euiTheme.colors.darkShade, // same as highlightColor
+    get thumbBackgroundColor() {
+      return this.highlightColor;
+    },
 
     trackWidth: '100%',
     trackHeight: trackHeight,
     trackBorderWidth: '0px',
-    trackBorderColor: euiTheme.colors.lightShade, // same as trackColor
+    get trackBorderColor() {
+      return this.trackColor;
+    },
     trackBorderRadius: euiTheme.border.radius.medium,
 
     tickHeight: trackHeight,
     tickWidth: euiTheme.size.xs,
+    tickColor: highContrastMode
+      ? euiTheme.colors.darkShade
+      : euiTheme.colors.lightShade,
 
     disabledOpacity: 0.5,
 
@@ -81,7 +94,7 @@ export const euiRangeThumbBorder = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const euiRangeThumbBoxShadow = (euiThemeContext: UseEuiTheme) => {
-  const euiTheme = euiThemeContext.euiTheme;
+  const { euiTheme } = euiThemeContext;
   const shadowColor = `rgba(${hexToRgb(euiTheme.colors.shadow)}, .2)`;
 
   const range = euiRangeVariables(euiThemeContext);
@@ -101,24 +114,42 @@ export const euiRangeThumbFocusBoxShadow = (euiThemeContext: UseEuiTheme) => {
   const range = euiRangeVariables(euiThemeContext);
 
   return `
-    box-shadow: 0 0 0 ${range.thumbBorderWidth} ${range.focusColor};
+    outline: ${range.thumbBorderWidth} solid var(--euiRangeThumbColor, ${range.focusColor});
+    outline-offset: 0;
+    box-shadow: none; /* Unset inset box-shadow on high contrast modes */
   `;
 };
 
 export const euiRangeThumbStyle = (euiThemeContext: UseEuiTheme) => {
   const range = euiRangeVariables(euiThemeContext);
+  const { euiTheme } = euiThemeContext;
 
-  return `
-    ${euiRangeThumbBoxShadow(euiThemeContext)};
-    ${euiRangeThumbBorder(euiThemeContext)};
+  const baseStyles = `
     border-radius: 50%;
     cursor: pointer;
-    background-color: ${range.thumbBackgroundColor};
     padding: 0;
     block-size: ${range.thumbHeight};
     inline-size: ${range.thumbWidth};
     box-sizing: border-box;  // required for firefox or the border makes the width and height to increase
   `;
+
+  return highContrastModeStyles(euiThemeContext, {
+    none: `
+      ${baseStyles}
+      background-color: var(--euiRangeThumbColor, ${
+        range.thumbBackgroundColor
+      });
+      ${euiRangeThumbBoxShadow(euiThemeContext)};
+      ${euiRangeThumbBorder(euiThemeContext)};
+    `,
+    preferred: `
+      ${baseStyles}
+      background-color: var(--euiRangeThumbColor, ${euiTheme.colors.emptyShade});
+      border: ${range.thumbBorderWidth} solid var(--euiRangeThumbColor, ${euiTheme.colors.fullShade});
+      box-shadow: inset 0 0 0 ${range.thumbBorderWidth} ${euiTheme.colors.emptyShade};
+    `,
+    forced: preventForcedColors(euiThemeContext),
+  });
 };
 
 export const euiRangeThumbPerBrowser = (content: string) => {
@@ -129,16 +160,13 @@ export const euiRangeThumbPerBrowser = (content: string) => {
   `;
 };
 
-export const euiRangeThumbFocus = (
-  euiThemeContext: UseEuiTheme,
-  color?: string
-) => {
+export const euiRangeThumbFocus = (euiThemeContext: UseEuiTheme) => {
   const range = euiRangeVariables(euiThemeContext);
 
   return `
-   ${euiRangeThumbBorder(euiThemeContext)};
-   ${euiRangeThumbFocusBoxShadow(euiThemeContext)};
-   background-color: ${color || range.focusColor};
+    ${euiRangeThumbBorder(euiThemeContext)};
+    ${euiRangeThumbFocusBoxShadow(euiThemeContext)}
+    background-color: var(--euiRangeThumbColor, ${range.focusColor});
   `;
 };
 
diff --git a/packages/eui/src/components/form/range/range_highlight.styles.ts b/packages/eui/src/components/form/range/range_highlight.styles.ts
index 7bdd987fac7..7cb3b60bd10 100644
--- a/packages/eui/src/components/form/range/range_highlight.styles.ts
+++ b/packages/eui/src/components/form/range/range_highlight.styles.ts
@@ -8,6 +8,8 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../../services';
+import { preventForcedColors } from '../../../global_styling/functions/high_contrast';
+
 import { euiRangeVariables } from './range.styles';
 
 export const euiRangeHighlightStyles = (euiThemeContext: UseEuiTheme) => {
@@ -40,6 +42,7 @@ export const euiRangeHighlightProgressStyles = (
       block-size: ${range.highlightHeight};
       border-radius: ${range.trackBorderRadius};
       background-color: ${range.highlightColor};
+      ${preventForcedColors(euiThemeContext)}
 
       /* Change highlight color to focus on keyboard focus and on mouse drag */
       .euiRangeSlider:focus-visible ~ .euiRangeHighlight &,
diff --git a/packages/eui/src/components/form/range/range_levels.styles.ts b/packages/eui/src/components/form/range/range_levels.styles.ts
index 22ead60d895..d182736be5e 100644
--- a/packages/eui/src/components/form/range/range_levels.styles.ts
+++ b/packages/eui/src/components/form/range/range_levels.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme, transparentize } from '../../../services';
+import { preventForcedColors } from '../../../global_styling/functions/high_contrast';
 
 import { euiRangeLevelColor } from './range_levels_colors';
 import { euiRangeVariables } from './range.styles';
@@ -35,6 +36,7 @@ export const euiRangeLevelsStyles = (euiThemeContext: UseEuiTheme) => {
       inset-inline: 0;
       inset-block-start: ${range.trackTopPositionWithoutTicks};
       z-index: ${range.levelsZIndex};
+      ${preventForcedColors(euiThemeContext)}
     `,
     hasRange: css`
       &::after {
@@ -54,7 +56,6 @@ export const euiRangeLevelsStyles = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const euiRangeLevelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
   const range = euiRangeVariables(euiThemeContext);
 
   return {
@@ -77,16 +78,16 @@ export const euiRangeLevelStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     primary: css`
-      background-color: ${euiRangeLevelColor('primary', euiTheme)};
+      background-color: ${euiRangeLevelColor('primary', euiThemeContext)};
     `,
     success: css`
-      background-color: ${euiRangeLevelColor('success', euiTheme)};
+      background-color: ${euiRangeLevelColor('success', euiThemeContext)};
     `,
     warning: css`
-      background-color: ${euiRangeLevelColor('warning', euiTheme)};
+      background-color: ${euiRangeLevelColor('warning', euiThemeContext)};
     `,
     danger: css`
-      background-color: ${euiRangeLevelColor('danger', euiTheme)};
+      background-color: ${euiRangeLevelColor('danger', euiThemeContext)};
     `,
     customColor: css``,
   };
diff --git a/packages/eui/src/components/form/range/range_levels_colors.ts b/packages/eui/src/components/form/range/range_levels_colors.ts
index 49a5cdd6485..2b41bcdd086 100644
--- a/packages/eui/src/components/form/range/range_levels_colors.ts
+++ b/packages/eui/src/components/form/range/range_levels_colors.ts
@@ -18,16 +18,16 @@ export const LEVEL_COLORS = [
 ] as const;
 export type EuiRangeLevelColor = (typeof LEVEL_COLORS)[number];
 
-export const isNamedLevelColor = (color?: EuiRangeLevelColor | string) =>
+export const isNamedLevelColor = (
+  color?: EuiRangeLevelColor | string
+): color is EuiRangeLevelColor =>
   LEVEL_COLORS.includes(color as EuiRangeLevelColor);
 
 export const euiRangeLevelColor = (
   color: EuiRangeLevelColor | string,
-  euiTheme: UseEuiTheme['euiTheme']
+  { euiTheme }: UseEuiTheme
 ) => {
-  return isNamedLevelColor(color)
-    ? euiTheme.colors[color as EuiRangeLevelColor]
-    : color;
+  return isNamedLevelColor(color) ? euiTheme.colors[color] : color;
 };
 
 export const getLevelColor = (levels: EuiRangeLevel[], value: number) => {
diff --git a/packages/eui/src/components/form/range/range_slider.styles.ts b/packages/eui/src/components/form/range/range_slider.styles.ts
index fd1977f986d..440ebbf5722 100644
--- a/packages/eui/src/components/form/range/range_slider.styles.ts
+++ b/packages/eui/src/components/form/range/range_slider.styles.ts
@@ -65,7 +65,6 @@ export const euiRangeSliderStyles = (euiThemeContext: UseEuiTheme) => {
       block-size: ${range.thumbHeight}; /* the track has the same height as the thumb */
     `,
     hasRange: css`
-      /* stylelint-disable no-extra-semicolons */
       ${euiRangeTrackPerBrowser(`
         background-color: transparent;
         border-color: ${transparentize(range.trackBorderColor, 0.6)}
@@ -78,15 +77,3 @@ export const euiRangeSliderStyles = (euiThemeContext: UseEuiTheme) => {
     `,
   };
 };
-
-export const euiRangeSliderThumbStyles = (euiThemeContext: UseEuiTheme) => ({
-  thumb: css`
-    ${euiRangeThumbPerBrowser('background-color: currentcolor')}
-
-    &:focus-visible {
-      ${euiRangeThumbPerBrowser(
-        euiRangeThumbFocus(euiThemeContext, 'currentcolor')
-      )}
-    }
-  `,
-});
diff --git a/packages/eui/src/components/form/range/range_slider.tsx b/packages/eui/src/components/form/range/range_slider.tsx
index b05033a167d..76d6484be0e 100644
--- a/packages/eui/src/components/form/range/range_slider.tsx
+++ b/packages/eui/src/components/form/range/range_slider.tsx
@@ -24,10 +24,7 @@ import {
 
 import type { EuiRangeProps, EuiRangeLevel } from './types';
 import { euiRangeLevelColor } from './range_levels_colors';
-import {
-  euiRangeSliderStyles,
-  euiRangeSliderThumbStyles,
-} from './range_slider.styles';
+import { euiRangeSliderStyles } from './range_slider.styles';
 
 export interface EuiRangeSliderProps
   extends Omit<
@@ -77,17 +74,17 @@ export const EuiRangeSlider: FunctionComponent<EuiRangeSliderProps> = ({
 
   const euiTheme = useEuiTheme();
   const styles = euiRangeSliderStyles(euiTheme);
-  const thumbStyles = euiRangeSliderThumbStyles(euiTheme);
   const cssStyles = [
     styles.euiRangeSlider,
     showTicks && styles.hasTicks,
     showRange && styles.hasRange,
-    thumbColor && thumbStyles.thumb,
   ];
 
   const sliderStyle = useMemo(() => {
     return logicalStyles({
-      color: thumbColor && euiRangeLevelColor(thumbColor, euiTheme.euiTheme),
+      // @ts-ignore - CSS variable
+      '--euiRangeThumbColor':
+        thumbColor && euiRangeLevelColor(thumbColor, euiTheme),
       ...style,
     });
   }, [thumbColor, euiTheme, style]);
diff --git a/packages/eui/src/components/form/range/range_thumb.styles.ts b/packages/eui/src/components/form/range/range_thumb.styles.ts
index 3e59ca9f9f4..bdb067c4ce5 100644
--- a/packages/eui/src/components/form/range/range_thumb.styles.ts
+++ b/packages/eui/src/components/form/range/range_thumb.styles.ts
@@ -35,7 +35,6 @@ export const euiRangeThumbStyles = (euiThemeContext: UseEuiTheme) => {
 
       &:focus {
         ${euiRangeThumbFocus(euiThemeContext)}
-        outline: none;
       }
     `,
     hasTicks: css`
diff --git a/packages/eui/src/components/form/range/range_ticks.styles.ts b/packages/eui/src/components/form/range/range_ticks.styles.ts
index 217bf203e95..2c9714f1966 100644
--- a/packages/eui/src/components/form/range/range_ticks.styles.ts
+++ b/packages/eui/src/components/form/range/range_ticks.styles.ts
@@ -10,21 +10,34 @@ import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../../services';
 import {
   logicalCSS,
-  logicalSizeCSS,
   logicalCSSWithFallback,
   euiFontSize,
   mathWithUnits,
 } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
+
 import { euiRangeVariables } from './range.styles';
 
-const tickStyles = ({ euiTheme }: UseEuiTheme, range: any) => {
+const tickStyles = (
+  euiThemeContext: UseEuiTheme,
+  range: ReturnType<typeof euiRangeVariables>
+) => {
+  const { euiTheme } = euiThemeContext;
   return `
     position: absolute;
     ${logicalCSS('top', 0)};
-    ${logicalSizeCSS(euiTheme.size.xs, euiTheme.size.xs)};
-    background-color: ${euiTheme.colors.lightShade};
-    inline-size: ${range.tickWidth};
     block-size: ${range.tickHeight};
+    ${highContrastModeStyles(euiThemeContext, {
+      none: `
+        inline-size: ${range.tickWidth};
+        background-color: ${range.tickColor};
+      `,
+      // Windows high contrast themes ignore background color but render borders
+      forced: logicalCSS(
+        'border-left',
+        `${range.tickWidth} solid ${range.tickColor}`
+      ),
+    })}
     border-radius: ${euiTheme.border.radius.small};
   `;
 };
diff --git a/packages/eui/src/components/form/range/range_tooltip.styles.ts b/packages/eui/src/components/form/range/range_tooltip.styles.ts
index 6ca22103b78..863f3c037e7 100644
--- a/packages/eui/src/components/form/range/range_tooltip.styles.ts
+++ b/packages/eui/src/components/form/range/range_tooltip.styles.ts
@@ -7,14 +7,11 @@
  */
 
 import { css } from '@emotion/react';
-import {
-  UseEuiTheme,
-  COLOR_MODES_STANDARD,
-  tint,
-  shade,
-} from '../../../services';
-import { euiRangeVariables } from './range.styles';
 import { euiFontSize, mathWithUnits } from '../../../global_styling';
+import { UseEuiTheme } from '../../../services';
+import { _popoverArrowStyles } from '../../../services/popover';
+import { euiToolTipBackgroundColor } from '../../tool_tip/tool_tip.styles';
+import { euiRangeVariables } from './range.styles';
 
 export const euiRangeTooltipStyles = (euiThemeContext: UseEuiTheme) => {
   const range = euiRangeVariables(euiThemeContext);
@@ -35,21 +32,19 @@ export const euiRangeTooltipStyles = (euiThemeContext: UseEuiTheme) => {
   };
 };
 
-const euiToolTipBackgroundColor = (
-  euiTheme: UseEuiTheme['euiTheme'],
-  colorMode: UseEuiTheme['colorMode']
-) =>
-  colorMode === COLOR_MODES_STANDARD.dark
-    ? shade(euiTheme.colors.emptyShade, 1)
-    : tint(euiTheme.colors.fullShade, 0.25);
-
 export const euiRangeTooltipValueStyles = (euiThemeContext: UseEuiTheme) => {
   const range = euiRangeVariables(euiThemeContext);
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme, colorMode, highContrastMode } = euiThemeContext;
+
+  const borderColor = highContrastMode
+    ? euiTheme.border.color
+    : colorMode === 'DARK'
+    ? euiTheme.colors.mediumShade
+    : 'transparent';
 
   const arrowSize = euiTheme.size.m;
-  const arrowSizeInt = parseInt(arrowSize, 10);
-  const arrowMinusSize = `${(arrowSizeInt / 2 - 1) * -1}px`; // Shift arrow 1px more than half its size to account for border radius
+  const arrowOffset = euiTheme.size.l;
+  const arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
 
   return {
     euiRangeTooltip__value: css`
@@ -58,43 +53,37 @@ export const euiRangeTooltipValueStyles = (euiThemeContext: UseEuiTheme) => {
       max-inline-size: ${mathWithUnits(euiTheme.size.base, (x) => x * 16)};
       padding-block: ${euiTheme.size.xxs};
       padding-inline: ${euiTheme.size.s};
-      transform: translateX(0) translateY(-50%);
+      transform: translateY(-50%);
 
       ${euiFontSize(euiThemeContext, 's')}
-      line-height: ${euiFontSize(euiThemeContext, 's').lineHeight};
       color: ${euiTheme.colors.ghost};
       background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)};
-      border: ${euiTheme.border.width.thin} solid
-        ${euiToolTipBackgroundColor(euiTheme, colorMode)};
+      border: ${euiTheme.border.width.thin} solid ${borderColor};
       border-radius: ${euiTheme.border.radius.small};
 
       &::before {
         content: '';
-        position: absolute;
-        inset-block-end: 50%;
-        inline-size: ${arrowSize};
-        block-size: ${arrowSize};
-        transform-origin: center;
-        transform: translateY(50%) rotateZ(45deg);
-        background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)};
-        border-radius: ${mathWithUnits(
-          euiTheme.border.radius.small,
-          (x) => x / 2
-        )};
+        ${arrowStyles._arrowStyles}
+        inset-block-start: 50%;
+        margin-block-start: ${mathWithUnits(arrowSize, (x) => x / -2)};
+        background-color: inherit;
+        border: inherit;
       }
     `,
     left: css`
-      margin-inline-end: ${euiTheme.size.l};
+      margin-inline-end: ${arrowOffset};
 
       &::before {
-        inset-inline-end: ${arrowMinusSize};
+        ${arrowStyles.positions.left}
+        inset-inline-start: 100%;
       }
     `,
     right: css`
-      margin-inline-start: ${euiTheme.size.l};
+      margin-inline-start: ${arrowOffset};
 
       &::before {
-        inset-inline-start: ${arrowMinusSize};
+        ${arrowStyles.positions.right}
+        inset-inline-end: 100%;
       }
     `,
     hasTicks: css`
diff --git a/packages/eui/src/components/form/range/range_track.styles.ts b/packages/eui/src/components/form/range/range_track.styles.ts
index 15a9e085ee7..4fea7890eb9 100644
--- a/packages/eui/src/components/form/range/range_track.styles.ts
+++ b/packages/eui/src/components/form/range/range_track.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../../services';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 import { euiRangeVariables } from './range.styles';
 
 export const euiRangeTrackStyles = (euiThemeContext: UseEuiTheme) => {
@@ -27,9 +28,18 @@ export const euiRangeTrackStyles = (euiThemeContext: UseEuiTheme) => {
         position: absolute;
         inset-block-start: ${range.trackTopPositionWithoutTicks};
         inset-inline-start: 0;
-        block-size: ${range.trackHeight};
         inline-size: ${range.trackWidth};
-        background: ${range.trackColor};
+        ${highContrastModeStyles(euiThemeContext, {
+          none: `
+            background: ${range.trackColor};
+            block-size: ${range.trackHeight};
+          `,
+          // Windows high contrast themes ignore background color, but will render borders
+          forced: `
+            border-block-start: ${range.trackHeight} solid ${range.trackColor};
+            opacity: 0.25;
+          `,
+        })}
         border-radius: ${range.trackBorderRadius};
       }
     `,
diff --git a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index e068fa19900..10fdc402366 100644
--- a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -190,7 +190,7 @@ exports[`EuiSuperSelect renders 1`] = `
         class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom"
         data-popover-panel="true"
         role="dialog"
-        style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
+        style="top: 0px; left: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;"
       >
         <div>
           <div
diff --git a/packages/eui/src/components/form/switch/switch.stories.tsx b/packages/eui/src/components/form/switch/switch.stories.tsx
index 9081c8ec7f8..6638884cf74 100644
--- a/packages/eui/src/components/form/switch/switch.stories.tsx
+++ b/packages/eui/src/components/form/switch/switch.stories.tsx
@@ -70,3 +70,9 @@ export const KitchenSink: Story = {
     );
   },
 };
+
+export const KitchenSinkHighContrast: Story = {
+  ...KitchenSink,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/form/switch/switch.styles.ts b/packages/eui/src/components/form/switch/switch.styles.ts
index 73343979621..63f4a0fe62b 100644
--- a/packages/eui/src/components/form/switch/switch.styles.ts
+++ b/packages/eui/src/components/form/switch/switch.styles.ts
@@ -17,15 +17,21 @@ import {
   logicalSizeCSS,
   mathWithUnits,
 } from '../../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../../global_styling/functions/high_contrast';
 import { euiFormCustomControlVariables } from '../form.styles';
 
 const euiSwitchVars = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
   const formVars = euiFormCustomControlVariables(euiThemeContext);
 
   const colors = {
     on: formVars.colors.selected,
-    off: formVars.colors.unselectedBorder,
+    off: highContrastMode
+      ? euiTheme.colors.darkShade
+      : formVars.colors.unselectedBorder,
     disabled: formVars.colors.disabled,
     thumb: formVars.colors.selectedIcon,
     thumbBorder: formVars.colors.unselectedBorder,
@@ -142,7 +148,12 @@ const buttonStyles = (
   };
 };
 
-const bodyStyles = ({ colorMode }: UseEuiTheme, { colors }: EuiSwitchVars) => {
+const bodyStyles = (
+  euiThemeContext: UseEuiTheme,
+  { colors }: EuiSwitchVars
+) => {
+  const { colorMode, euiTheme } = euiThemeContext;
+
   // This is probably very extra, but the visual weight of the default
   // disabled custom control feels different in light mode depending
   // on the size of the switch, so I'm tinting it based on that.
@@ -152,6 +163,9 @@ const bodyStyles = ({ colorMode }: UseEuiTheme, { colors }: EuiSwitchVars) => {
     background-color: ${colorMode === 'DARK'
       ? colors.disabled
       : tint(colors.disabled, tintAmount)};
+    ${highContrastModeStyles(euiThemeContext, {
+      preferred: `border: ${euiTheme.border.thin};`,
+    })}
   `;
 
   return {
@@ -161,10 +175,21 @@ const bodyStyles = ({ colorMode }: UseEuiTheme, { colors }: EuiSwitchVars) => {
       overflow: hidden;
       border-radius: inherit;
       pointer-events: none; /* Required for Kibana's Selenium driver to be able to click switches in FTR tests */
+      ${highContrastModeStyles(euiThemeContext, {
+        forced: `border: ${euiTheme.border.thin};`,
+      })}
     `,
-    on: css`
-      background-color: ${colors.on};
-    `,
+    on: css(
+      highContrastModeStyles(euiThemeContext, {
+        none: `
+          background-color: ${colors.on};
+        `,
+        forced: `
+          background-color: ${euiTheme.border.color};
+          ${preventForcedColors(euiThemeContext)}
+        `,
+      })
+    ),
     off: css`
       background-color: ${colors.off};
     `,
diff --git a/packages/eui/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx b/packages/eui/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
index ea49fefbcb4..f87db4cb430 100644
--- a/packages/eui/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
+++ b/packages/eui/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx
@@ -58,3 +58,9 @@ export const Playground: Story = {
     ],
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/horizontal_rule/horizontal_rule.styles.ts b/packages/eui/src/components/horizontal_rule/horizontal_rule.styles.ts
index 152796e7a08..8300ae229c2 100644
--- a/packages/eui/src/components/horizontal_rule/horizontal_rule.styles.ts
+++ b/packages/eui/src/components/horizontal_rule/horizontal_rule.styles.ts
@@ -8,49 +8,59 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 
-export const euiHorizontalRuleStyles = ({ euiTheme }: UseEuiTheme) => ({
-  euiHorizontalRule: css`
-    border: none;
-    ${logicalCSS('height', euiTheme.border.width.thin)}
-    background-color: ${euiTheme.border.color};
-    /* Ensure when used in flex group, it retains its size */
-    flex-shrink: 0;
-    flex-grow: 0;
-  `,
+export const euiHorizontalRuleStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    euiHorizontalRule: css`
+      border: none;
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          ${logicalCSS('height', euiTheme.border.width.thin)}
+          background-color: ${euiTheme.border.color};
+        `,
+        // Windows high contrast themes ignore background colors
+        forced: logicalCSS('border-bottom', euiTheme.border.thin),
+      })}
+      /* Ensure when used in flex group, it retains its size */
+      flex-shrink: 0;
+      flex-grow: 0;
+    `,
 
-  // Sizes
-  full: css`
-    ${logicalCSS('width', '100%')}
-  `,
-  half: css`
-    ${logicalCSS('width', '50%')}
-    ${logicalCSS('margin-horizontal', 'auto')}
-  `,
-  quarter: css`
-    ${logicalCSS('width', '25%')}
-    ${logicalCSS('margin-horizontal', 'auto')}
-  `,
+    // Sizes
+    full: css`
+      ${logicalCSS('width', '100%')}
+    `,
+    half: css`
+      ${logicalCSS('width', '50%')}
+      ${logicalCSS('margin-horizontal', 'auto')}
+    `,
+    quarter: css`
+      ${logicalCSS('width', '25%')}
+      ${logicalCSS('margin-horizontal', 'auto')}
+    `,
 
-  // Margins
-  none: '',
-  xs: css`
-    margin-block: ${euiTheme.size.s};
-  `,
-  s: css`
-    margin-block: ${euiTheme.size.m};
-  `,
-  m: css`
-    margin-block: ${euiTheme.size.base};
-  `,
-  l: css`
-    margin-block: ${euiTheme.size.l};
-  `,
-  xl: css`
-    margin-block: ${euiTheme.size.xl};
-  `,
-  xxl: css`
-    margin-block: ${euiTheme.size.xxl};
-  `,
-});
+    // Margins
+    none: '',
+    xs: css`
+      margin-block: ${euiTheme.size.s};
+    `,
+    s: css`
+      margin-block: ${euiTheme.size.m};
+    `,
+    m: css`
+      margin-block: ${euiTheme.size.base};
+    `,
+    l: css`
+      margin-block: ${euiTheme.size.l};
+    `,
+    xl: css`
+      margin-block: ${euiTheme.size.xl};
+    `,
+    xxl: css`
+      margin-block: ${euiTheme.size.xxl};
+    `,
+  };
+};
diff --git a/packages/eui/src/components/image/image.styles.ts b/packages/eui/src/components/image/image.styles.ts
index 0fd1c6e3d2a..b192f5862ea 100644
--- a/packages/eui/src/components/image/image.styles.ts
+++ b/packages/eui/src/components/image/image.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 
@@ -27,9 +28,12 @@ export const euiImageStyles = (euiThemeContext: UseEuiTheme) => ({
     position: relative;
     ${logicalCSS('max-height', '80vh')}
     ${logicalCSS('max-width', '80vw')}
+    ${highContrastModeStyles(euiThemeContext, {
+      preferred: `border: ${euiThemeContext.euiTheme.border.thin};`,
+    })}
   `,
   hasShadow: css`
-    ${euiShadow(euiThemeContext, 's')}
+    ${euiShadow(euiThemeContext, 's', { borderAllInHighContrastMode: true })}
   `,
   // Sizes
   // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
diff --git a/packages/eui/src/components/image/image_button.styles.ts b/packages/eui/src/components/image/image_button.styles.ts
index 39bc625e6a4..4c483e94df8 100644
--- a/packages/eui/src/components/image/image_button.styles.ts
+++ b/packages/eui/src/components/image/image_button.styles.ts
@@ -56,12 +56,16 @@ export const euiImageButtonStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     shadowHover: css`
       &::before {
-        ${euiShadow(euiThemeContext, 's')}
+        ${euiShadow(euiThemeContext, 's', {
+          borderAllInHighContrastMode: true,
+        })}
       }
     `,
     hasShadowHover: css`
       &::before {
-        ${euiShadow(euiThemeContext, 'm')}
+        ${euiShadow(euiThemeContext, 'm', {
+          borderAllInHighContrastMode: true,
+        })}
       }
     `,
   };
diff --git a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
index b2361d96bea..c3dc5b5acb0 100644
--- a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
+++ b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`EuiKeyPadMenuItem checkable renders as radio 1`] = `
       >
         <span
           class="emotion-euiRadio__icon"
-          data-euiicon-type="dot"
+          data-euiicon-type="empty"
         />
         <input
           class="euiRadio__input emotion-euiRadio__input"
diff --git a/packages/eui/src/components/key_pad_menu/key_pad_menu.stories.tsx b/packages/eui/src/components/key_pad_menu/key_pad_menu.stories.tsx
index 8f0ca82aa02..e730c3e30bd 100644
--- a/packages/eui/src/components/key_pad_menu/key_pad_menu.stories.tsx
+++ b/packages/eui/src/components/key_pad_menu/key_pad_menu.stories.tsx
@@ -223,3 +223,40 @@ export const CheckableMulti: Story = {
   },
   render: (args) => <StatefulKeyPadMenu {...args} checkableType="multi" />,
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    children: [
+      <EuiKeyPadMenuItem label="Button" autoFocus>
+        <EuiIcon type="grid" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem label="Link" href="#">
+        <EuiIcon type="link" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem
+        label="Badge"
+        betaBadgeLabel="External"
+        betaBadgeTooltipContent="This module is an external app."
+        betaBadgeIconType="popout"
+      >
+        <EuiIcon type="beta" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem label="Selected" isSelected>
+        <EuiIcon type="faceHappy" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem label="Disabled" isDisabled>
+        <EuiIcon type="faceSad" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem
+        label="Selected and disabled"
+        isSelected
+        isDisabled
+        href="#"
+      >
+        <EuiIcon type="faceNeutral" size="l" />
+      </EuiKeyPadMenuItem>,
+    ],
+  },
+};
diff --git a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
index 36b74f003ef..5c851c77aff 100644
--- a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
+++ b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
@@ -15,6 +15,7 @@ import {
   euiCanAnimate,
   euiFontSize,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 import { euiScreenReaderOnly } from '../accessibility';
 
@@ -38,12 +39,17 @@ export const euiKeyPadMenuItemStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     enabled: css`
-      &:hover,
-      &:focus,
-      &:focus-within {
+      &:is(:hover, :focus, :focus-within) {
         cursor: pointer;
         text-decoration: underline;
-        ${euiShadow(euiThemeContext, 's')}
+
+        ${highContrastModeStyles(euiThemeContext, {
+          none: euiShadow(euiThemeContext, 's'),
+          // Use `outline` instead of border to avoid affecting absolutely positioned children
+          preferred: `
+            outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.primary};
+          `,
+        })}
 
         ${euiCanAnimate} {
           .euiKeyPadMenuItem__icon {
@@ -61,11 +67,19 @@ export const euiKeyPadMenuItemStyles = (euiThemeContext: UseEuiTheme) => {
       color: ${euiTheme.colors.title};
       background-color: ${euiTheme.focus.backgroundColor};
 
-      &,
-      &:hover,
-      &:focus,
-      &:focus-within {
+      &:is(*, :hover, :focus, :focus-within) {
         color: ${euiTheme.colors.primaryText};
+
+        ${highContrastModeStyles(euiThemeContext, {
+          // Skip checkable items (which render a <label> instead of <button>/<a>),
+          // as they already have sufficient indication of state (checkbox or radio)
+          preferred: `
+            &:not(label) {
+              outline: ${euiTheme.border.width.thick} solid ${euiTheme.colors.primary};
+              outline-offset: 0;
+            }
+          `,
+        })}
       }
     `,
     disabled: {
@@ -73,19 +87,31 @@ export const euiKeyPadMenuItemStyles = (euiThemeContext: UseEuiTheme) => {
         cursor: not-allowed;
         color: ${euiTheme.colors.disabledText};
 
-        .euiKeyPadMenuItem__icon {
-          filter: grayscale(100%);
-
-          svg * {
-            fill: ${euiTheme.colors.disabledText};
-          }
-        }
+        ${highContrastModeStyles(euiThemeContext, {
+          none: `
+            .euiKeyPadMenuItem__icon {
+              filter: grayscale(100%);
+
+              svg * {
+                fill: ${euiTheme.colors.disabledText};
+              }
+            }
+          `,
+          forced: 'opacity: 0.5;',
+        })}
       `,
       selected: css`
         background-color: ${transparentize(
           euiTheme.colors.disabled,
           euiTheme.focus.transparency
         )};
+        ${highContrastModeStyles(euiThemeContext, {
+          preferred: `
+            &:not(label) {
+              outline: ${euiTheme.border.width.thick} solid ${euiTheme.colors.disabledText};
+            }
+          `,
+        })}
       `,
     },
   };
@@ -130,14 +156,10 @@ export const euiKeyPadMenuItemChildStyles = (euiThemeContext: UseEuiTheme) => {
     `,
 
     euiKeyPadMenuItem__checkableInput: css`
+      position: absolute;
       ${topRightChildren}
       transform: scale(.75);
       transform-origin: top right;
-
-      /* TODO: Remove this once EuiCheckbox and EuiRadio have been converted to Emotion */
-      && {
-        position: absolute;
-      }
     `,
     showCheckableInputOnInteraction: css`
       .euiKeyPadMenuItem:not(:hover, :focus, :focus-within) & {
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/mark/mark.stories.tsx b/packages/eui/src/components/mark/mark.stories.tsx
index 65edfe8b197..99b927c88e1 100644
--- a/packages/eui/src/components/mark/mark.stories.tsx
+++ b/packages/eui/src/components/mark/mark.stories.tsx
@@ -27,3 +27,9 @@ export const Playground: Story = {
     children: 'Marked text',
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/mark/mark.styles.ts b/packages/eui/src/components/mark/mark.styles.ts
index 56409fa3f8a..b690184e3d5 100644
--- a/packages/eui/src/components/mark/mark.styles.ts
+++ b/packages/eui/src/components/mark/mark.styles.ts
@@ -7,23 +7,29 @@
  */
 
 import { css } from '@emotion/react';
-import { UseEuiTheme, transparentize } from '../../services';
+import { UseEuiTheme } from '../../services';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiScreenReaderOnly } from '../accessibility';
 
-export const euiMarkStyles = ({ euiTheme, colorMode }: UseEuiTheme) => {
-  // TODO: Was $euiFocusBackgroundColor
-  const transparency = { LIGHT: 0.1, DARK: 0.3 };
-
+export const euiMarkStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiMark: css`
-      background-color: ${transparentize(
-        euiTheme.colors.primary,
-        transparency[colorMode]
-      )};
+      ${highContrastModeStyles(euiThemeContext, {
+        // Override the browser's black color.
+        // Can't use 'inherit' because the text to background color contrast may not be sufficient
+        none: `
+          color: ${euiTheme.colors.text};
+          background-color: ${euiTheme.focus.backgroundColor};
+        `,
+        // `!important` is required here because some marked text links
+        // (e.g. EuiSideNav) will take precedence otherwise
+        preferred: `
+          color: ${euiTheme.colors.emptyShade} !important;
+          background-color: ${euiTheme.colors.primaryText};
+        `,
+      })}
       font-weight: ${euiTheme.font.weight.bold};
-      /* Override the browser's black color.
-         Can't use 'inherit' because the text to background color contrast may not be sufficient */
-      color: ${euiTheme.colors.text};
     `,
   };
 };
diff --git a/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap b/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap
index 87cb7f80d69..ffcddccf5b0 100644
--- a/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap
+++ b/packages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap
@@ -114,12 +114,12 @@ exports[`euiMarkdownFormat text colors danger 1`] = `
 exports[`euiMarkdownFormat text colors default 1`] = `
 "
     .euiMarkdownFormat__blockquote {
-      border-inline-start-color: rgba(0,0,0,0.15);
+      border-inline-start-color: #D3DAE6;
     }
 
     .euiHorizontalRule {
-      background-color: rgba(0,0,0,0.15);
-      color: rgba(0,0,0,0.15); /* ensure that firefox gets the currentColor */
+      background-color: #D3DAE6;
+      color: #D3DAE6; /* ensure that firefox gets the currentColor */
     }
 
     /* Tables */
@@ -130,20 +130,20 @@ exports[`euiMarkdownFormat text colors default 1`] = `
       overflow: auto;
       border-spacing: 0;
       border-collapse: collapse;
-      border-inline-start: 1px solid rgba(0,0,0,0.15);
+      border-inline-start: 1px solid #D3DAE6;
     }
 
     .euiMarkdownFormat__table th,
     .euiMarkdownFormat__table td {
-      border-block: 1px solid rgba(0,0,0,0.15);
+      border-block: 1px solid #D3DAE6;
 
       &:last-child {
-        border-inline-end: 1px solid rgba(0,0,0,0.15);
+        border-inline-end: 1px solid #D3DAE6;
       }
     }
 
     .euiMarkdownFormat__table tr {
-      border-block-start: 1px solid rgba(0,0,0,0.15);
+      border-block-start: 1px solid #D3DAE6;
     }
   ;label:default;"
 `;
diff --git a/packages/eui/src/components/markdown_editor/markdown_format.stories.tsx b/packages/eui/src/components/markdown_editor/markdown_format.stories.tsx
index 6581e71af85..e1545e4f6c3 100644
--- a/packages/eui/src/components/markdown_editor/markdown_format.stories.tsx
+++ b/packages/eui/src/components/markdown_editor/markdown_format.stories.tsx
@@ -61,3 +61,116 @@ export const Playground: Story = {
     children: initialContent,
   },
 };
+
+export const KitchenSink: Story = {
+  tags: ['vrt-only'],
+  args: {
+    children: `# h1 Heading
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+### Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+
+### Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
+
+Ordered
+
+1. Item 1
+1. Item 2
+1. Item 3
+   1. Item 3a
+   1. Item 3b
+
+
+## Task List
+
+- [x] Create a new project
+- [x] Give your project a name
+* [ ] Add a new column
+
+
+## Code
+
+Inline \`<Code />\` is awesome!
+
+\`\`\` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+\`\`\`
+
+
+## Tables
+
+| Option | Description |
+| ------: | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica`,
+  },
+};
+
+export const TextProps: Story = {
+  tags: ['vrt-only'],
+  args: {
+    ...KitchenSink.args,
+    color: 'danger',
+    textSize: 'xs',
+  },
+};
+
+export const HighContrast: Story = {
+  ...KitchenSink,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/markdown_editor/markdown_format.styles.ts b/packages/eui/src/components/markdown_editor/markdown_format.styles.ts
index 0d86331518a..c229068e075 100644
--- a/packages/eui/src/components/markdown_editor/markdown_format.styles.ts
+++ b/packages/eui/src/components/markdown_editor/markdown_format.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { UseEuiTheme, transparentize } from '../../services';
+import { UseEuiTheme } from '../../services';
 import {
   logicalCSS,
   euiFontSize,
@@ -92,58 +92,62 @@ const euiMarkdownAdjustBorderColors = (
 /**
  * Styles
  */
-export const euiMarkdownFormatStyles = (euiTheme: UseEuiTheme) => ({
-  euiMarkdownFormat: css``,
-  // Text sizes
-  m: css(
-    euiScaleMarkdownFormatText(euiTheme, {
-      customScale: 'm',
-    })
-  ),
-  s: css(
-    euiScaleMarkdownFormatText(euiTheme, {
-      customScale: 's',
-    })
-  ),
-  xs: css(
-    euiScaleMarkdownFormatText(euiTheme, {
-      customScale: 'xs',
-    })
-  ),
-  relative: css(
-    euiScaleMarkdownFormatText(euiTheme, {
-      unit: 'em',
-    })
-  ),
-  colors: {
-    default: css(
-      euiMarkdownAdjustBorderColors(
-        euiTheme,
-        transparentize(euiTheme.euiTheme.colors.fullShade, 0.15)
-      )
+export const euiMarkdownFormatStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+  return {
+    euiMarkdownFormat: css``,
+    // Text sizes
+    m: css(
+      euiScaleMarkdownFormatText(euiThemeContext, {
+        customScale: 'm',
+      })
     ),
-    subdued: css(
-      euiMarkdownAdjustBorderColors(
-        euiTheme,
-        euiTheme.euiTheme.colors.subduedText
-      )
+    s: css(
+      euiScaleMarkdownFormatText(euiThemeContext, {
+        customScale: 's',
+      })
     ),
-    success: css(
-      euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success)
+    xs: css(
+      euiScaleMarkdownFormatText(euiThemeContext, {
+        customScale: 'xs',
+      })
     ),
-    accent: css(
-      euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent)
+    relative: css(
+      euiScaleMarkdownFormatText(euiThemeContext, {
+        unit: 'em',
+      })
     ),
-    warning: css(
-      euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning)
-    ),
-    danger: css(
-      euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger)
-    ),
-    ghost: css(
-      euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost)
-    ),
-    inherit: css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor')),
-    custom: css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor')),
-  },
-});
+    colors: {
+      default: css(
+        euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.border.color)
+      ),
+      subdued: css(
+        euiMarkdownAdjustBorderColors(
+          euiThemeContext,
+          highContrastMode ? euiTheme.border.color : euiTheme.colors.subduedText
+        )
+      ),
+      success: css(
+        euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.success)
+      ),
+      accent: css(
+        euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.accent)
+      ),
+      warning: css(
+        euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.warning)
+      ),
+      danger: css(
+        euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.danger)
+      ),
+      ghost: css(
+        euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.ghost)
+      ),
+      inherit: css(
+        euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor')
+      ),
+      custom: css(
+        euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor')
+      ),
+    },
+  };
+};
diff --git a/packages/eui/src/components/modal/modal.styles.ts b/packages/eui/src/components/modal/modal.styles.ts
index 2ae5e768fff..ff5ea3ddab1 100644
--- a/packages/eui/src/components/modal/modal.styles.ts
+++ b/packages/eui/src/components/modal/modal.styles.ts
@@ -21,7 +21,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     euiModal: css`
-      ${euiShadowXLarge(euiThemeContext)}
+      ${euiShadowXLarge(euiThemeContext, { borderAllInHighContrastMode: true })}
       display: flex;
       flex-direction: column;
       max-block-size: 75vh; /* We overflow the modal body based off this */
@@ -69,7 +69,10 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
       min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth};
 
       ${euiMaxBreakpoint(euiThemeContext, 'm')} {
-        ${euiShadowXLarge(euiThemeContext, { reverse: true })}
+        ${euiShadowXLarge(euiThemeContext, {
+          reverse: true,
+          borderAllInHighContrastMode: true,
+        })}
         inset-block-start: auto;
       }
     `,
diff --git a/packages/eui/src/components/overlay_mask/overlay_mask.styles.ts b/packages/eui/src/components/overlay_mask/overlay_mask.styles.ts
index 54baf0490a7..c1f77f8650f 100644
--- a/packages/eui/src/components/overlay_mask/overlay_mask.styles.ts
+++ b/packages/eui/src/components/overlay_mask/overlay_mask.styles.ts
@@ -10,7 +10,10 @@ import { css } from '@emotion/css';
 import { logicalCSS, euiAnimFadeIn } from '../../global_styling';
 import { transparentize, UseEuiTheme } from '../../services';
 
-export const euiOverlayMaskStyles = ({ euiTheme }: UseEuiTheme) => ({
+export const euiOverlayMaskStyles = ({
+  euiTheme,
+  highContrastMode,
+}: UseEuiTheme) => ({
   euiOverlayMask: css`
     position: fixed;
     ${logicalCSS('top', 0)}
@@ -22,7 +25,10 @@ export const euiOverlayMaskStyles = ({ euiTheme }: UseEuiTheme) => ({
     justify-content: center;
     ${logicalCSS('padding-bottom', '10vh')}
     animation: ${euiAnimFadeIn} ${euiTheme.animation.fast} ease-in;
-    background: ${transparentize(euiTheme.colors.ink, 0.5)};
+    background: ${transparentize(
+      euiTheme.colors.ink,
+      highContrastMode ? 0.85 : 0.5
+    )};
   `,
   aboveHeader: css`
     z-index: ${euiTheme.levels.mask};
diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts
index 12806b48a73..77fe3216322 100644
--- a/packages/eui/src/components/panel/panel.styles.ts
+++ b/packages/eui/src/components/panel/panel.styles.ts
@@ -14,6 +14,7 @@ import {
   logicalCSS,
   logicalTextAlignCSS,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -61,7 +62,13 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
 
       &:hover,
       &:focus {
-        ${euiShadow(euiThemeContext, 'l')}
+        ${highContrastModeStyles(euiThemeContext, {
+          none: euiShadow(euiThemeContext, 'l'),
+          // Windows high contrast themes ignore box-shadows - use a filter workaround instead
+          preferred: `
+            filter: drop-shadow(0 ${euiTheme.border.width.thick} 0 ${euiTheme.border.color});
+          `,
+        })}
         transform: translateY(-2px);
         cursor: pointer;
       }
diff --git a/packages/eui/src/components/panel/panel.tsx b/packages/eui/src/components/panel/panel.tsx
index b7eb932f53f..76cbcbcce1c 100644
--- a/packages/eui/src/components/panel/panel.tsx
+++ b/packages/eui/src/components/panel/panel.tsx
@@ -13,9 +13,10 @@ import React, {
   Ref,
 } from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
 import {
   useEuiBackgroundColorCSS,
+  useEuiBorderColorCSS,
   useEuiPaddingCSS,
   _EuiBackgroundColor,
   EuiPaddingSize,
@@ -107,8 +108,12 @@ export const EuiPanel: FunctionComponent<EuiPanelProps> = ({
   element,
   ...rest
 }) => {
+  // Add borders to panels in high contrast mode
+  const { highContrastMode, euiTheme } = useEuiTheme();
+  const borderColors = useEuiBorderColorCSS();
+
   // Shadows are only allowed when there's a white background (plain)
-  const canHaveShadow = !hasBorder && color === 'plain';
+  const canHaveShadow = !hasBorder && color === 'plain' && !highContrastMode;
   const canHaveBorder = color === 'plain' || color === 'transparent';
 
   const styles = useEuiMemoizedStyles(euiPanelStyles);
@@ -120,6 +125,9 @@ export const EuiPanel: FunctionComponent<EuiPanelProps> = ({
     useEuiBackgroundColorCSS()[color],
     canHaveShadow && hasShadow === true && styles.hasShadow,
     canHaveBorder && hasBorder === true && styles.hasBorder,
+    ...(highContrastMode && _canRenderHighContrastBorder({ color, hasBorder })
+      ? [{ border: euiTheme.border.thin }, borderColors[color]]
+      : []),
     rest.onClick && styles.isClickable,
   ];
 
@@ -157,3 +165,11 @@ export const EuiPanel: FunctionComponent<EuiPanelProps> = ({
     </div>
   );
 };
+
+// Do not render a high contrast border if the panel is transparent
+// and does not have a default contrast border
+export const _canRenderHighContrastBorder = ({
+  color,
+  hasBorder,
+}: Pick<_EuiPanelProps, 'color' | 'hasBorder'>) =>
+  !(color === 'transparent' && !hasBorder);
diff --git a/packages/eui/src/components/panel/split_panel/split_panel.styles.ts b/packages/eui/src/components/panel/split_panel/split_panel.styles.ts
index 7e6b3bb8948..33ec61c988b 100644
--- a/packages/eui/src/components/panel/split_panel/split_panel.styles.ts
+++ b/packages/eui/src/components/panel/split_panel/split_panel.styles.ts
@@ -9,6 +9,8 @@
 import { css } from '@emotion/react';
 
 import { logicalCSS } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
+import { UseEuiTheme } from '../../../services';
 
 export const euiSplitPanelOuterStyles = {
   euiSplitPanelOuter: css`
@@ -24,14 +26,40 @@ export const euiSplitPanelOuterStyles = {
   `,
 };
 
-export const euiSplitPanelInnerStyles = {
-  euiSplitPanelInner: css`
-    /* Make sure they're evenly split */
-    flex-basis: 0%;
+export const euiSplitPanelInnerStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
 
-    /* Ensure no movement if they have click handlers */
-    /* stylelint-disable declaration-no-important */
-    transform: none !important;
-    box-shadow: none !important;
-  `,
+  return {
+    euiSplitPanelInner: css`
+      /* Make sure they're evenly split */
+      flex-basis: 0%;
+
+      /* Ensure no movement if they have click handlers */
+      /* stylelint-disable declaration-no-important */
+      transform: none !important;
+      box-shadow: none !important;
+    `,
+
+    highContrastBorders: {
+      // Don't double up on borders in high contrast mode, but render
+      // border dividers between nested inner panels
+      _renderBorder: (direction: 'right' | 'bottom') =>
+        highContrastModeStyles(euiThemeContext, {
+          preferred: `
+            border: none;
+
+            &:not(:last-child) {
+              ${logicalCSS(`border-${direction}`, euiTheme.border.thin)}
+              border-color: inherit; /* Attempt to inherit from parent panel */
+            }
+          `,
+        }),
+      get column() {
+        return this._renderBorder('bottom');
+      },
+      get row() {
+        return this._renderBorder('right');
+      },
+    },
+  };
 };
diff --git a/packages/eui/src/components/panel/split_panel/split_panel.tsx b/packages/eui/src/components/panel/split_panel/split_panel.tsx
index 0de7ec8c659..4ac9c7b139c 100644
--- a/packages/eui/src/components/panel/split_panel/split_panel.tsx
+++ b/packages/eui/src/components/panel/split_panel/split_panel.tsx
@@ -6,15 +6,26 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  HTMLAttributes,
+  createContext,
+  useContext,
+} from 'react';
 import classNames from 'classnames';
 
 import {
   EuiBreakpointSize,
   useIsWithinBreakpoints,
 } from '../../../services/breakpoint';
+import { useEuiMemoizedStyles } from '../../../services';
 
-import { EuiPanel, _EuiPanelProps } from '../panel';
+import {
+  EuiPanel,
+  _EuiPanelProps,
+  _canRenderHighContrastBorder,
+} from '../panel';
 import {
   euiSplitPanelOuterStyles,
   euiSplitPanelInnerStyles,
@@ -30,7 +41,14 @@ export type _EuiSplitPanelInnerProps = HTMLAttributes<HTMLDivElement> &
 export const _EuiSplitPanelInner: FunctionComponent<
   _EuiSplitPanelInnerProps
 > = ({ children, className, ...rest }) => {
+  const borderDirection = useContext(SplitPanelInnerBorderDirection);
+
   const classes = classNames('euiSplitPanel__inner', className);
+  const styles = useEuiMemoizedStyles(euiSplitPanelInnerStyles);
+  const cssStyles = [
+    styles.euiSplitPanelInner,
+    borderDirection && styles.highContrastBorders[borderDirection],
+  ];
 
   const panelProps: _EuiPanelProps = {
     hasShadow: false,
@@ -43,7 +61,7 @@ export const _EuiSplitPanelInner: FunctionComponent<
     <EuiPanel
       element="div"
       className={classes}
-      css={euiSplitPanelInnerStyles.euiSplitPanelInner}
+      css={cssStyles}
       {...panelProps}
       {...(rest as _EuiPanelProps)}
     >
@@ -85,12 +103,14 @@ export const _EuiSplitPanelOuter: FunctionComponent<
     responsive as EuiBreakpointSize[],
     !!responsive
   );
+  const responsiveDirection =
+    direction === 'row' && !isResponsive ? 'row' : 'column';
+  const innerBorderDirection = _canRenderHighContrastBorder({ ...rest })
+    ? responsiveDirection
+    : undefined;
 
   const styles = euiSplitPanelOuterStyles;
-  const cssStyles = [
-    styles.euiSplitPanelOuter,
-    direction === 'row' && !isResponsive ? styles.row : styles.column,
-  ];
+  const cssStyles = [styles.euiSplitPanelOuter, styles[responsiveDirection]];
 
   const classes = classNames('euiSplitPanel', className);
 
@@ -102,11 +122,16 @@ export const _EuiSplitPanelOuter: FunctionComponent<
       css={cssStyles}
       {...(rest as _EuiPanelProps)}
     >
-      {children}
+      <SplitPanelInnerBorderDirection.Provider value={innerBorderDirection}>
+        {children}
+      </SplitPanelInnerBorderDirection.Provider>
     </EuiPanel>
   );
 };
 
+const SplitPanelInnerBorderDirection =
+  createContext<_EuiSplitPanelOuterProps['direction']>(undefined);
+
 export const EuiSplitPanel = {
   Outer: _EuiSplitPanelOuter,
   Inner: _EuiSplitPanelInner,
diff --git a/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx b/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx
index 474e1718634..5ba082ee390 100644
--- a/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx
+++ b/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx
@@ -34,3 +34,54 @@ export const SplitPanelOuter: Story = {
     </EuiSplitPanel.Outer>
   ),
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  render: () => (
+    <>
+      <EuiSplitPanel.Outer direction="row">
+        <EuiSplitPanel.Inner>
+          <EuiSplitPanel.Outer direction="column">
+            <EuiSplitPanel.Inner>Nested</EuiSplitPanel.Inner>
+            <EuiSplitPanel.Inner>Border test</EuiSplitPanel.Inner>
+          </EuiSplitPanel.Outer>
+        </EuiSplitPanel.Inner>
+        <EuiSplitPanel.Inner color="subdued">Right panel</EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+      <div style={{ height: 20 }} />
+      <EuiSplitPanel.Outer>
+        <EuiSplitPanel.Inner>
+          <EuiSplitPanel.Outer
+            direction="row"
+            responsive={false}
+            color="primary"
+          >
+            <EuiSplitPanel.Inner>Nested</EuiSplitPanel.Inner>
+            <EuiSplitPanel.Inner>
+              <EuiSplitPanel.Outer direction="column" color="danger">
+                <EuiSplitPanel.Inner>Nested again</EuiSplitPanel.Inner>
+                <EuiSplitPanel.Inner>*inception noises*</EuiSplitPanel.Inner>
+              </EuiSplitPanel.Outer>
+            </EuiSplitPanel.Inner>
+          </EuiSplitPanel.Outer>
+        </EuiSplitPanel.Inner>
+        <EuiSplitPanel.Inner color="subdued">Bottom panel</EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+      <div style={{ height: 20 }} />
+      <EuiSplitPanel.Outer color="transparent">
+        <EuiSplitPanel.Inner>
+          Transparent panels should not render border dividers
+        </EuiSplitPanel.Inner>
+        <EuiSplitPanel.Inner>
+          <EuiSplitPanel.Outer color="transparent" hasBorder>
+            <EuiSplitPanel.Inner>But transparent panels</EuiSplitPanel.Inner>
+            <EuiSplitPanel.Inner>
+              with <code>hasBorder</code> should
+            </EuiSplitPanel.Inner>
+          </EuiSplitPanel.Outer>
+        </EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+    </>
+  ),
+};
diff --git a/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
index 760c7ab008a..85de7afacc3 100644
--- a/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
+++ b/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
@@ -44,14 +44,18 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/popover/__snapshots__/popover.test.tsx.snap b/packages/eui/src/components/popover/__snapshots__/popover.test.tsx.snap
index a70b798c366..be7bfa0ffea 100644
--- a/packages/eui/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/packages/eui/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -70,14 +70,17 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
         >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
           <span />
         </div>
         <p
@@ -122,14 +125,18 @@ exports[`EuiPopover props buffer 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -172,14 +179,18 @@ exports[`EuiPopover props buffer for all sides 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -231,14 +242,18 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -290,14 +305,18 @@ exports[`EuiPopover props isOpen renders true 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -340,14 +359,18 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -388,13 +411,17 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <div />
       </div>
     </div>
@@ -431,14 +458,18 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -481,14 +512,18 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -532,14 +567,18 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
         data-popover-panel="true"
         data-test-subj="test subject string"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
@@ -581,13 +620,17 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
         data-popover-open="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
-          data-popover-arrow="bottom"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; bottom: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+            data-popover-arrow="bottom"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/popover/popover.stories.tsx b/packages/eui/src/components/popover/popover.stories.tsx
index 45c47dc62c4..c1e7aaf0aab 100644
--- a/packages/eui/src/components/popover/popover.stories.tsx
+++ b/packages/eui/src/components/popover/popover.stories.tsx
@@ -125,3 +125,24 @@ export const PanelPaddingSize: Story = {
   },
   render: (args) => <StatefulPopover {...args} />,
 };
+
+export const HighContrastMode: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    children: (
+      <>
+        <EuiPopoverTitle>Popover title</EuiPopoverTitle>
+        High contrast mode
+        {/* Move the initialFocus so the popover border shows up more plainly in the screenshot */}
+        <button id="focus" />
+      </>
+    ),
+    panelPaddingSize: 's',
+    anchorPosition: 'upCenter',
+    button: 'popover trigger',
+    isOpen: true,
+    initialFocus: '#focus',
+  },
+  render: (args) => <StatefulPopover {...args} />,
+};
diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx
index ec45cc3b036..6c12e31f18c 100644
--- a/packages/eui/src/components/popover/popover.tsx
+++ b/packages/eui/src/components/popover/popover.tsx
@@ -543,7 +543,7 @@ export class EuiPopover extends Component<Props, State> {
         ? 16 + offset
         : 8 + offset,
       arrowConfig: this.props.hasArrow
-        ? { arrowWidth: 24, arrowBuffer: 10 }
+        ? { arrowWidth: 16, arrowBuffer: 10 }
         : { arrowWidth: 0, arrowBuffer: 0 },
       returnBoundingBox: this.props.attachToAnchor,
       allowCrossAxis: this.props.repositionToCrossAxis,
diff --git a/packages/eui/src/components/popover/popover_arrow/__snapshots__/_popover_arrow.test.tsx.snap b/packages/eui/src/components/popover/popover_arrow/__snapshots__/_popover_arrow.test.tsx.snap
index e1f6c22cb47..14d477c8c7c 100644
--- a/packages/eui/src/components/popover/popover_arrow/__snapshots__/_popover_arrow.test.tsx.snap
+++ b/packages/eui/src/components/popover/popover_arrow/__snapshots__/_popover_arrow.test.tsx.snap
@@ -3,35 +3,51 @@
 exports[`EuiPopoverArrow position bottom is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiPopoverArrow-bottom-euiTestCss"
-  data-popover-arrow="bottom"
+  class="testClass1 testClass2 emotion-euiPopoverArrowWrapper-euiTestCss"
   data-test-subj="test subject string"
-/>
+>
+  <div
+    class="euiPopover__arrow emotion-euiPopoverArrow-bottom"
+    data-popover-arrow="bottom"
+  />
+</div>
 `;
 
 exports[`EuiPopoverArrow position left is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiPopoverArrow-left-euiTestCss"
-  data-popover-arrow="left"
+  class="testClass1 testClass2 emotion-euiPopoverArrowWrapper-euiTestCss"
   data-test-subj="test subject string"
-/>
+>
+  <div
+    class="euiPopover__arrow emotion-euiPopoverArrow-left"
+    data-popover-arrow="left"
+  />
+</div>
 `;
 
 exports[`EuiPopoverArrow position right is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiPopoverArrow-right-euiTestCss"
-  data-popover-arrow="right"
+  class="testClass1 testClass2 emotion-euiPopoverArrowWrapper-euiTestCss"
   data-test-subj="test subject string"
-/>
+>
+  <div
+    class="euiPopover__arrow emotion-euiPopoverArrow-right"
+    data-popover-arrow="right"
+  />
+</div>
 `;
 
 exports[`EuiPopoverArrow position top is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiPopoverArrow-top-euiTestCss"
-  data-popover-arrow="top"
+  class="testClass1 testClass2 emotion-euiPopoverArrowWrapper-euiTestCss"
   data-test-subj="test subject string"
-/>
+>
+  <div
+    class="euiPopover__arrow emotion-euiPopoverArrow-top"
+    data-popover-arrow="top"
+  />
+</div>
 `;
diff --git a/packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts b/packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts
index c1d911738df..64b39ad7e39 100644
--- a/packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts
+++ b/packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts
@@ -7,68 +7,31 @@
  */
 
 import { css } from '@emotion/react';
-import { logicals, logicalSizeCSS } from '../../../global_styling';
+import { logicalSizeCSS } from '../../../global_styling';
+import { _popoverArrowStyles } from '../../../services/popover';
 import { UseEuiTheme } from '../../../services';
 
-export const popoverArrowSize = 'm';
-
 export const euiPopoverArrowStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode, colorMode } = euiThemeContext;
+  const hasBorder = highContrastMode || colorMode === 'DARK';
 
-  const borderColor = 'var(--euiPopoverBackgroundColor)';
-  const arrowSize = euiTheme.size[popoverArrowSize];
+  const arrowSize = euiTheme.size.base;
+  const arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
 
   return {
-    // Base
-    euiPopoverArrow: css`
+    // Wrapper
+    euiPopoverArrowWrapper: css`
       position: absolute;
-      ${logicalSizeCSS(0, 0)}
-
-      /* This part of the arrow matches the panel. */
-      &::before {
-        content: '';
-        position: absolute;
-        ${logicalSizeCSS(0, 0)}
-      }
-    `,
-
-    // POSITIONS
-    top: css`
-      &::before {
-        ${logicals.bottom}: -${arrowSize};
-        ${logicals['border-left']}: ${arrowSize} solid transparent;
-        ${logicals['border-right']}: ${arrowSize} solid transparent;
-        ${logicals['border-top']}: ${arrowSize} solid ${borderColor};
-      }
+      ${logicalSizeCSS(arrowSize)}
     `,
 
-    bottom: css`
-      &::before {
-        ${logicals.top}: -${arrowSize};
-        ${logicals['border-left']}: ${arrowSize} solid transparent;
-        ${logicals['border-right']}: ${arrowSize} solid transparent;
-        ${logicals['border-bottom']}: ${arrowSize} solid ${borderColor};
-      }
-    `,
-
-    left: css`
-      &::before {
-        ${logicals.top}: 50%;
-        ${logicals.right}: -${arrowSize};
-        ${logicals['border-top']}: ${arrowSize} solid transparent;
-        ${logicals['border-bottom']}: ${arrowSize} solid transparent;
-        ${logicals['border-left']}: ${arrowSize} solid ${borderColor};
-      }
+    // Base
+    euiPopoverArrow: css`
+      ${arrowStyles._arrowStyles}
+      background-color: var(--euiPopoverBackgroundColor);
+      ${hasBorder ? `border: ${euiTheme.border.thin};` : ''}
     `,
 
-    right: css`
-      &::before {
-        ${logicals.top}: 50%;
-        ${logicals.left}: -${arrowSize};
-        ${logicals['border-top']}: ${arrowSize} solid transparent;
-        ${logicals['border-bottom']}: ${arrowSize} solid transparent;
-        ${logicals['border-right']}: ${arrowSize} solid ${borderColor};
-      }
-    `,
+    ...arrowStyles.positions,
   };
 };
diff --git a/packages/eui/src/components/popover/popover_arrow/_popover_arrow.tsx b/packages/eui/src/components/popover/popover_arrow/_popover_arrow.tsx
index 4238824ae23..eef2ad09c82 100644
--- a/packages/eui/src/components/popover/popover_arrow/_popover_arrow.tsx
+++ b/packages/eui/src/components/popover/popover_arrow/_popover_arrow.tsx
@@ -7,9 +7,9 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent } from 'react';
+import { useEuiTheme } from '../../../services';
 import { CommonProps } from '../../common';
 import { euiPopoverArrowStyles } from './_popover_arrow.styles';
-import { useEuiTheme } from '../../../services';
 
 export const POSITIONS = ['top', 'left', 'right', 'bottom'] as const;
 export type EuiPopoverArrowPositions = (typeof POSITIONS)[number];
@@ -22,6 +22,7 @@ export type EuiPopoverArrowProps = HTMLAttributes<HTMLDivElement> &
 export const EuiPopoverArrow: FunctionComponent<EuiPopoverArrowProps> = ({
   children,
   position,
+  style,
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
@@ -30,11 +31,16 @@ export const EuiPopoverArrow: FunctionComponent<EuiPopoverArrowProps> = ({
 
   return (
     <div
-      className="euiPopover__arrow"
-      data-popover-arrow={position}
-      css={cssStyles}
+      className="euiPopover__arrowWrapper"
+      css={styles.euiPopoverArrowWrapper}
+      style={style}
       {...rest}
     >
+      <div
+        className="euiPopover__arrow"
+        data-popover-arrow={position}
+        css={cssStyles}
+      />
       {children}
     </div>
   );
diff --git a/packages/eui/src/components/popover/popover_footer.stories.tsx b/packages/eui/src/components/popover/popover_footer.stories.tsx
index 9ddb92a8a7e..397869eab26 100644
--- a/packages/eui/src/components/popover/popover_footer.stories.tsx
+++ b/packages/eui/src/components/popover/popover_footer.stories.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
 import { PADDING_SIZES } from '../../global_styling';
 import { EuiButton } from '../button';
 import { EuiPopover } from './popover';
@@ -30,6 +31,9 @@ const meta: Meta<EuiPopoverFooterProps> = {
       options: [undefined, ...PADDING_SIZES],
     },
   },
+  parameters: {
+    loki: { chromeSelector: LOKI_SELECTORS.portal },
+  },
 };
 
 export default meta;
diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts b/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
index f31ce85e5a1..d88e3ce59ef 100644
--- a/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
+++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
@@ -30,7 +30,7 @@ export const openAnimationTiming = 'slow';
  */
 
 export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme, highContrastMode, colorMode } = euiThemeContext;
 
   const translateDistance = euiTheme.size.s;
   const animationSpeed = euiTheme.animation[openAnimationTiming];
@@ -40,6 +40,9 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
     euiTheme.animation.bounce
   } ${mathWithUnits(animationSpeed, (x) => x + 100)}`;
 
+  const hasShadow = !highContrastMode;
+  const hasVisibleBorder = highContrastMode || colorMode === 'DARK';
+
   return {
     // Base
     euiPopover__panel: css`
@@ -50,6 +53,8 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
       pointer-events: none;
       opacity: 0; /* 2 */
       background-color: var(--euiPopoverBackgroundColor); /* 4 */
+      border: ${euiTheme.border.width.thin} solid
+        ${hasVisibleBorder ? euiTheme.border.color : 'transparent'};
 
       ${euiCanAnimate} {
         /* 2 */
@@ -78,7 +83,9 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
     hasTransform: {
       hasTransform: css`
         transform: translateY(0) translateX(0) translateZ(0); /* 2 */
-        ${euiShadowMedium(euiThemeContext, { property: 'filter' })}
+        ${hasShadow
+          ? euiShadowMedium(euiThemeContext, { property: 'filter' })
+          : ''}
 
         ${euiCanAnimate} {
           transition: ${opacityTransition}, ${transformTransition}; /* 2 */
@@ -107,10 +114,10 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
         }
       `,
       top: css`
-        ${euiShadowFlat(euiThemeContext)}
+        ${hasShadow ? euiShadowFlat(euiThemeContext) : ''}
       `,
       bottom: css`
-        ${euiShadow(euiThemeContext, 'm')}
+        ${hasShadow ? euiShadow(euiThemeContext, 'm') : ''}
       `,
       get left() {
         return this.bottom;
@@ -124,7 +131,9 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
     // stacking context that messes up the drag/drop fixed positioning
     hasDragDrop: {
       hasDragDrop: css`
-        ${euiShadowMedium(euiThemeContext, { property: 'box-shadow' })}
+        ${hasShadow
+          ? euiShadowMedium(euiThemeContext, { property: 'box-shadow' })
+          : ''}
 
         ${euiCanAnimate} {
           transition: ${opacityTransition}; /* 2 */
diff --git a/packages/eui/src/components/popover/popover_title.stories.tsx b/packages/eui/src/components/popover/popover_title.stories.tsx
index 357c987f98b..889932164a6 100644
--- a/packages/eui/src/components/popover/popover_title.stories.tsx
+++ b/packages/eui/src/components/popover/popover_title.stories.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
 import { PADDING_SIZES } from '../../global_styling';
 import { EuiButton } from '../button';
 import { EuiPopover } from './popover';
@@ -30,6 +31,9 @@ const meta: Meta<EuiPopoverTitleProps> = {
       options: [undefined, ...PADDING_SIZES],
     },
   },
+  parameters: {
+    loki: { chromeSelector: LOKI_SELECTORS.portal },
+  },
 };
 
 export default meta;
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/provider/provider.stories.tsx b/packages/eui/src/components/provider/provider.stories.tsx
index 08115a748b9..375aa2cb1da 100644
--- a/packages/eui/src/components/provider/provider.stories.tsx
+++ b/packages/eui/src/components/provider/provider.stories.tsx
@@ -8,8 +8,11 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { SPREAD_STORY_ARGS_MARKER } from '../../../.storybook/addons/code-snippet/constants';
+
+import { EuiPanel } from '../panel';
+import { EuiCode } from '../code';
+
 import { EuiProvider, EuiProviderProps } from './provider';
 
 const meta: Meta<EuiProviderProps<{}>> = {
@@ -18,30 +21,99 @@ const meta: Meta<EuiProviderProps<{}>> = {
   argTypes: {
     colorMode: {
       control: 'select',
-      options: ['light', 'dark', 'inverse', 'LIGHT', 'DARK', 'INVERSE'],
+      options: [
+        undefined,
+        'light',
+        'dark',
+        'inverse',
+        'LIGHT',
+        'DARK',
+        'INVERSE',
+      ],
+    },
+    highContrastMode: {
+      control: 'select',
+      options: [undefined, true, false],
     },
     modify: { control: 'object' },
     componentDefaults: { control: 'object' },
-    globalStyles: { control: 'boolean' },
-    utilityClasses: { control: 'boolean' },
+    globalStyles: {
+      control: 'boolean',
+      mapping: { true: undefined, false: false },
+    },
+    utilityClasses: {
+      control: 'boolean',
+      mapping: { true: undefined, false: false },
+    },
+  },
+  parameters: {
+    codeSnippet: {
+      snippet: `
+      <EuiProvider ${SPREAD_STORY_ARGS_MARKER} />
+      `,
+    },
   },
 };
 
 export default meta;
 type Story = StoryObj<EuiProviderProps<{}>>;
 
-export const FontDefaultUnits: Story = {
+export const Playground: Story = {
+  render: () => (
+    <>
+      <EuiPanel>
+        Setting <EuiCode>globalStyles</EuiCode> to false will remove all body
+        and font styles, but retain component styles (e.g. this{' '}
+        <EuiCode>EuiPanel</EuiCode>).
+      </EuiPanel>
+      <EuiPanel color="transparent" className="eui-textCenter">
+        Setting <EuiCode>utilityClasses</EuiCode> to false will remove the
+        centering on this text, which has <EuiCode>.eui-textCenter</EuiCode>{' '}
+        applied.
+      </EuiPanel>
+    </>
+  ),
+};
+
+export const SystemDefaults: Story = {
   parameters: {
-    codeSnippet: {
-      snippet: `
-      <EuiProvider ${SPREAD_STORY_ARGS_MARKER} />
-      `,
+    controls: {
+      include: ['colorMode', 'highContrastMode'],
+    },
+  },
+  argTypes: {
+    colorMode: {
+      control: 'radio',
+      options: [undefined, 'light', 'dark'],
+    },
+    highContrastMode: {
+      control: 'radio',
+      options: [undefined, false, true],
     },
   },
+  args: {
+    colorMode: undefined,
+    highContrastMode: undefined,
+  },
+  // _args is needed (even if unused) for controls.include to work as expected
+  // see https://github.com/storybookjs/storybook/issues/23343
+  render: (_args) => (
+    <EuiPanel>
+      When undefined, <EuiCode>colorMode</EuiCode> and{' '}
+      <EuiCode>highContrastMode</EuiCode> will inherit from the user's OS/system
+      settings.
+    </EuiPanel>
+  ),
+};
+
+export const FontDefaultUnits: Story = {
+  parameters: {
+    controls: { include: ['modify'] },
+  },
   args: {
     modify: { font: { defaultUnits: 'rem' } },
   },
-  render: () => (
+  render: (_args) => (
     <>
       Change <strong>`modify.font.defaultUnits`</strong> to{' '}
       <strong>`rem`, `em`, or `px`</strong> and then inspect this demo's `html`
diff --git a/packages/eui/src/components/provider/provider.test.tsx b/packages/eui/src/components/provider/provider.test.tsx
index c738185d7ac..3247f0047bc 100644
--- a/packages/eui/src/components/provider/provider.test.tsx
+++ b/packages/eui/src/components/provider/provider.test.tsx
@@ -11,10 +11,10 @@ import { render } from '@testing-library/react'; // Note - don't use the EUI cus
 import { cache as emotionCache } from '@emotion/css';
 import createCache from '@emotion/cache';
 
-import { setEuiDevProviderWarning } from '../../services';
-import { EuiSystemColorModeProvider } from './system_color_mode';
-jest.mock('./system_color_mode', () => ({
-  EuiSystemColorModeProvider: jest.fn(({ children }: any) => children('LIGHT')),
+import { setEuiDevProviderWarning, useEuiTheme } from '../../services';
+import { useWindowMediaMatcher } from './system_defaults/match_media_hook';
+jest.mock('./system_defaults/match_media_hook', () => ({
+  useWindowMediaMatcher: jest.fn(),
 }));
 
 import { EuiProvider } from './provider';
@@ -158,10 +158,10 @@ describe('EuiProvider', () => {
     });
 
     describe('colorMode', () => {
-      beforeEach(() => {
-        (EuiSystemColorModeProvider as jest.Mock).mockImplementationOnce(
-          ({ children }) => children('DARK')
-        );
+      beforeAll(() => {
+        (useWindowMediaMatcher as jest.Mock).mockImplementation((media) => {
+          if (media === '(prefers-color-scheme: dark)') return true;
+        });
       });
 
       it('inherits from system color mode by default', () => {
@@ -192,6 +192,40 @@ describe('EuiProvider', () => {
         expect(getByText('Light mode')).toHaveStyleRule('color', '#aaa');
       });
     });
+
+    describe('highContrastMode', () => {
+      const Output = () => {
+        const { highContrastMode } = useEuiTheme();
+        return <>{String(highContrastMode)}</>;
+      };
+
+      beforeEach(() => {
+        (useWindowMediaMatcher as jest.Mock).mockImplementation((media) => {
+          if (media === '(prefers-contrast: more)') return true;
+        });
+      });
+      afterEach(jest.resetAllMocks);
+
+      it('inherits from system contrast preference by default', () => {
+        const { container } = render(
+          <EuiProvider>
+            <Output />
+          </EuiProvider>
+        );
+
+        expect(container.textContent).toEqual('preferred');
+      });
+
+      it('overrides the system preference with the passed prop', () => {
+        const { container } = render(
+          <EuiProvider highContrastMode={false}>
+            <Output />
+          </EuiProvider>
+        );
+
+        expect(container.textContent).toEqual('false');
+      });
+    });
   });
 
   describe('nested EuiProviders', () => {
diff --git a/packages/eui/src/components/provider/provider.tsx b/packages/eui/src/components/provider/provider.tsx
index dba42b595ab..9f023ac0188 100644
--- a/packages/eui/src/components/provider/provider.tsx
+++ b/packages/eui/src/components/provider/provider.tsx
@@ -14,6 +14,7 @@ import {
   EuiThemeProviderProps,
   EuiThemeSystem,
   EuiThemeColorMode,
+  EuiThemeHighContrastModeProp,
 } from '../../services';
 import { emitEuiProviderWarning } from '../../services/theme/warning';
 import { cache as fallbackCache } from '../../services/emotion/css';
@@ -26,7 +27,7 @@ import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeAmsterdam } from '../../themes';
 
 import { EuiCacheProvider } from './cache';
-import { EuiSystemColorModeProvider } from './system_color_mode';
+import { EuiSystemDefaultsProvider } from './system_defaults';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
 import {
   EuiComponentDefaults,
@@ -51,6 +52,14 @@ export interface EuiProviderProps<T>
    * Defaults to the user's OS/system setting if undefined.
    */
   colorMode?: EuiThemeColorMode;
+  /**
+   * Allows enabling a high contrast mode preference for better accessibility.
+   * Defaults to the user's OS/system setting if undefined.
+   *
+   * - @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
+   * - @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors (system only, supercedes this prop)
+   */
+  highContrastMode?: EuiThemeHighContrastModeProp;
   /**
    * Provide global styles via `@emotion/react` `Global` for your custom theme.
    * Pass `false` to remove the default EUI global styles.
@@ -95,6 +104,7 @@ export const EuiProvider = <T extends {} = {}>({
   globalStyles: Globals = EuiGlobalStyles,
   utilityClasses: Utilities = EuiUtilityClasses,
   colorMode,
+  highContrastMode,
   modify,
   componentDefaults,
   children,
@@ -134,33 +144,30 @@ export const EuiProvider = <T extends {} = {}>({
   return (
     <EuiProviderNestedCheck>
       <EuiCacheProvider cache={defaultCache ?? fallbackCache}>
-        <EuiSystemColorModeProvider>
-          {(systemColorMode) => (
-            <EuiThemeProvider
-              theme={theme ?? undefined}
-              colorMode={colorMode ?? systemColorMode}
-              modify={modify}
-            >
-              {theme && (
-                <>
-                  <EuiCacheProvider
-                    cache={globalCache}
-                    children={Globals && <Globals />}
-                  />
-                  <EuiCacheProvider
-                    cache={utilityCache}
-                    children={Utilities && <Utilities />}
-                  />
-                </>
-              )}
-              <EuiComponentDefaultsProvider
-                componentDefaults={componentDefaults}
-              >
-                {children}
-              </EuiComponentDefaultsProvider>
-            </EuiThemeProvider>
-          )}
-        </EuiSystemColorModeProvider>
+        <EuiSystemDefaultsProvider>
+          <EuiThemeProvider
+            theme={theme ?? undefined}
+            colorMode={colorMode}
+            highContrastMode={highContrastMode}
+            modify={modify}
+          >
+            {theme && (
+              <>
+                <EuiCacheProvider
+                  cache={globalCache}
+                  children={Globals && <Globals />}
+                />
+                <EuiCacheProvider
+                  cache={utilityCache}
+                  children={Utilities && <Utilities />}
+                />
+              </>
+            )}
+            <EuiComponentDefaultsProvider componentDefaults={componentDefaults}>
+              {children}
+            </EuiComponentDefaultsProvider>
+          </EuiThemeProvider>
+        </EuiSystemDefaultsProvider>
       </EuiCacheProvider>
     </EuiProviderNestedCheck>
   );
diff --git a/packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.test.tsx b/packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.test.tsx
deleted file mode 100644
index 2782e05d67a..00000000000
--- a/packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.test.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { render, act } from '@testing-library/react';
-
-import { EuiSystemColorModeProvider } from './system_color_mode_provider';
-
-describe('EuiSystemColorModeProvider', () => {
-  // @see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-  const mockAddEventListener = jest.fn();
-  const mockRemoveEventListener = jest.fn();
-  const mockMatchMedia = (matches = false) => {
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn((query) => ({
-        matches,
-        media: query,
-        addEventListener: mockAddEventListener,
-        removeEventListener: mockRemoveEventListener,
-      })),
-    });
-  };
-
-  beforeEach(() => {
-    mockMatchMedia();
-    jest.clearAllMocks();
-  });
-
-  it('falls back to light mode if no dark mode media query has been set', () => {
-    const { container } = render(
-      <EuiSystemColorModeProvider>
-        {(systemColorMode) => <>{systemColorMode}</>}
-      </EuiSystemColorModeProvider>
-    );
-
-    expect(container.textContent).toEqual('LIGHT');
-  });
-
-  it('detects dark mode system settings', () => {
-    mockMatchMedia(true);
-    const { container } = render(
-      <EuiSystemColorModeProvider>
-        {(systemColorMode) => <>{systemColorMode}</>}
-      </EuiSystemColorModeProvider>
-    );
-
-    expect(container.textContent).toEqual('DARK');
-  });
-
-  describe('event listener', () => {
-    it('initializes an event listener that listens for system light/dark mode changes', () => {
-      const { container } = render(
-        <EuiSystemColorModeProvider>
-          {(systemColorMode) => <>{systemColorMode}</>}
-        </EuiSystemColorModeProvider>
-      );
-      expect(container.textContent).toEqual('LIGHT');
-
-      expect(mockAddEventListener).toHaveBeenCalledWith(
-        'change',
-        expect.any(Function)
-      );
-      act(() => {
-        mockAddEventListener.mock.calls[0][1]({ matches: true });
-      });
-
-      expect(container.textContent).toEqual('DARK');
-    });
-
-    it('removes the event listener on unmount', () => {
-      const { unmount } = render(
-        <EuiSystemColorModeProvider>
-          {(systemColorMode) => <>{systemColorMode}</>}
-        </EuiSystemColorModeProvider>
-      );
-      unmount();
-      expect(mockRemoveEventListener).toHaveBeenCalledTimes(1);
-    });
-  });
-});
diff --git a/packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.tsx b/packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.tsx
deleted file mode 100644
index 9148a16e0cb..00000000000
--- a/packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { FunctionComponent, ReactElement, useState, useEffect } from 'react';
-import { EuiThemeColorModeStandard } from '../../../services';
-
-export const COLOR_MODE_MEDIA_QUERY = '(prefers-color-scheme: dark)';
-
-export const EuiSystemColorModeProvider: FunctionComponent<{
-  children: (systemColorMode: EuiThemeColorModeStandard) => ReactElement;
-}> = ({ children }) => {
-  // Check typeof and use optional chaining for SSR or test environments
-  const [systemColorMode, setSystemColorMode] =
-    useState<EuiThemeColorModeStandard>(() =>
-      typeof window !== 'undefined' &&
-      window.matchMedia?.(COLOR_MODE_MEDIA_QUERY)?.matches
-        ? 'DARK'
-        : 'LIGHT'
-    );
-
-  // Listen for system changes
-  useEffect(() => {
-    const eventListener = (event: MediaQueryListEvent) => {
-      setSystemColorMode(event.matches ? 'DARK' : 'LIGHT');
-    };
-
-    // Optional chaining here is for test environments - SSR should not run useEffect
-    window
-      .matchMedia?.(COLOR_MODE_MEDIA_QUERY)
-      .addEventListener?.('change', eventListener);
-
-    // Clean up the listener on unmount
-    return () => {
-      window
-        .matchMedia?.(COLOR_MODE_MEDIA_QUERY)
-        .removeEventListener?.('change', eventListener);
-    };
-  }, []);
-
-  return children(systemColorMode);
-};
diff --git a/packages/eui/src/components/provider/system_color_mode/index.ts b/packages/eui/src/components/provider/system_defaults/index.ts
similarity index 72%
rename from packages/eui/src/components/provider/system_color_mode/index.ts
rename to packages/eui/src/components/provider/system_defaults/index.ts
index 122c0a3402f..bfedd7889a5 100644
--- a/packages/eui/src/components/provider/system_color_mode/index.ts
+++ b/packages/eui/src/components/provider/system_defaults/index.ts
@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiSystemColorModeProvider } from './system_color_mode_provider';
+export { EuiSystemDefaultsProvider } from './system_defaults_provider';
+export { useWindowMediaMatcher } from './match_media_hook';
diff --git a/packages/eui/src/components/provider/system_defaults/match_media_hook.test.ts b/packages/eui/src/components/provider/system_defaults/match_media_hook.test.ts
new file mode 100644
index 00000000000..14fea97480b
--- /dev/null
+++ b/packages/eui/src/components/provider/system_defaults/match_media_hook.test.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { renderHook, renderHookAct } from '../../../test/rtl';
+
+import { useWindowMediaMatcher } from './match_media_hook';
+
+describe('useWindowMediaMatcher', () => {
+  const useMockMediaQuery = () => useWindowMediaMatcher('(min-width: 500px)');
+
+  // @see https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+  const mockAddEventListener = jest.fn();
+  const mockRemoveEventListener = jest.fn();
+  const mockMatchMedia = (matches: boolean) => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn((query) => ({
+        matches,
+        media: query,
+        addEventListener: mockAddEventListener,
+        removeEventListener: mockRemoveEventListener,
+      })),
+    });
+  };
+
+  beforeEach(() => jest.clearAllMocks());
+
+  describe('returns the `.matches` value of the window.matchMedia', () => {
+    test('true', () => {
+      mockMatchMedia(true);
+      const { result } = renderHook(useMockMediaQuery);
+      expect(result.current).toEqual(true);
+    });
+
+    test('false', () => {
+      mockMatchMedia(false);
+      const { result } = renderHook(useMockMediaQuery);
+      expect(result.current).toEqual(false);
+    });
+  });
+
+  describe('event listener', () => {
+    it('initializes an event listener that listens for changes to the media query', () => {
+      mockMatchMedia(false);
+
+      const { result } = renderHook(useMockMediaQuery);
+      expect(result.current).toEqual(false);
+
+      expect(mockAddEventListener).toHaveBeenCalledWith(
+        'change',
+        expect.any(Function)
+      );
+      renderHookAct(() => {
+        mockAddEventListener.mock.calls[0][1]({ matches: true });
+      });
+
+      expect(result.current).toEqual(true);
+    });
+
+    it('removes the event listener on unmount', () => {
+      const { unmount } = renderHook(useMockMediaQuery);
+      unmount();
+      expect(mockRemoveEventListener).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/packages/eui/src/components/provider/system_defaults/match_media_hook.ts b/packages/eui/src/components/provider/system_defaults/match_media_hook.ts
new file mode 100644
index 00000000000..16f956e8c20
--- /dev/null
+++ b/packages/eui/src/components/provider/system_defaults/match_media_hook.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useState, useEffect } from 'react';
+
+export const useWindowMediaMatcher = (mediaQuery: string) => {
+  // Check typeof and use optional chaining for SSR or test environments
+  const [mediaMatches, setMediaMatches] = useState(
+    () =>
+      typeof window !== 'undefined' &&
+      (window?.matchMedia?.(mediaQuery)?.matches ?? false)
+  );
+
+  // Listen for system changes
+  useEffect(() => {
+    const eventListener = (event: MediaQueryListEvent) => {
+      setMediaMatches(event.matches);
+    };
+
+    // Optional chaining here is for test environments - SSR should not run useEffect
+    window.matchMedia?.(mediaQuery).addEventListener?.('change', eventListener);
+
+    // Clean up the listener on unmount
+    return () => {
+      window
+        .matchMedia?.(mediaQuery)
+        .removeEventListener?.('change', eventListener);
+    };
+  }, [mediaQuery]);
+
+  return mediaMatches;
+};
diff --git a/packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.server.test.tsx b/packages/eui/src/components/provider/system_defaults/system_defaults_provider.server.test.tsx
similarity index 70%
rename from packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.server.test.tsx
rename to packages/eui/src/components/provider/system_defaults/system_defaults_provider.server.test.tsx
index d05f44e68a7..dc56987af6d 100644
--- a/packages/eui/src/components/provider/system_color_mode/system_color_mode_provider.server.test.tsx
+++ b/packages/eui/src/components/provider/system_defaults/system_defaults_provider.server.test.tsx
@@ -13,17 +13,16 @@
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 
-import { EuiSystemColorModeProvider } from './system_color_mode_provider';
+import { EuiSystemDefaultsProvider } from './system_defaults_provider';
 
-describe('EuiSystemColorModeProvider', () => {
+describe('EuiSystemDefaultsProvider', () => {
   it('handles server-side rendering without crashing', () => {
-    const children = jest.fn(() => <>Test</>);
-
     const renderOnServer = () =>
-      renderToString(<EuiSystemColorModeProvider children={children} />);
+      renderToString(
+        <EuiSystemDefaultsProvider>Test</EuiSystemDefaultsProvider>
+      );
     expect(renderOnServer).not.toThrow();
 
     expect(renderOnServer()).toEqual('Test');
-    expect(children).toHaveBeenCalledWith('LIGHT');
   });
 });
diff --git a/packages/eui/src/components/provider/system_defaults/system_defaults_provider.test.tsx b/packages/eui/src/components/provider/system_defaults/system_defaults_provider.test.tsx
new file mode 100644
index 00000000000..d57c37d7855
--- /dev/null
+++ b/packages/eui/src/components/provider/system_defaults/system_defaults_provider.test.tsx
@@ -0,0 +1,101 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { useEuiTheme } from '../../../services';
+
+jest.mock('./match_media_hook', () => ({
+  useWindowMediaMatcher: jest.fn(),
+}));
+import { useWindowMediaMatcher } from './match_media_hook';
+
+import { EuiSystemDefaultsProvider } from './system_defaults_provider';
+
+describe('EuiSystemDefaultsProvider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('color mode', () => {
+    const Output = () => {
+      const { colorMode } = useEuiTheme();
+      return <>{colorMode}</>;
+    };
+
+    it('falls back to light mode if no dark mode media query has been set', () => {
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <Output />
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('LIGHT');
+    });
+
+    it('detects dark mode system settings', () => {
+      (useWindowMediaMatcher as jest.Mock).mockImplementation((media) => {
+        if (media === '(prefers-color-scheme: dark)') return true;
+      });
+
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <Output />
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('DARK');
+    });
+  });
+
+  describe('high contrast mode', () => {
+    const Output = () => {
+      const { highContrastMode } = useEuiTheme();
+      return <>{String(highContrastMode)}</>;
+    };
+
+    it('returns `false` if no contrast-related media query has been set', () => {
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <Output />
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('false');
+    });
+
+    it('returns `preferred` for MacOS high contrast mode', () => {
+      (useWindowMediaMatcher as jest.Mock).mockImplementation((media) => {
+        if (media === '(prefers-contrast: more)') return true;
+      });
+
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <Output />
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('preferred');
+    });
+
+    it('returns `forced` for Windows high contrast mode', () => {
+      (useWindowMediaMatcher as jest.Mock).mockImplementation((media) => {
+        if (media === '(forced-colors: active)') return true;
+      });
+
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <Output />
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('forced');
+    });
+  });
+});
diff --git a/packages/eui/src/components/provider/system_defaults/system_defaults_provider.tsx b/packages/eui/src/components/provider/system_defaults/system_defaults_provider.tsx
new file mode 100644
index 00000000000..db9a81a18d0
--- /dev/null
+++ b/packages/eui/src/components/provider/system_defaults/system_defaults_provider.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, PropsWithChildren } from 'react';
+import {
+  EuiColorModeContext,
+  EuiHighContrastModeContext,
+} from '../../../services';
+
+import { useWindowMediaMatcher } from './match_media_hook';
+
+export const EuiSystemDefaultsProvider: FunctionComponent<
+  PropsWithChildren
+> = ({ children }) => {
+  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+  const systemColorMode = useWindowMediaMatcher('(prefers-color-scheme: dark)')
+    ? 'DARK'
+    : 'LIGHT';
+
+  //  There are different types of high contrast modes based on system/OS settings. @see:
+  // - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
+  // - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
+  // - https://kilianvalkhof.com/2023/css-html/i-no-longer-understand-prefers-contrast/
+  const windowsHighContrast = useWindowMediaMatcher('(forced-colors: active)');
+  const macHighContrast = useWindowMediaMatcher('(prefers-contrast: more)');
+  const systemHighContrastMode = windowsHighContrast
+    ? 'forced'
+    : macHighContrast
+    ? 'preferred'
+    : false;
+
+  return (
+    <EuiColorModeContext.Provider value={systemColorMode}>
+      <EuiHighContrastModeContext.Provider value={systemHighContrastMode}>
+        {children}
+      </EuiHighContrastModeContext.Provider>
+    </EuiColorModeContext.Provider>
+  );
+};
diff --git a/packages/eui/src/components/resizable_container/resizable_button.stories.tsx b/packages/eui/src/components/resizable_container/resizable_button.stories.tsx
index 04e3597d0a3..127903c4aba 100644
--- a/packages/eui/src/components/resizable_container/resizable_button.stories.tsx
+++ b/packages/eui/src/components/resizable_container/resizable_button.stories.tsx
@@ -49,3 +49,24 @@ export const Playground: Story = {
     </EuiPanel>
   ),
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  render: () => (
+    <div style={{ padding: 20, inlineSize: 240 }}>
+      <EuiPanel
+        style={{ blockSize: 200, inlineSize: 200, position: 'relative' }}
+        borderRadius="none"
+      >
+        <EuiResizableButton
+          isHorizontal={true}
+          style={{ position: 'absolute', top: 0, right: 0 }}
+          // screenshot the focus thicker border state without the keyboard outline focus
+          css={{ outline: 'none !important' }}
+          autoFocus
+        />
+      </EuiPanel>
+    </div>
+  ),
+};
diff --git a/packages/eui/src/components/resizable_container/resizable_button.styles.ts b/packages/eui/src/components/resizable_container/resizable_button.styles.ts
index 17d172ef233..c64527556d3 100644
--- a/packages/eui/src/components/resizable_container/resizable_button.styles.ts
+++ b/packages/eui/src/components/resizable_container/resizable_button.styles.ts
@@ -10,6 +10,10 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme, transparentize } from '../../services';
 import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 
 export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -18,7 +22,6 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
   const negativeMargin = mathWithUnits(buttonSize, (x) => x / -2);
   const grabHandleWidth = euiTheme.size.m;
   const grabHandleHeight = euiTheme.border.width.thin;
-
   const transitionSpeed = euiTheme.animation.fast;
   const transition = `${transitionSpeed} ease`;
 
@@ -27,11 +30,13 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
     // 1. The "grab" handle transforms into a thicker straight line on :hover and :focus
     // 2. Start/end aligned grab handles should have a slight margin offset that disappears on hover/focus
     // 3. CSS hack to smooth out/anti-alias the 1px wide handles at various zoom levels
+    // 4. High contrast modes should not rely on background-color to indicate focus state, but on border width
     euiResizableButton: css`
       z-index: 1;
       flex-shrink: 0;
       display: flex;
       justify-content: center;
+      ${preventForcedColors(euiThemeContext)} /* 4 */
 
       &:disabled {
         display: none;
@@ -48,24 +53,36 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
         }
       }
 
-      /* Lighten color on :hover */
-      &:hover {
-        &::before,
-        &::after {
-          background-color: ${euiTheme.colors.mediumShade};
-        }
-      }
+      /* Lighten color on :hover for non-high-contrast modes */
+      ${highContrastModeStyles(euiThemeContext, {
+        /* 4 */
+        none: `
+          &:hover {
+            &::before,
+            &::after {
+              background-color: ${euiTheme.colors.mediumShade};
+            }
+          }`,
+      })}
 
       /* Add a transparent background to the container and color the border primary
          with primary color on :focus (NOTE - :active is needed for Safari) */
       &:focus,
       &:active {
-        background-color: ${transparentize(euiTheme.colors.primary, 0.1)};
+        ${highContrastModeStyles(euiThemeContext, {
+          /* 4 */
+          none: `
+            background-color: ${transparentize(euiTheme.colors.primary, 0.1)};
+
+            &::before,
+            &::after {
+              background-color: ${euiTheme.colors.primary};
+            }
+          `,
+        })}
 
         &::before,
         &::after {
-          background-color: ${euiTheme.colors.primary};
-
           /* Overrides default transition so that "grab" background-color doesn't animate */
           ${euiCanAnimate} {
             transition: width ${transition}, height ${transition};
@@ -121,6 +138,7 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
             ${logicalCSS('height', '100%')}
           }
         }
+        ${_highContrastForcedBorder(euiThemeContext, 'horizontal')}
       `,
       vertical: css`
         &::before {
@@ -136,6 +154,7 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
             ${logicalCSS('width', '100%')}
           }
         }
+        ${_highContrastForcedBorder(euiThemeContext, 'vertical')}
       `,
     },
 
@@ -190,6 +209,7 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
             transform: none; /* 3 */
           }
         }
+        ${_highContrastForcedBorder(euiThemeContext, 'horizontal')}
       `,
       vertical: css`
         &::before,
@@ -210,6 +230,7 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
             transform: none; /* 3 */
           }
         }
+        ${_highContrastForcedBorder(euiThemeContext, 'vertical')}
       `,
     },
     alignIndicator: {
@@ -225,3 +246,27 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
     },
   };
 };
+
+/* 4 */
+const _highContrastForcedBorder = (
+  euiThemeContext: UseEuiTheme,
+  direction: 'horizontal' | 'vertical'
+) => {
+  const { highContrastMode, euiTheme } = euiThemeContext;
+  if (!highContrastMode) return '';
+
+  const dimension = direction === 'horizontal' ? 'width' : 'height';
+
+  return `
+    &:focus, &:active {
+      &::before, &::after {
+        ${logicalCSS(dimension, euiTheme.border.width.thick)}
+        background-color: ${
+          highContrastMode === 'forced'
+            ? euiTheme.border.color
+            : euiTheme.colors.primary
+        };
+      }
+    }
+  `;
+};
diff --git a/packages/eui/src/components/resizable_container/resizable_panel.styles.ts b/packages/eui/src/components/resizable_container/resizable_panel.styles.ts
index cda10b5402f..b992896267f 100644
--- a/packages/eui/src/components/resizable_container/resizable_panel.styles.ts
+++ b/packages/eui/src/components/resizable_container/resizable_panel.styles.ts
@@ -12,6 +12,7 @@ import {
   logicalCSSWithFallback,
   euiScrollBarStyles,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 
 export const euiResizablePanelStyles = {
@@ -31,6 +32,11 @@ export const euiResizablePanelContentStyles = (
   return {
     euiResizablePanel__content: css`
       ${logicalCSS('height', '100%')}
+
+      ${highContrastModeStyles(euiThemeContext, {
+        // Disable default high contrast borders - they make the resize indicators too hard to see
+        preferred: 'border: none;',
+      })}
     `,
     scrollable: css`
       ${euiScrollBarStyles(euiThemeContext)}
diff --git a/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap b/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
index f870d340b47..498d2d9346b 100644
--- a/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
+++ b/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
@@ -557,7 +557,7 @@ exports[`EuiSelectableListItem props tooltip behavior on mouseover 1`] = `
       </div>
       <div
         class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
-        style="left: 4px; top: 0px;"
+        style="left: 3px; top: 100%;"
       />
       <div>
         I am a tooltip!
@@ -637,7 +637,7 @@ exports[`EuiSelectableListItem props tooltip behavior when isFocused 1`] = `
       </div>
       <div
         class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
-        style="left: 4px; top: 0px;"
+        style="left: 3px; top: 100%;"
       />
       <div>
         I am a tooltip!
diff --git a/packages/eui/src/components/side_nav/side_nav_item.styles.ts b/packages/eui/src/components/side_nav/side_nav_item.styles.ts
index ef2ba57c5dc..1cf5f079896 100644
--- a/packages/eui/src/components/side_nav/side_nav_item.styles.ts
+++ b/packages/eui/src/components/side_nav/side_nav_item.styles.ts
@@ -59,8 +59,7 @@ export const euiSideNavItemStyles = (euiThemeContext: UseEuiTheme) => {
         content: '';
         ${logicalCSS('vertical', 0)}
         ${logicalCSS('left', 0)}
-        ${logicalCSS('width', euiTheme.border.width.thin)}
-        background-color: ${euiTheme.border.color};
+        ${logicalCSS('border-left', euiTheme.border.thin)}
       }
 
       /* If this is actually the last item, we don't want the vertical line to stretch all the way down */
@@ -166,8 +165,7 @@ export const euiSideNavItemButtonStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('top', euiTheme.size.m)}
         ${logicalCSS('left', 0)}
         ${logicalCSS('width', euiTheme.size.xs)}
-        ${logicalCSS('height', euiTheme.border.width.thin)}
-        background-color: ${euiTheme.border.color};
+        ${logicalCSS('border-bottom', euiTheme.border.thin)}
       }
     `,
 
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`
diff --git a/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap
index 1198e9d88e7..b67b30d8797 100644
--- a/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`EuiStep is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -57,7 +57,7 @@ exports[`EuiStep props headingElement 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -128,7 +128,7 @@ exports[`EuiStep props status current is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-current"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -199,7 +199,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -237,7 +237,7 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -306,7 +306,7 @@ exports[`EuiStep props status warning is rendered 1`] = `
       class="euiStepNumber emotion-euiStepNumber-s-warning"
     >
       <span
-        class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
+        class="euiStepNumber__icon emotion-euiStepNumber__icon"
         data-euiicon-type="warning"
       >
         Step 1 has warnings
@@ -345,7 +345,7 @@ exports[`EuiStep props step 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         5
       </span>
@@ -383,7 +383,7 @@ exports[`EuiStep props titleSize 1`] = `
       </span>
       <span
         aria-hidden="true"
-        class="euiStepNumber__number emotion-euiStepNumber__number"
+        class="euiStepNumber__number"
       >
         1
       </span>
diff --git a/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index 71b9c8685ea..9f6c54b5043 100644
--- a/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiStepHorizontal is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -45,7 +45,7 @@ exports[`EuiStepHorizontal props size m is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -72,7 +72,7 @@ exports[`EuiStepHorizontal props size s is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -142,7 +142,7 @@ exports[`EuiStepHorizontal props status current is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-current"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -192,7 +192,7 @@ exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -221,7 +221,7 @@ exports[`EuiStepHorizontal props status disabled overrides the passed status 1`]
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -248,7 +248,7 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
@@ -295,7 +295,7 @@ exports[`EuiStepHorizontal props status warning is rendered 1`] = `
     class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-warning-euiStepHorizontal__number"
   >
     <span
-      class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
+      class="euiStepNumber__icon emotion-euiStepNumber__icon"
       data-euiicon-type="warning"
     >
       Step 1 has warnings
@@ -323,7 +323,7 @@ exports[`EuiStepHorizontal props step 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       5
     </span>
@@ -350,7 +350,7 @@ exports[`EuiStepHorizontal props title 1`] = `
     </span>
     <span
       aria-hidden="true"
-      class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+      class="euiStepNumber__number"
     >
       1
     </span>
diff --git a/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap
index 4ce02e0d6ad..15cac627620 100644
--- a/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiStepNumber is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number"
+    class="euiStepNumber__number"
   />
 </span>
 `;
@@ -42,7 +42,7 @@ exports[`EuiStepNumber props status current is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number-current"
+    class="euiStepNumber__number"
   >
     1
   </span>
@@ -73,7 +73,7 @@ exports[`EuiStepNumber props status disabled is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+    class="euiStepNumber__number"
   >
     1
   </span>
@@ -91,7 +91,7 @@ exports[`EuiStepNumber props status incomplete is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+    class="euiStepNumber__number"
   >
     1
   </span>
@@ -120,7 +120,7 @@ exports[`EuiStepNumber props status warning is rendered 1`] = `
   class="euiStepNumber emotion-euiStepNumber-s-warning"
 >
   <span
-    class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
+    class="euiStepNumber__icon emotion-euiStepNumber__icon"
     data-euiicon-type="warning"
   >
     Step 1 has warnings
@@ -139,7 +139,7 @@ exports[`EuiStepNumber props titleSize is rendered 1`] = `
   </span>
   <span
     aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number"
+    class="euiStepNumber__number"
   >
     1
   </span>
diff --git a/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap
index a9f3ac0e7e2..44a3c1318fa 100644
--- a/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -57,7 +57,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -92,7 +92,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           3
         </span>
@@ -136,7 +136,7 @@ exports[`EuiSteps renders steps 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -171,7 +171,7 @@ exports[`EuiSteps renders steps 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -206,7 +206,7 @@ exports[`EuiSteps renders steps 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           3
         </span>
@@ -250,7 +250,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           10
         </span>
@@ -285,7 +285,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           11
         </span>
@@ -320,7 +320,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           12
         </span>
@@ -364,7 +364,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           1
         </span>
@@ -399,7 +399,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -434,7 +434,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           3
         </span>
diff --git a/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
index 346c7965a05..d5521d197fb 100644
--- a/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
+++ b/packages/eui/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-current"
+          class="euiStepNumber__number"
         >
           2
         </span>
@@ -80,7 +80,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-incomplete"
+          class="euiStepNumber__number"
         >
           3
         </span>
@@ -111,7 +111,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         </span>
         <span
           aria-hidden="true"
-          class="euiStepNumber__number emotion-euiStepNumber__number-disabled"
+          class="euiStepNumber__number"
         >
           4
         </span>
diff --git a/packages/eui/src/components/steps/step.styles.ts b/packages/eui/src/components/steps/step.styles.ts
index 78e8fc89861..75a9fc75406 100644
--- a/packages/eui/src/components/steps/step.styles.ts
+++ b/packages/eui/src/components/steps/step.styles.ts
@@ -25,51 +25,47 @@ export const euiStepStyles = (euiThemeContext: UseEuiTheme) => {
 
   // the vertical line is centered on the number, so we need to offset the line
   // by half of the number size & half of the line size to center it
-  const lineStartPosition = mathWithUnits(
-    [euiStep.numberSize, euiTheme.border.width.thick],
-    (x, y) => x / 2 - y / 2
-  );
-  const lineEndPosition = mathWithUnits(
-    [euiStep.numberSize, euiTheme.border.width.thick],
-    (x, y) => x / 2 + y / 2
-  );
-
-  const lineGradient = `linear-gradient(to right,
-    transparent 0,
-    transparent ${lineStartPosition},
-    ${euiTheme.border.color} ${lineStartPosition},
-    ${euiTheme.border.color} ${lineEndPosition},
-    transparent ${lineEndPosition},
-    transparent 100%)`;
+  const getLeftPosition = (numberSize: string) =>
+    mathWithUnits(
+      [numberSize, euiTheme.border.width.thick],
+      (x, y) => x / 2 - y / 2
+    );
 
   return {
     euiStep: css`
+      position: relative;
+
       /* Create border on all but the last step */
-      &:not(:last-of-type) {
-        background-image: ${lineGradient};
-        background-repeat: no-repeat;
+      &:not(:last-of-type)::before {
+        content: '';
+        position: absolute;
+        ${logicalCSS('bottom', 0)}
+        ${logicalCSS('border-left', euiTheme.border.thick)}
       }
     `,
     // Sizes
     m: css`
-      &:not(:last-of-type) {
-        background-position: left ${euiStep.numberSize};
+      &:not(:last-of-type)::before {
+        ${logicalCSS('top', euiStep.numberSize)}
+        ${logicalCSS('left', getLeftPosition(euiStep.numberSize))}
       }
     `,
     s: css`
-      &:not(:last-of-type) {
-        background-position: left ${euiStep.numberSize};
+      &:not(:last-of-type)::before {
+        ${logicalCSS('top', euiStep.numberSize)}
+        ${logicalCSS('left', getLeftPosition(euiStep.numberSize))}
       }
     `,
     xs: css`
-      &:not(:last-of-type) {
-        /* Adjust the line to be centered on the smaller number */
-        background-position: -${euiTheme.size.xs} ${euiStep.numberXSSize};
+      &:not(:last-of-type)::before {
+        ${logicalCSS('top', euiStep.numberXSSize)}
+        ${logicalCSS('left', getLeftPosition(euiStep.numberXSSize))}
       }
     `,
     xxs: css`
-      &:not(:last-of-type) {
-        background-position: -${euiTheme.size.s} ${euiStep.numberXXSSize};
+      &:not(:last-of-type)::before {
+        ${logicalCSS('top', euiStep.numberXXSSize)}
+        ${logicalCSS('left', getLeftPosition(euiStep.numberXXSSize))}
       }
     `,
   };
diff --git a/packages/eui/src/components/steps/step_horizontal.styles.ts b/packages/eui/src/components/steps/step_horizontal.styles.ts
index ef1a7b11460..41978d6edaa 100644
--- a/packages/eui/src/components/steps/step_horizontal.styles.ts
+++ b/packages/eui/src/components/steps/step_horizontal.styles.ts
@@ -10,8 +10,9 @@ import { css } from '@emotion/react';
 import { UseEuiTheme, makeHighContrastColor } from '../../services';
 import {
   euiBreakpoint,
+  logicalCSS,
   logicalShorthandCSS,
-  euiFocusRing,
+  euiOutline,
   euiCanAnimate,
   mathWithUnits,
 } from '../../global_styling/';
@@ -19,7 +20,7 @@ import { euiTitle } from '../title/title.styles';
 import { euiStepVariables } from './step.styles';
 
 export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
   const euiStep = euiStepVariables(euiTheme);
 
   /**
@@ -60,8 +61,7 @@ export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => {
       &::after {
         content: '';
         position: absolute;
-        background-color: ${euiTheme.border.color};
-        block-size: ${euiTheme.border.width.thick};
+        ${logicalCSS('border-top', euiTheme.border.thick)}
         z-index: ${euiTheme.levels.content}; /* 1 */
       }
 
@@ -91,11 +91,11 @@ export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => {
         outline: none;
 
         .euiStepHorizontal__number {
-          ${euiFocusRing(euiThemeContext)}
-        }
-
-        .euiStepHorizontal__number:not(:focus-visible) {
-          outline: ${euiTheme.focus.width} solid ${euiTheme.colors.darkestShade};
+          ${euiOutline(
+            euiThemeContext,
+            highContrastMode ? 0 : 'center', // Account for border in high contrast mode
+            euiTheme.colors.fullShade
+          )}
         }
       }
     `,
@@ -113,6 +113,11 @@ export const euiStepHorizontalNumberStyles = (euiThemeContext: UseEuiTheme) => {
       position: relative; /* 1 */
       z-index: ${Number(euiTheme.levels.content) + 1}; /* 1 */
 
+      /* Tweak number vertical alignment slightly */
+      .euiStepNumber__number {
+        margin-block-start: -0.5px;
+      }
+
       ${euiCanAnimate} {
         transition: all ${euiTheme.animation.fast} ease-in-out;
       }
diff --git a/packages/eui/src/components/steps/step_horizontal.tsx b/packages/eui/src/components/steps/step_horizontal.tsx
index ef71467f8d1..5bc3ab13e6e 100644
--- a/packages/eui/src/components/steps/step_horizontal.tsx
+++ b/packages/eui/src/components/steps/step_horizontal.tsx
@@ -14,7 +14,7 @@ import React, {
   MouseEventHandler,
 } from 'react';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import {
   EuiStepNumber,
   EuiStepNumberProps,
@@ -80,18 +80,17 @@ export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps> = ({
 
   const classes = classNames('euiStepHorizontal', className);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiStepHorizontalStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiStepHorizontalStyles);
   const cssStyles = [
     styles.euiStepHorizontal,
     styles[size],
     status === 'disabled' ? styles.disabled : styles.enabled,
   ];
 
-  const numberStyles = euiStepHorizontalNumberStyles(euiTheme);
+  const numberStyles = useEuiMemoizedStyles(euiStepHorizontalNumberStyles);
   const cssNumberStyles = [numberStyles.euiStepHorizontal__number];
 
-  const titleStyles = euiStepHorizontalTitleStyles(euiTheme);
+  const titleStyles = useEuiMemoizedStyles(euiStepHorizontalTitleStyles);
   const cssTitleStyles = [
     titleStyles.euiStepHorizontal__title,
     status === 'disabled' && titleStyles.disabled,
diff --git a/packages/eui/src/components/steps/step_number.styles.ts b/packages/eui/src/components/steps/step_number.styles.ts
index 8dae030b78f..b0cc7df3586 100644
--- a/packages/eui/src/components/steps/step_number.styles.ts
+++ b/packages/eui/src/components/steps/step_number.styles.ts
@@ -15,29 +15,44 @@ import {
   euiAnimScale,
   logicalSizeCSS,
 } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
-import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 
+import { euiStepVariables } from './step.styles';
+
 export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
   const euiStep = euiStepVariables(euiTheme);
 
   const createStepsNumber = (size: string, fontSize: string) => {
     return `
-      display: inline-block;
-      line-height: ${size};
-      border-radius: ${size};
+      display: flex;
+      justify-content: center;
+      align-items: center;
       ${logicalCSS('width', size)};
       ${logicalCSS('height', size)};
-      text-align: center;
-      color: ${euiTheme.colors.emptyShade};
-      background-color: ${euiTheme.colors.primary};
       font-size: ${fontSize};
       font-weight: ${euiTheme.font.weight.medium};
+      color: ${euiTheme.colors.emptyShade};
+      background-color: ${euiTheme.colors.primary};
+      border-radius: 50%;
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `border: ${euiTheme.border.thick};`,
+      })}
     `;
   };
 
+  // euiButtonColor utils add colored borders in high contrast mode, but
+  // we want to set our own standardized border instead
+  const unsetButtonBorder = (buttonStyles: object) => ({
+    ...buttonStyles,
+    border: undefined,
+  });
+
   return {
     euiStepNumber: css`
       flex-shrink: 0;
@@ -75,12 +90,18 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     disabled: css`
       ${euiButtonFillColor(euiThemeContext, 'disabled')}
+      ${highContrastModeStyles(euiThemeContext, {
+        forced: 'opacity: 0.5;',
+      })}
     `,
     loading: css`
       background: transparent;
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: 'border: none;',
+      })}
     `,
     warning: css`
-      ${euiButtonFillColor(euiThemeContext, 'warning')}
+      ${unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'warning'))}
 
       ${euiCanAnimate} {
         animation: ${euiAnimScale} ${euiTheme.animation.fast}
@@ -88,7 +109,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     danger: css`
-      ${euiButtonFillColor(euiThemeContext, 'danger')}
+      ${unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'danger'))}
 
       ${euiCanAnimate} {
         animation: ${euiAnimScale} ${euiTheme.animation.fast}
@@ -96,7 +117,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     complete: css`
-      ${euiButtonFillColor(euiThemeContext, 'success')}
+      ${unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'success'))}
 
       ${euiCanAnimate} {
         animation: ${euiAnimScale} ${euiTheme.animation.fast}
@@ -104,9 +125,27 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     current: css`
-      border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.body};
-      box-shadow: 0 0 0 ${euiTheme.border.width.thick}
-        ${euiTheme.colors.primary};
+      transform: scale(1.1);
+      box-shadow: inset 0 0 0 ${euiTheme.border.width.thick}
+        ${euiTheme.colors.emptyShade};
+
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.primary};
+        `,
+        // !important overrides horizontal steps' euiOutline usage. The extra offset
+        // is here to helps reduce subpixel gaps between the outline and the border
+        preferred: `
+          border-width: ${euiTheme.border.width.thick};
+          outline-offset: -${euiTheme.border.width.thin} !important;
+        `,
+        // For Windows forced color themes, just invert the background/foreground colors
+        forced: `
+          color: ${euiTheme.colors.emptyShade};
+          background-color: ${euiTheme.colors.fullShade};
+          ${preventForcedColors(euiThemeContext)}
+        `,
+      })}
     `,
   };
 };
@@ -114,11 +153,7 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => {
 export const euiStepNumberContentStyles = ({ euiTheme }: UseEuiTheme) => {
   return {
     // Statuses with icon content
-    euiStepNumber__icon: css`
-      vertical-align: middle;
-      position: relative;
-      inset-block-start: -${euiTheme.border.width.thin};
-    `,
+    euiStepNumber__icon: css``,
     complete: css`
       /* Thicken the checkmark by adding a slight stroke */
       stroke: currentColor;
@@ -129,25 +164,14 @@ export const euiStepNumberContentStyles = ({ euiTheme }: UseEuiTheme) => {
       stroke: currentColor;
       stroke-width: ${mathWithUnits(euiTheme.border.width.thin, (x) => x / 2)};
     `,
-    warning: css`
-      /* Slight extra visual offset */
-      inset-block-start: -${euiTheme.border.width.thick};
-    `,
-    // Statuses with number content
-    euiStepNumber__number: css``,
-    incomplete: css`
-      /* Adjusts position because of thicker border */
-      display: unset;
-      position: relative;
-      inset-block-start: -${euiTheme.border.width.thick};
-    `,
-    loading: css``,
-    disabled: css``,
-    current: css`
-      /* Transform the step number so it appears in the center of the step circle */
-      display: inline-block;
-      transform: translateY(-${euiTheme.border.width.thick});
-    `,
+    warning: {
+      // Slight extra offset for visual balance. Intentionally uses static px and not tokens
+      m: `margin-block-start: -2px;`,
+      s: `margin-block-start: -2px;`,
+      xs: `margin-block-start: -1px;`,
+      none: `margin-block-start: -0.5px;`,
+    },
+    // Title sizes
     none: css(logicalSizeCSS(euiTheme.size.s)),
   };
 };
diff --git a/packages/eui/src/components/steps/step_number.tsx b/packages/eui/src/components/steps/step_number.tsx
index 8971086a6a2..a5ee23eb558 100644
--- a/packages/eui/src/components/steps/step_number.tsx
+++ b/packages/eui/src/components/steps/step_number.tsx
@@ -14,7 +14,7 @@ import { EuiIcon, IconSize } from '../icon';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiLoadingSpinnerSize } from '../loading/loading_spinner';
 import { EuiTitleProps } from '../title';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 
 import {
   useI18nCompleteStep,
@@ -79,15 +79,14 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
 
   const classes = classNames('euiStepNumber', className);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiStepNumberStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiStepNumberStyles);
   const cssStyles = [
     styles.euiStepNumber,
     styles[titleSize],
     status && styles[status],
   ];
 
-  const contentStyles = euiStepNumberContentStyles(euiTheme);
+  const iconStyles = useEuiMemoizedStyles(euiStepNumberContentStyles);
   let content: ReactNode;
   let screenReaderText: string | undefined;
 
@@ -114,11 +113,13 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
     case 'warning':
     case 'complete': {
       const cssIconStyles = [
-        contentStyles.euiStepNumber__icon,
-        contentStyles[status],
+        iconStyles.euiStepNumber__icon,
+        status === 'warning'
+          ? iconStyles.warning[titleSize]
+          : iconStyles[status],
         // EuiIcon does not support a xxs size so far,
         // we use custom sizing here instead
-        titleSize === 'none' && contentStyles[titleSize],
+        titleSize === 'none' && iconStyles[titleSize],
       ];
       const iconTypeMap = {
         danger: 'cross',
@@ -154,17 +155,8 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
         break;
       }
 
-      const cssNumberStyles = [
-        contentStyles.euiStepNumber__number,
-        status && contentStyles[status],
-      ];
-
       content = (
-        <span
-          aria-hidden="true"
-          className="euiStepNumber__number"
-          css={cssNumberStyles}
-        >
+        <span aria-hidden="true" className="euiStepNumber__number">
           {number}
         </span>
       );
diff --git a/packages/eui/src/components/steps/steps.stories.tsx b/packages/eui/src/components/steps/steps.stories.tsx
index 7a61be45306..b7f17557458 100644
--- a/packages/eui/src/components/steps/steps.stories.tsx
+++ b/packages/eui/src/components/steps/steps.stories.tsx
@@ -90,3 +90,9 @@ export const UnorderedSteps: Story = {
     titleSize: 'xxs',
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/steps/steps_horizontal.stories.tsx b/packages/eui/src/components/steps/steps_horizontal.stories.tsx
index 5603a9dc0e0..998a565e3d4 100644
--- a/packages/eui/src/components/steps/steps_horizontal.stories.tsx
+++ b/packages/eui/src/components/steps/steps_horizontal.stories.tsx
@@ -90,3 +90,9 @@ export const UnorderedSteps: Story = {
     size: 'xs',
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/steps/sub_steps.styles.ts b/packages/eui/src/components/steps/sub_steps.styles.ts
index 254b3fb97f9..bf0b7b3767f 100644
--- a/packages/eui/src/components/steps/sub_steps.styles.ts
+++ b/packages/eui/src/components/steps/sub_steps.styles.ts
@@ -8,13 +8,18 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
-export const euiSubStepsStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiSubStepsStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiSubSteps: css`
       padding: ${euiTheme.size.base};
       background-color: ${euiTheme.colors.lightestShade};
       margin-block-end: ${euiTheme.size.base};
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `border: ${euiTheme.border.thin};`,
+      })}
 
       > *:last-child {
         margin-block-end: 0;
diff --git a/packages/eui/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/packages/eui/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 5cf804dd3ed..cb9441e795d 100644
--- a/packages/eui/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/packages/eui/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -209,14 +209,18 @@ exports[`EuiTablePagination renders 1`] = `
         data-autofocus="true"
         data-popover-panel="true"
         role="dialog"
-        style="top: -16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+        style="top: -16px; left: -18px; will-change: transform, opacity; z-index: 2000;"
         tabindex="0"
       >
         <div
-          class="euiPopover__arrow emotion-euiPopoverArrow-top"
-          data-popover-arrow="top"
-          style="left: 10px; top: 0px;"
-        />
+          class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+          style="left: 9px; top: 100%;"
+        >
+          <div
+            class="euiPopover__arrow emotion-euiPopoverArrow-top"
+            data-popover-arrow="top"
+          />
+        </div>
         <p
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
diff --git a/packages/eui/src/components/table/table_row.styles.ts b/packages/eui/src/components/table/table_row.styles.ts
index 14858cfab61..335cb0f59af 100644
--- a/packages/eui/src/components/table/table_row.styles.ts
+++ b/packages/eui/src/components/table/table_row.styles.ts
@@ -13,6 +13,7 @@ import {
   euiCanAnimate,
   euiBackgroundColor,
   logicalCSS,
+  mathWithUnits,
 } from '../../global_styling';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 
@@ -79,9 +80,16 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('margin-bottom', cellContentPadding)}
 
         /* EuiPanel styling */
-        ${euiShadow(euiThemeContext, 's')}
+        ${euiShadow(euiThemeContext, 's', {
+          borderAllInHighContrastMode: true,
+        })}
         background-color: ${euiBackgroundColor(euiThemeContext, 'plain')};
         border-radius: ${euiTheme.border.radius.medium};
+
+        &:has(+ .euiTableRow-isExpandedRow) {
+          ${logicalCSS('border-bottom-left-radius', 0)}
+          ${logicalCSS('border-bottom-right-radius', 0)}
+        }
       `,
       selected: css`
         &,
@@ -108,15 +116,22 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
           position: absolute;
           ${logicalCSS('vertical', 0)}
           ${logicalCSS('right', mobileSizes.actions.width)}
-          ${logicalCSS('width', euiTheme.border.width.thin)}
-          background-color: ${euiTheme.border.color};
+          ${logicalCSS('border-right', euiTheme.border.thin)}
         }
       `,
       /**
        * Bottom of card - expanded rows
        */
       expanded: css`
-        ${logicalCSS('margin-top', `-${mobileSizes.actions.offset}`)}
+        ${logicalCSS(
+          // On mobile, visually move the expanded row to join up with the
+          // preceding table row via negative margins
+          'margin-top',
+          mathWithUnits(
+            [cellContentPadding, euiTheme.border.width.thin],
+            (x, y) => (x + y) * -1
+          )
+        )}
         /* Padding accounting for the checkbox is already applied via the content */
         ${logicalCSS('padding-left', cellContentPadding)}
 
diff --git a/packages/eui/src/components/table/table_row_cell.styles.ts b/packages/eui/src/components/table/table_row_cell.styles.ts
index 1524075e5ca..8c92cdf057f 100644
--- a/packages/eui/src/components/table/table_row_cell.styles.ts
+++ b/packages/eui/src/components/table/table_row_cell.styles.ts
@@ -120,8 +120,7 @@ export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => {
             content: '';
             position: absolute;
             ${logicalCSS('horizontal', 0)}
-            ${logicalCSS('height', euiTheme.border.width.thin)}
-            background-color: ${euiTheme.border.color};
+            ${logicalCSS('border-top', euiTheme.border.thin)}
           }
 
           /* Minor vertical alignment of cell content */
diff --git a/packages/eui/src/components/tabs/tab.styles.ts b/packages/eui/src/components/tabs/tab.styles.ts
index c7b01efddf1..afcad4ae1d0 100644
--- a/packages/eui/src/components/tabs/tab.styles.ts
+++ b/packages/eui/src/components/tabs/tab.styles.ts
@@ -10,9 +10,16 @@ import { css } from '@emotion/react';
 import { logicalCSS, mathWithUnits, euiFontSize } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
-export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiTabStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
+  const selectedUnderlineSize = highContrastMode
+    ? mathWithUnits(euiTheme.border.thick, (x) => x * 2)
+    : euiTheme.border.width.thick;
+
   return {
     euiTab: css`
+      position: relative;
       display: flex;
       cursor: pointer;
       flex-direction: row;
@@ -28,6 +35,17 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => {
       &:focus {
         outline-offset: -${euiTheme.focus.width};
       }
+
+      /* Selected underline - use a pseudo element instead of box-shadow for easier
+         color setting, as well as Windows high contrast theme rendering */
+      &::after {
+        position: absolute;
+        ${logicalCSS('bottom', 0)}
+        ${logicalCSS('horizontal', 0)}
+        ${logicalCSS('border-bottom-style', 'solid')}
+        ${logicalCSS('border-bottom-width', selectedUnderlineSize)}
+        pointer-events: none;
+      }
     `,
     // variations
     expanded: css`
@@ -36,8 +54,12 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => {
       justify-content: center;
     `,
     selected: css`
-      box-shadow: inset 0 -${euiTheme.border.width.thick} 0 ${euiTheme.colors.primary};
       color: ${euiTheme.colors.primaryText};
+
+      &::after {
+        content: '';
+        border-color: ${euiTheme.colors.primary};
+      }
     `,
     disabled: {
       disabled: css`
@@ -45,7 +67,10 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => {
         color: ${euiTheme.colors.disabledText};
       `,
       selected: css`
-        box-shadow: inset 0 -${euiTheme.border.width.thick} 0 ${euiTheme.colors.disabledText};
+        &::after {
+          content: '';
+          border-color: ${euiTheme.colors.disabledText};
+        }
       `,
     },
   };
diff --git a/packages/eui/src/components/tabs/tabs.styles.ts b/packages/eui/src/components/tabs/tabs.styles.ts
index 5d1cb0bcc56..34016c64e36 100644
--- a/packages/eui/src/components/tabs/tabs.styles.ts
+++ b/packages/eui/src/components/tabs/tabs.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS, logicalCSSWithFallback } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 
 export const euiTabsStyles = (euiThemeContext: UseEuiTheme) => {
@@ -23,7 +24,10 @@ export const euiTabsStyles = (euiThemeContext: UseEuiTheme) => {
       flex-shrink: 0;
     `,
     bottomBorder: css`
-      box-shadow: inset 0 -${euiTheme.border.width.thin} 0 ${euiTheme.border.color};
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `box-shadow: inset 0 -${euiTheme.border.width.thin} 0 ${euiTheme.border.color};`,
+        forced: logicalCSS('border-bottom', euiTheme.border.thin),
+      })}
     `,
     // sizes
     s: css`
diff --git a/packages/eui/src/components/text/__snapshots__/text.styles.test.ts.snap b/packages/eui/src/components/text/__snapshots__/text.styles.test.ts.snap
index f4937379d57..dd8e4853c4a 100644
--- a/packages/eui/src/components/text/__snapshots__/text.styles.test.ts.snap
+++ b/packages/eui/src/components/text/__snapshots__/text.styles.test.ts.snap
@@ -143,6 +143,7 @@ exports[`euiTextStyles sizes m 1`] = `
       font-size: .9em; /* 90% of parent font size */
     }
     
+    
     kbd {
       padding-block-end: 4px;
       /* Ensures the shape still looks like a square when only one character */
@@ -304,6 +305,7 @@ exports[`euiTextStyles sizes relative 1`] = `
       font-size: .9em; /* 90% of parent font size */
     }
     
+    
   ;;label:relative;"
 `;
 
@@ -450,6 +452,7 @@ exports[`euiTextStyles sizes s 1`] = `
       font-size: .9em; /* 90% of parent font size */
     }
     
+    
   ;;label:s;"
 `;
 
@@ -596,5 +599,6 @@ exports[`euiTextStyles sizes xs 1`] = `
       font-size: .9em; /* 90% of parent font size */
     }
     
+    
   ;;label:xs;"
 `;
diff --git a/packages/eui/src/components/text/text.styles.ts b/packages/eui/src/components/text/text.styles.ts
index fbafc8bb87c..d0a63be5d57 100644
--- a/packages/eui/src/components/text/text.styles.ts
+++ b/packages/eui/src/components/text/text.styles.ts
@@ -13,13 +13,14 @@ import {
   logicalShorthandCSS,
   logicalTextAlignCSS,
   euiFontSize,
-  euiBackgroundColor,
   _FontScaleOptions,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
+import { euiCodeTextColors } from '../code/code_syntax.styles';
 
 /**
  * TODO: Make this a global value so it can be set by theme?
@@ -202,6 +203,19 @@ const euiScaleText = (
     code:not(.euiCode):not(.euiCodeBlock__code)  {
       font-size: .9em; /* 90% of parent font size */
     }
+    ${highContrastModeStyles(euiThemeContext, {
+      // For EuiCodeBlocks, set the margin on the wrapper instead of on the <pre>
+      // so that high contrast mode borders render as expected
+      preferred: `
+        .euiCodeBlock {
+          ${logicalCSS('margin-bottom', lineHeightSize)}
+
+          pre {
+            ${logicalCSS('margin-bottom', 0)}
+          }
+        }
+      `,
+    })}
     ${
       // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
       _customScale === 'm'
@@ -234,6 +248,7 @@ const euiScaleText = (
  */
 export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
+  const codeColors = euiCodeTextColors(euiThemeContext);
 
   return {
     euiText: css`
@@ -303,12 +318,13 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
         color: inherit;
       }
 
-      pre:not(.euiCodeBlock__pre) {
+      pre:not(.euiCodeBlock > pre) {
         white-space: pre-wrap;
-        /* TODO: $euiCodeBlockBackgroundColor - switch to var once EuiCode is converted */
-        background: ${euiBackgroundColor(euiThemeContext, 'subdued')};
-        /* TODO: $euiCodeBlockColor - switch to var once EuiCode is converted */
-        color: ${euiTheme.colors.text};
+        background-color: ${codeColors.backgroundColor};
+        color: ${codeColors.color};
+        ${highContrastModeStyles(euiThemeContext, {
+          preferred: `border: ${euiTheme.border.thin}`,
+        })}
       }
 
       pre:not(.euiCodeBlock__pre),
@@ -331,6 +347,13 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
           euiTheme.border.radius.small,
           (x) => x / 2
         )};
+        ${highContrastModeStyles(euiThemeContext, {
+          // Fixes an odd border issue in Windows high contrast themes
+          forced: `
+            overflow: hidden;
+            vertical-align: middle;
+          `,
+        })}
       }
     `,
     constrainedWidth: css`
diff --git a/packages/eui/src/components/text_truncate/text_truncate.styles.ts b/packages/eui/src/components/text_truncate/text_truncate.styles.ts
index 9f7ea790b4f..d9a2bbfde9e 100644
--- a/packages/eui/src/components/text_truncate/text_truncate.styles.ts
+++ b/packages/eui/src/components/text_truncate/text_truncate.styles.ts
@@ -7,8 +7,10 @@
  */
 
 import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 
-export const euiTextTruncateStyles = {
+export const euiTextTruncateStyles = (euiThemeContext: UseEuiTheme) => ({
   euiTextTruncate: css`
     position: relative;
     overflow: hidden;
@@ -44,5 +46,8 @@ export const euiTextTruncateStyles = {
     @supports (-webkit-hyphens: none) {
       text-overflow: ellipsis;
     }
+
+    /* Force Windows high contrast themes to use the 0 alpha color */
+    ${preventForcedColors(euiThemeContext)}
   `,
-};
+});
diff --git a/packages/eui/src/components/text_truncate/text_truncate.tsx b/packages/eui/src/components/text_truncate/text_truncate.tsx
index 30022a43a8d..6e6c852dcf6 100644
--- a/packages/eui/src/components/text_truncate/text_truncate.tsx
+++ b/packages/eui/src/components/text_truncate/text_truncate.tsx
@@ -18,7 +18,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { useCombinedRefs } from '../../services';
+import { useCombinedRefs, useEuiMemoizedStyles } from '../../services';
 import {
   EuiResizeObserver,
   EuiResizeObserverProps,
@@ -26,7 +26,7 @@ import {
 import type { CommonProps } from '../common';
 
 import { TruncationUtils } from './utils';
-import { euiTextTruncateStyles as styles } from './text_truncate.styles';
+import { euiTextTruncateStyles } from './text_truncate.styles';
 
 const TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'] as const;
 export type EuiTextTruncationTypes = (typeof TRUNCATION_TYPES)[number];
@@ -214,6 +214,8 @@ const EuiTextTruncateWithWidth: FunctionComponent<
 
   const isTruncating = truncatedText !== text;
 
+  const styles = useEuiMemoizedStyles(euiTextTruncateStyles);
+
   return (
     <div
       className={classNames('euiTextTruncate', className)}
diff --git a/packages/eui/src/components/timeline/timeline.stories.tsx b/packages/eui/src/components/timeline/timeline.stories.tsx
index 486926538f3..80741df1afb 100644
--- a/packages/eui/src/components/timeline/timeline.stories.tsx
+++ b/packages/eui/src/components/timeline/timeline.stories.tsx
@@ -44,3 +44,9 @@ export const Playground: Story = {
     ],
   },
 };
+
+export const HighContrast: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+};
diff --git a/packages/eui/src/components/timeline/timeline.styles.ts b/packages/eui/src/components/timeline/timeline.styles.ts
index 3ba1f47f44f..bb7016e0ad4 100644
--- a/packages/eui/src/components/timeline/timeline.styles.ts
+++ b/packages/eui/src/components/timeline/timeline.styles.ts
@@ -23,14 +23,13 @@ const _gutterSizeAdjustment = (gutterSize: string) => {
 
 // The vertical line should only appear when the EuiTimelineItem's
 // are wrapped in a EuiTimeline. That's why these styles live here.
-const timelineVerticalLine = (euiTheme: UseEuiTheme['euiTheme']) => {
+const timelineVerticalLine = ({ euiTheme }: UseEuiTheme) => {
   return `  
     [class*='euiTimelineItem-'] > [class*='euiTimelineItemIcon-']::before {
       content: '';
       position: absolute;
       ${logicalCSS('top', 0)};
-      ${logicalCSS('width', euiTheme.size.xxs)};
-      background-color: ${euiTheme.colors.lightShade};
+      ${logicalCSS('border-left', euiTheme.border.thick)};
     }
 
     > [class*='euiTimelineItem-center']:first-child > [class*='euiTimelineItemIcon-']::before {
@@ -43,12 +42,13 @@ const timelineVerticalLine = (euiTheme: UseEuiTheme['euiTheme']) => {
   `;
 };
 
-export const euiTimelineStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiTimelineStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiTimeline: css`
       display: flex;
       flex-direction: column;
-      ${timelineVerticalLine(euiTheme)}
+      ${timelineVerticalLine(euiThemeContext)}
     `,
     m: css(_gutterSizeAdjustment(euiTheme.size.base)),
     l: css(_gutterSizeAdjustment(euiTheme.size.l)),
diff --git a/packages/eui/src/components/timeline/timeline_item_icon.styles.ts b/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
index 4ab49f30fef..e790b0cca03 100644
--- a/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
+++ b/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
@@ -9,26 +9,37 @@
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
-export const euiTimelineItemIconStyles = ({ euiTheme }: UseEuiTheme) => ({
-  euiTimelineItemIcon: css`
-    display: flex;
-    position: relative;
-    flex-grow: 0;
-    justify-content: center;
-    ${logicalCSS('margin-right', euiTheme.size.base)}
-  `,
-  euiTimelineItemIcon__content: css`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-  `,
-  //  Vertical alignments
-  top: css`
-    align-items: flex-start;
-  `,
-  center: css`
-    align-items: center;
-  `,
-});
+export const euiTimelineItemIconStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    euiTimelineItemIcon: css`
+      display: flex;
+      position: relative;
+      flex-grow: 0;
+      justify-content: center;
+      ${logicalCSS('margin-right', euiTheme.size.base)}
+    `,
+    euiTimelineItemIcon__content: css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `
+          & > * {
+            border: ${euiTheme.border.thin};
+          }
+        `,
+      })}
+    `,
+    //  Vertical alignments
+    top: css`
+      align-items: flex-start;
+    `,
+    center: css`
+      align-items: center;
+    `,
+  };
+};
diff --git a/packages/eui/src/components/toast/toast.styles.ts b/packages/eui/src/components/toast/toast.styles.ts
index 7ad7279b6af..dba677a5814 100644
--- a/packages/eui/src/components/toast/toast.styles.ts
+++ b/packages/eui/src/components/toast/toast.styles.ts
@@ -7,26 +7,33 @@
  */
 
 import { css } from '@emotion/react';
-import { euiTextBreakWord, logicalCSS } from '../../global_styling';
+import {
+  euiTextBreakWord,
+  logicalCSS,
+  mathWithUnits,
+} from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 import { euiShadowLarge } from '../../themes/amsterdam';
 import { euiTitle } from '../title/title.styles';
 
 export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
 
   return {
     // Base
     euiToast: css`
       border-radius: ${euiTheme.border.radius.medium};
-      ${euiShadowLarge(euiThemeContext)}
+      ${euiShadowLarge(euiThemeContext, { borderAllInHighContrastMode: true })}
 
       position: relative;
       ${logicalCSS('padding-horizontal', euiTheme.size.base)}
       ${logicalCSS('padding-vertical', euiTheme.size.base)}
       background-color: ${euiTheme.colors.emptyShade};
       ${logicalCSS('width', '100%')}
-
       ${euiTextBreakWord()} /* Prevent long lines from overflowing */
 
       &:hover,
@@ -43,18 +50,45 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('right', euiTheme.size.base)}
     `,
     // Variants
-    primary: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.primary}`)}
-    `,
-    success: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.success}`)}
-    `,
-    warning: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.warning}`)}
-    `,
-    danger: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.danger}`)}
-    `,
+    colors: {
+      _getStyles: (color: string) => {
+        // Increase color/border thickness for all high contrast modes
+        const borderWidth = highContrastMode
+          ? mathWithUnits(euiTheme.border.width.thick, (x) => x * 2)
+          : euiTheme.border.width.thick;
+
+        return highContrastModeStyles(euiThemeContext, {
+          none: logicalCSS('border-top', `${borderWidth} solid ${color}`),
+
+          // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
+          forced: `
+            overflow: hidden;
+
+            &::before {
+              content: '';
+              position: absolute;
+              ${logicalCSS('top', 0)}
+              ${logicalCSS('horizontal', 0)}
+              ${logicalCSS('height', borderWidth)}
+              background-color: ${color};
+              ${preventForcedColors(euiThemeContext)}
+            }
+          `,
+        });
+      },
+      get primary() {
+        return css(this._getStyles(euiTheme.colors.primary));
+      },
+      get success() {
+        return css(this._getStyles(euiTheme.colors.success));
+      },
+      get warning() {
+        return css(this._getStyles(euiTheme.colors.warning));
+      },
+      get danger() {
+        return css(this._getStyles(euiTheme.colors.danger));
+      },
+    },
   };
 };
 
diff --git a/packages/eui/src/components/toast/toast.tsx b/packages/eui/src/components/toast/toast.tsx
index e8f555aa74a..44a29b95728 100644
--- a/packages/eui/src/components/toast/toast.tsx
+++ b/packages/eui/src/components/toast/toast.tsx
@@ -42,7 +42,7 @@ export const EuiToast: FunctionComponent<EuiToastProps> = ({
   ...rest
 }) => {
   const baseStyles = useEuiMemoizedStyles(euiToastStyles);
-  const baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+  const baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
   const headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
   const headerCss = [
     headerStyles.euiToastHeader,
diff --git a/packages/eui/src/components/token/token.styles.ts b/packages/eui/src/components/token/token.styles.ts
index 01189ca24b4..067354e7e66 100644
--- a/packages/eui/src/components/token/token.styles.ts
+++ b/packages/eui/src/components/token/token.styles.ts
@@ -13,6 +13,7 @@ import {
   logicalSizeCSS,
   mathWithUnits,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import {
   UseEuiTheme,
   euiPaletteColorBlind,
@@ -28,11 +29,11 @@ const visColors = euiPaletteColorBlind();
 const visColorsBehindText = euiPaletteColorBlindBehindText();
 
 const getTokenColor = (
-  euiTheme: UseEuiTheme['euiTheme'],
-  colorMode: UseEuiTheme['colorMode'],
+  euiThemeContext: UseEuiTheme,
   fill: TokenFill,
   color: number | string
 ) => {
+  const { euiTheme, colorMode, highContrastMode } = euiThemeContext;
   const isVizColor = typeof color === 'number';
 
   const iconColor = isVizColor ? visColors[color] : euiTheme.colors.darkShade;
@@ -49,7 +50,9 @@ const getTokenColor = (
 
   const lightColor = makeHighContrastColor(iconColor)(backgroundLightColor);
 
-  const boxShadowColor = isDarkMode
+  const boxShadowColor = highContrastMode
+    ? iconColor
+    : isDarkMode
     ? shade(iconColor, 0.6)
     : tint(iconColor, 0.7);
 
@@ -67,7 +70,10 @@ const getTokenColor = (
       return `
         color: ${lightColor};
         background-color: ${backgroundLightColor};
-        box-shadow: inset 0 0 0 1px ${boxShadowColor};
+        ${highContrastModeStyles(euiThemeContext, {
+          none: `box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${boxShadowColor};`,
+          forced: `border: ${euiTheme.border.thin};`,
+        })}
       `;
     case 'dark':
       return `
@@ -78,85 +84,88 @@ const getTokenColor = (
 };
 
 export const euiTokenStyles = (
-  { euiTheme, colorMode }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   fill: TokenFill
-) => ({
-  // Base
-  euiToken: css`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      ${logicalCSS('height', '100%')}
-      margin: auto;
-    }
-  `,
-  // Shapes
-  circle: css`
-    border-radius: 50%;
-  `,
-  square: css`
-    border-radius: ${euiTheme.border.radius.small};
-  `,
-  rectangle: css`
-    box-sizing: content-box;
-    border-radius: ${euiTheme.border.radius.small};
-  `,
-  // Sizes
-  xs: css`
-    ${logicalSizeCSS(euiTheme.size.s)}
-
-    &[class*='-square'],
-    &[class*='-rectangle'] {
-      border-radius: ${mathWithUnits(
-        euiTheme.border.radius.small,
-        (x) => x / 2
-      )};
-    }
-
-    &[class*='-rectangle'] {
-      /* adds a small padding so that the icon is not touching the border */
-      ${logicalCSS('padding-vertical', '1px')}
-      ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
-    }
-  `,
-  s: css`
-    ${logicalSizeCSS(euiTheme.size.base)}
-
-    &[class*='-rectangle'] {
-      ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
-    }
-  `,
-  m: css`
-    ${logicalSizeCSS(euiTheme.size.l)}
-
-    &[class*='-rectangle'] {
-      ${logicalCSS('padding-horizontal', euiTheme.size.s)}
-    }
-  `,
-  l: css`
-    ${logicalSizeCSS(euiTheme.size.xl)}
-
-    &[class*='-rectangle'] {
-      ${logicalCSS('padding-horizontal', euiTheme.size.s)}
-    }
-  `,
-  // Colors
-  euiColorVis0: css(getTokenColor(euiTheme, colorMode, fill, 0)),
-  euiColorVis1: css(getTokenColor(euiTheme, colorMode, fill, 1)),
-  euiColorVis2: css(getTokenColor(euiTheme, colorMode, fill, 2)),
-  euiColorVis3: css(getTokenColor(euiTheme, colorMode, fill, 3)),
-  euiColorVis4: css(getTokenColor(euiTheme, colorMode, fill, 4)),
-  euiColorVis5: css(getTokenColor(euiTheme, colorMode, fill, 5)),
-  euiColorVis6: css(getTokenColor(euiTheme, colorMode, fill, 6)),
-  euiColorVis7: css(getTokenColor(euiTheme, colorMode, fill, 7)),
-  euiColorVis8: css(getTokenColor(euiTheme, colorMode, fill, 8)),
-  euiColorVis9: css(getTokenColor(euiTheme, colorMode, fill, 9)),
-  gray: css(getTokenColor(euiTheme, colorMode, fill, 'gray')),
-  customColor: css``,
-  // Fills
-  light: css``,
-  dark: css``,
-  none: css``,
-});
+) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    // Base
+    euiToken: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        ${logicalCSS('height', '100%')}
+        margin: auto;
+      }
+    `,
+    // Shapes
+    circle: css`
+      border-radius: 50%;
+    `,
+    square: css`
+      border-radius: ${euiTheme.border.radius.small};
+    `,
+    rectangle: css`
+      box-sizing: content-box;
+      border-radius: ${euiTheme.border.radius.small};
+    `,
+    // Sizes
+    xs: css`
+      ${logicalSizeCSS(euiTheme.size.s)}
+
+      &[class*='-square'],
+      &[class*='-rectangle'] {
+        border-radius: ${mathWithUnits(
+          euiTheme.border.radius.small,
+          (x) => x / 2
+        )};
+      }
+
+      &[class*='-rectangle'] {
+        /* adds a small padding so that the icon is not touching the border */
+        ${logicalCSS('padding-vertical', '1px')}
+        ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
+      }
+    `,
+    s: css`
+      ${logicalSizeCSS(euiTheme.size.base)}
+
+      &[class*='-rectangle'] {
+        ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
+      }
+    `,
+    m: css`
+      ${logicalSizeCSS(euiTheme.size.l)}
+
+      &[class*='-rectangle'] {
+        ${logicalCSS('padding-horizontal', euiTheme.size.s)}
+      }
+    `,
+    l: css`
+      ${logicalSizeCSS(euiTheme.size.xl)}
+
+      &[class*='-rectangle'] {
+        ${logicalCSS('padding-horizontal', euiTheme.size.s)}
+      }
+    `,
+    // Colors
+    euiColorVis0: css(getTokenColor(euiThemeContext, fill, 0)),
+    euiColorVis1: css(getTokenColor(euiThemeContext, fill, 1)),
+    euiColorVis2: css(getTokenColor(euiThemeContext, fill, 2)),
+    euiColorVis3: css(getTokenColor(euiThemeContext, fill, 3)),
+    euiColorVis4: css(getTokenColor(euiThemeContext, fill, 4)),
+    euiColorVis5: css(getTokenColor(euiThemeContext, fill, 5)),
+    euiColorVis6: css(getTokenColor(euiThemeContext, fill, 6)),
+    euiColorVis7: css(getTokenColor(euiThemeContext, fill, 7)),
+    euiColorVis8: css(getTokenColor(euiThemeContext, fill, 8)),
+    euiColorVis9: css(getTokenColor(euiThemeContext, fill, 9)),
+    gray: css(getTokenColor(euiThemeContext, fill, 'gray')),
+    customColor: css``,
+    // Fills
+    light: css``,
+    dark: css``,
+    none: css``,
+  };
+};
diff --git a/packages/eui/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap b/packages/eui/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
index 3b61b989efe..282ad6a7e4a 100644
--- a/packages/eui/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
+++ b/packages/eui/src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
       </div>
       <div
         class="euiToolTip__arrow emotion-euiToolTip__arrow-top"
-        style="left: 4px; top: 0px;"
+        style="left: 3px; top: 100%;"
       />
       <div>
         content
diff --git a/packages/eui/src/components/tool_tip/tool_tip.stories.tsx b/packages/eui/src/components/tool_tip/tool_tip.stories.tsx
index 8c4deb06263..dd4f75092ac 100644
--- a/packages/eui/src/components/tool_tip/tool_tip.stories.tsx
+++ b/packages/eui/src/components/tool_tip/tool_tip.stories.tsx
@@ -10,7 +10,8 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { enableFunctionToggleControls } from '../../../.storybook/utils';
-import { LOKI_SELECTORS } from '../../../.storybook/loki';
+import { LOKI_SELECTORS, lokiPlayDecorator } from '../../../.storybook/loki';
+import { sleep } from '../../test';
 import { EuiFlexGroup } from '../flex';
 import { EuiButton } from '../button';
 import { EuiToolTip, EuiToolTipProps } from './tool_tip';
@@ -71,4 +72,32 @@ export const Playground: Story = {
   //     });
   //   });
   // }),
+  play: lokiPlayDecorator(async () => {
+    // Reduce VRT flakiness/screenshots before tooltip is fully visible
+    await sleep(300);
+  }),
+};
+
+/**
+ * VRT only stories
+ */
+
+export const DarkMode: Story = {
+  tags: ['vrt-only'],
+  globals: { colorMode: 'dark' },
+  ...Playground,
+  args: {
+    ...Playground.args,
+    position: 'bottom',
+  },
+};
+
+export const HighContrastMode: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true, colorMode: 'dark' },
+  ...Playground,
+  args: {
+    ...Playground.args,
+    position: 'left',
+  },
 };
diff --git a/packages/eui/src/components/tool_tip/tool_tip.styles.ts b/packages/eui/src/components/tool_tip/tool_tip.styles.ts
index 3ce4e8b7eb0..28695ffd284 100644
--- a/packages/eui/src/components/tool_tip/tool_tip.styles.ts
+++ b/packages/eui/src/components/tool_tip/tool_tip.styles.ts
@@ -7,14 +7,9 @@
  */
 
 import { css, keyframes } from '@emotion/react';
-import {
-  logicalCSS,
-  logicalSizeCSS,
-  euiFontSize,
-  euiCanAnimate,
-  mathWithUnits,
-} from '../../global_styling';
+import { logicalCSS, euiFontSize, euiCanAnimate } from '../../global_styling';
 import { COLOR_MODES_STANDARD, UseEuiTheme, tint, shade } from '../../services';
+import { _popoverArrowStyles } from '../../services/popover';
 import { euiShadow } from '../../themes/amsterdam';
 
 export const euiToolTipBackgroundColor = (
@@ -58,16 +53,21 @@ const euiToolTipAnimationHorizontal = (size: string) => keyframes`
 `;
 
 export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme, colorMode, highContrastMode } = euiThemeContext;
+
+  const hasShadow = !highContrastMode;
+  const hasVisibleBorder = highContrastMode || colorMode === 'DARK';
   const animationTiming = `${euiTheme.animation.slow} ease-out 0s forwards`;
-  // Shift arrow 1px more than half its size to account for border radius
+
   const arrowSize = euiTheme.size.m;
-  const arrowPlusSize = mathWithUnits(arrowSize, (x) => (x / 2 + 1) * -1);
-  const arrowMinusSize = mathWithUnits(arrowSize, (x) => (x / 2 - 1) * -1);
+  const arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
+
   return {
     // Base
     euiToolTip: css`
-      ${euiShadow(euiThemeContext)}
+      ${hasShadow ? euiShadow(euiThemeContext) : ''}
+      border: ${euiTheme.border.width.thin} solid
+        ${hasVisibleBorder ? euiTheme.border.color : 'transparent'};
       border-radius: ${euiTheme.border.radius.medium};
       background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)};
       color: ${euiTheme.colors.ghost};
@@ -114,30 +114,11 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     // Arrow
     euiToolTip__arrow: css`
-      content: '';
-      position: absolute;
-      transform-origin: center;
-      border-radius: ${mathWithUnits(
-        euiTheme.border.radius.small,
-        (x) => x / 2
-      )};
-      background-color: ${euiToolTipBackgroundColor(euiTheme, colorMode)};
-      ${logicalSizeCSS(arrowSize, arrowSize)}
+      ${arrowStyles._arrowStyles}
+      background-color: inherit;
+      border: inherit;
     `,
-    arrowPositions: {
-      top: css`
-        transform: translateY(${arrowPlusSize}) rotateZ(45deg);
-      `,
-      bottom: css`
-        transform: translateY(${arrowMinusSize}) rotateZ(45deg);
-      `,
-      left: css`
-        transform: translateX(${arrowPlusSize}) rotateZ(45deg);
-      `,
-      right: css`
-        transform: translateX(${arrowMinusSize}) rotateZ(45deg);
-      `,
-    },
+    arrowPositions: arrowStyles.positions,
     // Title
     euiToolTip__title: css`
       font-weight: ${euiTheme.font.weight.bold};
diff --git a/packages/eui/src/components/tool_tip/tool_tip.tsx b/packages/eui/src/components/tool_tip/tool_tip.tsx
index 1a22696a4eb..2990d5a802a 100644
--- a/packages/eui/src/components/tool_tip/tool_tip.tsx
+++ b/packages/eui/src/components/tool_tip/tool_tip.tsx
@@ -17,6 +17,7 @@ import classNames from 'classnames';
 
 import { CommonProps } from '../common';
 import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
+import { type EuiPopoverPosition } from '../../services/popover';
 import { enqueueStateChange } from '../../services/react';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
@@ -117,7 +118,7 @@ interface State {
   hasFocus: boolean;
   calculatedPosition: ToolTipPositions;
   toolTipStyles: ToolTipStyles;
-  arrowStyles: undefined | { left: number; top: number };
+  arrowStyles?: Record<EuiPopoverPosition, number | string>;
   id: string;
 }
 
diff --git a/packages/eui/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/packages/eui/src/components/tour/__snapshots__/tour_step.test.tsx.snap
index 0aa353e4849..73848e8ae1b 100644
--- a/packages/eui/src/components/tour/__snapshots__/tour_step.test.tsx.snap
+++ b/packages/eui/src/components/tour/__snapshots__/tour_step.test.tsx.snap
@@ -27,13 +27,16 @@ exports[`EuiTourStep renders 1`] = `
           data-popover-open="true"
           data-popover-panel="true"
           role="dialog"
-          style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
+          style="top: -18px; left: -26px; will-change: transform, opacity; z-index: 2000;"
         >
           <div
-            class="euiPopover__arrow emotion-euiPopoverArrow-left"
-            data-popover-arrow="left"
-            style="left: 0px; top: 10px;"
+            class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper"
+            style="top: 9px; left: 100%;"
           >
+            <div
+              class="euiPopover__arrow emotion-euiPopoverArrow-left"
+              data-popover-arrow="left"
+            />
             <div
               class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
               style="block-size: 12px; inline-size: 12px;"
diff --git a/packages/eui/src/components/tour/tour.styles.ts b/packages/eui/src/components/tour/tour.styles.ts
index b6d694e4631..f3b3e7495e7 100644
--- a/packages/eui/src/components/tour/tour.styles.ts
+++ b/packages/eui/src/components/tour/tour.styles.ts
@@ -10,23 +10,21 @@ import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../global_styling';
 import { openAnimationTiming } from '../popover/popover_panel/_popover_panel.styles';
-import { popoverArrowSize } from '../popover/popover_arrow/_popover_arrow.styles';
 
 import { _tourFooterBgColor } from './_tour_footer.styles';
 
 export const euiTourStyles = (euiThemeContext: UseEuiTheme) => ({
   // Targets EuiPopoverPanel
   euiTour: css`
-    [data-popover-arrow='top']::before {
-      ${logicalCSS('border-top-color', _tourFooterBgColor(euiThemeContext))}
+    [data-popover-arrow='top'] {
+      background-color: ${_tourFooterBgColor(euiThemeContext)};
     }
   `,
 });
 
 export const euiTourBeaconStyles = ({ euiTheme }: UseEuiTheme) => {
-  const arrowSize = euiTheme.size[popoverArrowSize];
-  const arrowHalfSize = mathWithUnits(arrowSize, (x) => x / 2);
-  const arrowOffset = mathWithUnits(arrowSize, (x) => x * -2);
+  const beaconSize = euiTheme.size.m;
+  const beaconOffset = mathWithUnits(beaconSize, (x) => x / -2);
 
   return {
     // Base
@@ -45,20 +43,24 @@ export const euiTourBeaconStyles = ({ euiTheme }: UseEuiTheme) => {
     `,
     // Positions
     right: css`
-      ${logicalCSS('top', arrowHalfSize)}
-      ${logicalCSS('left', arrowOffset)}
+      ${logicalCSS('top', '50%')}
+      ${logicalCSS('left', '-50%')}
+      ${logicalCSS('margin-top', beaconOffset)}
     `,
     left: css`
-      ${logicalCSS('top', arrowHalfSize)}
-      ${logicalCSS('left', arrowSize)}
+      ${logicalCSS('top', '50%')}
+      ${logicalCSS('right', '-50%')}
+      ${logicalCSS('margin-top', beaconOffset)}
     `,
     top: css`
-      ${logicalCSS('top', arrowSize)}
-      ${logicalCSS('left', arrowHalfSize)}
+      ${logicalCSS('left', '50%')}
+      ${logicalCSS('bottom', '-50%')}
+      ${logicalCSS('margin-left', beaconOffset)}
     `,
     bottom: css`
-      ${logicalCSS('top', arrowOffset)}
-      ${logicalCSS('left', arrowHalfSize)}
+      ${logicalCSS('left', '50%')}
+      ${logicalCSS('top', '-50%')}
+      ${logicalCSS('margin-left', beaconOffset)}
     `,
   };
 };
diff --git a/packages/eui/src/global_styling/functions/high_contrast.test.ts b/packages/eui/src/global_styling/functions/high_contrast.test.ts
new file mode 100644
index 00000000000..046e152582e
--- /dev/null
+++ b/packages/eui/src/global_styling/functions/high_contrast.test.ts
@@ -0,0 +1,165 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { UseEuiTheme } from '../../services';
+import { highContrastModeStyles, preventForcedColors } from './high_contrast';
+
+const mockForcedHighContrastMode = {
+  highContrastMode: 'forced',
+} as UseEuiTheme;
+
+const mockPreferredHighContrastMode = {
+  highContrastMode: 'preferred',
+} as UseEuiTheme;
+
+const mockRegularContrastMode = {
+  highContrastMode: false,
+} as UseEuiTheme;
+
+describe('highContrastModeStyles', () => {
+  describe('no high contrast', () => {
+    it('returns the passed `none` styles', () => {
+      expect(
+        highContrastModeStyles(mockRegularContrastMode, {
+          none: 'color: red;',
+        })
+      ).toEqual('color: red;');
+      expect(
+        highContrastModeStyles(mockRegularContrastMode, {
+          none: 'color: red;',
+          preferred: 'color: black;',
+        })
+      ).toEqual('color: red;');
+      expect(
+        highContrastModeStyles(mockRegularContrastMode, {
+          none: 'color: red;',
+          forced: 'forced-color-adjust: none;',
+        })
+      ).toEqual('color: red;');
+      expect(
+        highContrastModeStyles(mockRegularContrastMode, {
+          none: 'color: red;',
+          preferred: 'color: black;',
+          forced: 'forced-color-adjust: none;',
+        })
+      ).toEqual('color: red;');
+    });
+
+    it('returns nothing if no `none` styles were passed', () => {
+      expect(
+        highContrastModeStyles(mockRegularContrastMode, {
+          preferred: 'color: black;',
+        })
+      ).toEqual('');
+      expect(
+        highContrastModeStyles(mockRegularContrastMode, {
+          forced: 'forced-color-adjust: none;',
+        })
+      ).toEqual('');
+      expect(
+        highContrastModeStyles(mockRegularContrastMode, {
+          preferred: 'color: black;',
+          forced: 'forced-color-adjust: none;',
+        })
+      ).toEqual('');
+    });
+  });
+
+  describe('preferred high contrast', () => {
+    it('returns the passed `preferred` styles', () => {
+      expect(
+        highContrastModeStyles(mockPreferredHighContrastMode, {
+          preferred: 'color: black;',
+        })
+      ).toEqual('color: black;');
+      expect(
+        highContrastModeStyles(mockPreferredHighContrastMode, {
+          none: 'color: red;',
+          preferred: 'color: black;',
+        })
+      ).toEqual('color: black;');
+    });
+
+    it('ignores `forced` if `preferred` was passed', () => {
+      expect(
+        highContrastModeStyles(mockPreferredHighContrastMode, {
+          none: 'color: red;',
+          preferred: 'color: black;',
+          forced: 'forced-color-adjust: none;',
+        })
+      ).toEqual('color: black;');
+    });
+
+    it('falls back to `none` if only `forced` was passed', () => {
+      expect(
+        highContrastModeStyles(mockPreferredHighContrastMode, {
+          none: 'color: red;',
+          forced: 'forced-color-adjust: none;',
+        })
+      ).toEqual('color: red;');
+    });
+
+    it('returns nothing if no contrast styles were passed', () => {
+      expect(
+        highContrastModeStyles(mockPreferredHighContrastMode, {
+          none: 'color: red;',
+        })
+      ).toEqual('');
+    });
+  });
+
+  describe('forced high contrast', () => {
+    it('returns the passed `forced` styles', () => {
+      expect(
+        highContrastModeStyles(mockForcedHighContrastMode, {
+          forced: 'color: black;',
+        })
+      ).toEqual('color: black;');
+      expect(
+        highContrastModeStyles(mockForcedHighContrastMode, {
+          none: 'color: red;',
+          forced: 'color: black;',
+        })
+      ).toEqual('color: black;');
+    });
+
+    it('also returns/concatenates `preferred` styles if passed', () => {
+      expect(
+        highContrastModeStyles(mockForcedHighContrastMode, {
+          preferred: 'background-color: white;',
+        })
+      ).toEqual('background-color: white;');
+      expect(
+        highContrastModeStyles(mockForcedHighContrastMode, {
+          preferred: 'background-color: white;',
+          forced: 'color: black;',
+        })
+      ).toEqual('background-color: white;color: black;');
+    });
+
+    it('returns nothing if no contrast styles were passed', () => {
+      expect(
+        highContrastModeStyles(mockForcedHighContrastMode, {
+          none: 'color: red;',
+        })
+      ).toEqual('');
+    });
+  });
+});
+
+describe('preventForcedColors', () => {
+  it('returns forced-color-adjust CSS when high contrast is being forced', () => {
+    expect(preventForcedColors(mockForcedHighContrastMode)).toEqual(
+      'forced-color-adjust: none;'
+    );
+  });
+
+  it('returns nothing when highContrastMode is not forced', () => {
+    expect(preventForcedColors(mockRegularContrastMode)).toEqual('');
+  });
+});
diff --git a/packages/eui/src/global_styling/functions/high_contrast.ts b/packages/eui/src/global_styling/functions/high_contrast.ts
new file mode 100644
index 00000000000..a4a2a6ca198
--- /dev/null
+++ b/packages/eui/src/global_styling/functions/high_contrast.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { UseEuiTheme } from '../../services';
+
+// NOTE: These functions are not being published as top-level EUI exports
+// until high contrast mode is out of beta.
+
+/**
+ * Minor syntactical sugar for conditional high contrast styles.
+ * Ternaries are otherwise somewhat ugly in css`` template literals,
+ * and this makes life just a little more beautiful ✨
+ */
+export const highContrastModeStyles = (
+  euiThemeContext: UseEuiTheme,
+  options: {
+    /** Default styles to render (no high contrast mode) */
+    none?: string;
+    /** Styles to render when high contrast mode is preferred or forced */
+    preferred?: string;
+    /** Styles to render when high contrast mode is being forced */
+    forced?: string;
+  }
+) => {
+  const { highContrastMode } = euiThemeContext;
+  const {
+    none: defaultStyles = '',
+    preferred: highContrastStyles = '',
+    forced: forcedColorsStyles = '',
+  } = options;
+
+  if (highContrastMode) {
+    if (highContrastMode === 'forced') {
+      // Assume preferred high contrast styles should also apply to forced contrast styles
+      return highContrastStyles.trim() + forcedColorsStyles.trim();
+    }
+
+    if (!highContrastStyles && forcedColorsStyles && defaultStyles) {
+      // If only forced styles were passed, assume we can use default styles for preferred high contrast
+      return defaultStyles.trim();
+    }
+
+    return highContrastStyles.trim();
+  }
+  return defaultStyles.trim();
+};
+
+/**
+ * Small uitility that allows component styles to ignore/override
+ * forced colors modes (primarily Windows high contrast themes)
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust
+ *
+ * WARNING: Do *not* use this utility unless:
+ * 1. Colors/backgrounds are **essential** to the semantic meaning of the UI,
+ *    and users will lose all meaning without them
+ * 2. Tweaks have been made to existing styles to increase color contrast
+ *    as necessary
+ */
+export const preventForcedColors = ({ highContrastMode }: UseEuiTheme) =>
+  highContrastMode === 'forced' ? 'forced-color-adjust: none;' : '';
diff --git a/packages/eui/src/global_styling/mixins/_color.ts b/packages/eui/src/global_styling/mixins/_color.ts
index 74087f584ff..d36fd84eafa 100644
--- a/packages/eui/src/global_styling/mixins/_color.ts
+++ b/packages/eui/src/global_styling/mixins/_color.ts
@@ -131,7 +131,7 @@ export const useEuiBackgroundColorCSS = () =>
  */
 
 export const euiBorderColor = (
-  { euiTheme, colorMode }: UseEuiTheme,
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
   color: _EuiBackgroundColor
 ) => {
   switch (color) {
@@ -140,9 +140,13 @@ export const euiBorderColor = (
     case 'subdued':
       return euiTheme.border.color;
     case 'warning':
-      return tintOrShade(euiTheme.colors.warning, 0.4, colorMode);
+      return highContrastMode
+        ? euiTheme.colors.warningText
+        : tintOrShade(euiTheme.colors.warning, 0.4, colorMode);
     default:
-      return tintOrShade(euiTheme.colors[color], 0.6, colorMode);
+      return highContrastMode
+        ? euiTheme.colors[`${color}Text`]
+        : tintOrShade(euiTheme.colors[color], 0.6, colorMode);
   }
 };
 
diff --git a/packages/eui/src/global_styling/variables/borders.ts b/packages/eui/src/global_styling/variables/borders.ts
index 10eda82eb9b..18ebe51ac78 100644
--- a/packages/eui/src/global_styling/variables/borders.ts
+++ b/packages/eui/src/global_styling/variables/borders.ts
@@ -37,7 +37,8 @@ export interface _EuiThemeBorderRadiusValues {
 
 export interface _EuiThemeBorderColorValues {
   /**
-   * Color for all borders; Default is `colors.lightShade`
+   * Color for all borders; Default is `colors.lightShade`.
+   * In high contrast mode, this value becomes `colors.fullShade` and cannot be overridden.
    */
   color: ColorModeSwitch;
 }
diff --git a/packages/eui/src/global_styling/variables/shadow.ts b/packages/eui/src/global_styling/variables/shadow.ts
index 7761fbdb9a0..31bcedee7e7 100644
--- a/packages/eui/src/global_styling/variables/shadow.ts
+++ b/packages/eui/src/global_styling/variables/shadow.ts
@@ -21,8 +21,3 @@ export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> =
     l: 'Primary shadow used in most cases to add visible depth.',
     xl: 'Very large shadows used for large portalled style containers like modals and flyouts.',
   };
-
-export interface _EuiThemeShadowCustomColor {
-  color?: string;
-  property?: 'box-shadow' | 'filter';
-}
diff --git a/packages/eui/src/services/popover/index.ts b/packages/eui/src/services/popover/index.ts
index b89b73f6184..9553f62ccf4 100644
--- a/packages/eui/src/services/popover/index.ts
+++ b/packages/eui/src/services/popover/index.ts
@@ -8,4 +8,7 @@
 
 export { calculatePopoverPosition } from './calculate_popover_position';
 export { findPopoverPosition, getElementZIndex } from './popover_positioning';
+
+// Not exported as public APIs
+export { _popoverArrowStyles } from './popover_arrow.styles';
 export type { EuiPopoverPosition } from './types';
diff --git a/packages/eui/src/services/popover/popover_arrow.styles.ts b/packages/eui/src/services/popover/popover_arrow.styles.ts
new file mode 100644
index 00000000000..860f88e1e05
--- /dev/null
+++ b/packages/eui/src/services/popover/popover_arrow.styles.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import {
+  logicalCSS,
+  logicalSizeCSS,
+  mathWithUnits,
+} from '../../global_styling/functions';
+import { UseEuiTheme } from '../../services';
+
+/**
+ * Arrow clipping/transform/positioning CSS shared between EuiPopover and EuiToolTip
+ */
+export const _popoverArrowStyles = (
+  { euiTheme }: UseEuiTheme,
+  arrowSize: string
+) => {
+  const arrowOffset = mathWithUnits(arrowSize, (x) => x / -2);
+
+  const arrowBorderRadius = mathWithUnits(
+    euiTheme.border.radius.small,
+    (x) => x / 2
+  );
+
+  return {
+    _arrowStyles: `
+      position: absolute;
+      ${logicalSizeCSS(arrowSize)}
+      border-radius: ${arrowBorderRadius};
+      /* Use clip-path to ensure that arrows don't overlap into popover content */
+      clip-path: polygon(0 0, 100% 100%, 0 100%);
+      transform-origin: center;
+    `,
+
+    positions: {
+      top: css`
+        ${logicalCSS('margin-top', arrowOffset)}
+        transform: rotate(-45deg);
+      `,
+
+      bottom: css`
+        ${logicalCSS('bottom', 0)}
+        ${logicalCSS('margin-bottom', arrowOffset)}
+        transform: rotate(135deg);
+      `,
+
+      left: css`
+        ${logicalCSS('margin-left', arrowOffset)}
+        transform: rotate(-135deg);
+      `,
+
+      right: css`
+        ${logicalCSS('right', 0)}
+        ${logicalCSS('margin-right', arrowOffset)}
+        transform: rotate(45deg);
+      `,
+    },
+  };
+};
diff --git a/packages/eui/src/services/popover/popover_positioning.test.ts b/packages/eui/src/services/popover/popover_positioning.test.ts
index bae2c9d40ec..c31abd94f25 100644
--- a/packages/eui/src/services/popover/popover_positioning.test.ts
+++ b/packages/eui/src/services/popover/popover_positioning.test.ts
@@ -337,8 +337,8 @@ describe('popover_positioning', () => {
           top: 40,
           left: 25,
           arrow: {
-            top: 50,
-            left: 22.5,
+            top: '100%',
+            left: 21.5,
           },
         });
       });
@@ -359,8 +359,8 @@ describe('popover_positioning', () => {
           top: -15,
           left: 37.5,
           arrow: {
-            top: 50,
-            left: 10,
+            top: '100%',
+            left: 9,
           },
         });
       });
@@ -382,8 +382,8 @@ describe('popover_positioning', () => {
           top: -15,
           left: 37.5,
           arrow: {
-            top: 50,
-            left: 10,
+            top: '100%',
+            left: 9,
           },
         });
       });
@@ -406,8 +406,8 @@ describe('popover_positioning', () => {
           top: 50,
           left: 75,
           arrow: {
-            top: 50,
-            left: 22,
+            top: '100%',
+            left: 21,
           },
         });
 
@@ -426,8 +426,8 @@ describe('popover_positioning', () => {
           top: 110,
           left: 25,
           arrow: {
-            top: 0,
-            left: 72,
+            bottom: '100%',
+            left: 71,
           },
         });
       });
@@ -448,8 +448,8 @@ describe('popover_positioning', () => {
           top: -82,
           left: 125,
           arrow: {
-            top: 184,
-            left: 0,
+            top: 183,
+            right: '100%',
           },
         });
       });
diff --git a/packages/eui/src/services/popover/popover_positioning.ts b/packages/eui/src/services/popover/popover_positioning.ts
index 8cc1a131600..933b5478140 100644
--- a/packages/eui/src/services/popover/popover_positioning.ts
+++ b/packages/eui/src/services/popover/popover_positioning.ts
@@ -83,7 +83,7 @@ interface FindPopoverPositionResult {
   left: number;
   position: EuiPopoverPosition;
   fit: number;
-  arrow?: { left: number; top: number };
+  arrow?: Record<EuiPopoverPosition, number | string>;
   anchorBoundingBox?: EuiClientRect;
 }
 
@@ -265,7 +265,7 @@ interface GetPopoverScreenCoordinatesResult {
   top: number;
   left: number;
   fit: number;
-  arrow: { top: number; left: number } | undefined;
+  arrow?: Record<EuiPopoverPosition, number | string>;
 }
 
 /**
@@ -360,14 +360,12 @@ export function getPopoverScreenCoordinates({
   const primaryAxisPositionName =
     dimensionPositionAttribute[primaryAxisDimension]; // "height" -> "top"
 
-  const { primaryAxisPosition, primaryAxisArrowPosition } =
-    getPrimaryAxisPosition({
-      position,
-      offset,
-      popoverBoundingBox,
-      anchorBoundingBox,
-      arrowConfig,
-    });
+  const { primaryAxisPosition } = getPrimaryAxisPosition({
+    position,
+    offset,
+    popoverBoundingBox,
+    anchorBoundingBox,
+  });
 
   const popoverPlacement = {
     [crossAxisFirstSide]: crossAxisPosition,
@@ -401,18 +399,18 @@ export function getPopoverScreenCoordinates({
   );
 
   const arrow = arrowConfig
-    ? {
+    ? ({
         [crossAxisFirstSide]:
-          crossAxisArrowPosition! - popoverPlacement[crossAxisFirstSide],
-        [primaryAxisPositionName]: primaryAxisArrowPosition,
-      }
+          crossAxisArrowPosition! - popoverPlacement[crossAxisFirstSide] - 1, // Account for 1px border thin width
+        [position]: '100%',
+      } as Record<EuiPopoverPosition, number | string>)
     : undefined;
 
   return {
     fit,
     top: popoverPlacement.top,
     left: popoverPlacement.left,
-    arrow: arrow ? { left: arrow.left!, top: arrow.top! } : undefined,
+    arrow,
   };
 }
 
@@ -560,7 +558,6 @@ interface GetPrimaryAxisPositionArgs {
   offset: number;
   popoverBoundingBox: BoundingBox;
   anchorBoundingBox: BoundingBox;
-  arrowConfig?: { arrowWidth: number; arrowBuffer: number };
 }
 
 function getPrimaryAxisPosition({
@@ -568,7 +565,6 @@ function getPrimaryAxisPosition({
   offset,
   popoverBoundingBox,
   anchorBoundingBox,
-  arrowConfig,
 }: GetPrimaryAxisPositionArgs) {
   // if positioning to the top or left, the target position decreases
   // from the anchor's top or left, otherwise the position adds to the anchor's
@@ -591,18 +587,7 @@ function getPrimaryAxisPosition({
     (offset + primaryAxisOffset!) * (isOffsetDecreasing ? -1 : 1);
   const primaryAxisPosition = anchorEdgeOrigin + contentOffset;
 
-  let primaryAxisArrowPosition;
-
-  if (arrowConfig) {
-    primaryAxisArrowPosition = isOffsetDecreasing
-      ? popoverSizeOnPrimaryAxis
-      : 0;
-  }
-
-  return {
-    primaryAxisPosition,
-    primaryAxisArrowPosition,
-  };
+  return { primaryAxisPosition };
 }
 
 /**
diff --git a/packages/eui/src/services/theme/context.ts b/packages/eui/src/services/theme/context.ts
index d366a2ffba8..c2a10167bf5 100644
--- a/packages/eui/src/services/theme/context.ts
+++ b/packages/eui/src/services/theme/context.ts
@@ -9,6 +9,7 @@
 import { createContext } from 'react';
 import {
   EuiThemeColorModeStandard,
+  EuiThemeHighContrastMode,
   EuiThemeSystem,
   EuiThemeModifications,
   EuiThemeComputed,
@@ -17,15 +18,27 @@ import {
 import { EuiThemeAmsterdam } from '../../themes/amsterdam/theme';
 import { DEFAULT_COLOR_MODE, getComputed } from './utils';
 
-export const EuiSystemContext =
-  createContext<EuiThemeSystem>(EuiThemeAmsterdam);
-export const EuiModificationsContext = createContext<EuiThemeModifications>({});
-export const EuiColorModeContext =
-  createContext<EuiThemeColorModeStandard>(DEFAULT_COLOR_MODE);
+export const DEFAULTS = {
+  system: EuiThemeAmsterdam,
+  modifications: {},
+  colorMode: DEFAULT_COLOR_MODE,
+  highContrastMode: false as const,
+};
+
+export const EuiSystemContext = createContext<EuiThemeSystem>(DEFAULTS.system);
+export const EuiModificationsContext = createContext<EuiThemeModifications>(
+  DEFAULTS.modifications
+);
+export const EuiColorModeContext = createContext<EuiThemeColorModeStandard>(
+  DEFAULTS.colorMode
+);
+export const EuiHighContrastModeContext =
+  createContext<EuiThemeHighContrastMode>(DEFAULTS.highContrastMode);
+
 export const defaultComputedTheme = getComputed(
-  EuiThemeAmsterdam,
-  {},
-  DEFAULT_COLOR_MODE
+  DEFAULTS.system,
+  DEFAULTS.modifications,
+  DEFAULTS.colorMode
 );
 export const EuiThemeContext =
   createContext<EuiThemeComputed>(defaultComputedTheme);
diff --git a/packages/eui/src/services/theme/high_contrast_overrides.test.tsx b/packages/eui/src/services/theme/high_contrast_overrides.test.tsx
new file mode 100644
index 00000000000..dad334e3739
--- /dev/null
+++ b/packages/eui/src/services/theme/high_contrast_overrides.test.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render } from '../../test/rtl';
+
+import { EuiThemeProvider } from './provider';
+
+describe('high contrast mode modification overrides', () => {
+  it('overrides the theme border color', () => {
+    const { getByText } = render(
+      <EuiThemeProvider highContrastMode={true}>
+        <div css={({ euiTheme }) => ({ border: euiTheme.border.thin })}>
+          High contrast light mode
+          <EuiThemeProvider colorMode="dark">
+            <div css={({ euiTheme }) => ({ border: euiTheme.border.thin })}>
+              High contrast dark mode
+            </div>
+          </EuiThemeProvider>
+          <EuiThemeProvider highContrastMode={false}>
+            <div css={({ euiTheme }) => ({ border: euiTheme.border.thin })}>
+              Not high contrast mode
+            </div>
+          </EuiThemeProvider>
+        </div>
+      </EuiThemeProvider>
+    );
+
+    expect(getByText('High contrast light mode')).toHaveStyleRule(
+      'border',
+      '1px solid #000'
+    );
+    expect(getByText('High contrast dark mode')).toHaveStyleRule(
+      'border',
+      '1px solid #FFF'
+    );
+    expect(getByText('Not high contrast mode')).toHaveStyleRule(
+      'border',
+      '1px solid #D3DAE6'
+    );
+  });
+
+  it('overrides consumer border color modifications', () => {
+    const modify = {
+      colors: {
+        LIGHT: { border: '#aaa' },
+        DARK: { border: '#333' },
+      },
+    };
+    const { getByText } = render(
+      <EuiThemeProvider modify={modify} highContrastMode={true}>
+        <div css={({ euiTheme }) => ({ borderColor: euiTheme.border.color })}>
+          High contrast mode
+        </div>
+      </EuiThemeProvider>
+    );
+
+    expect(getByText('High contrast mode')).toHaveStyleRule(
+      'border-color',
+      '#000'
+    );
+  });
+
+  it('preserves modified border widths', () => {
+    const { getByText } = render(
+      <EuiThemeProvider
+        highContrastMode={true}
+        modify={{ border: { width: { thin: '5px', thick: '10px' } } }}
+      >
+        <div css={({ euiTheme }) => ({ border: euiTheme.border.thin })}>
+          Thin border
+        </div>
+        <div css={({ euiTheme }) => ({ border: euiTheme.border.thick })}>
+          Thick border
+        </div>
+      </EuiThemeProvider>
+    );
+
+    expect(getByText('Thin border')).toHaveStyleRule(
+      'border',
+      '5px solid #000'
+    );
+    expect(getByText('Thick border')).toHaveStyleRule(
+      'border',
+      '10px solid #000'
+    );
+  });
+});
diff --git a/packages/eui/src/services/theme/high_contrast_overrides.ts b/packages/eui/src/services/theme/high_contrast_overrides.ts
new file mode 100644
index 00000000000..01e30f6205c
--- /dev/null
+++ b/packages/eui/src/services/theme/high_contrast_overrides.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useMemo } from 'react';
+
+import type {
+  EuiThemeHighContrastMode,
+  EuiThemeColorModeStandard,
+  EuiThemeSystem,
+  EuiThemeModifications,
+} from './types';
+
+// Rather than being calculated when the theme's styles are being computed, we're bogarting the
+// `modify` logic so we can ensure consumer modifications to border-color are also overriden.
+// If in the future we need more complex high contrast mode logic (e.g. changing color tokens)
+// we'll need to actually dive into theme/utils.ts's Computed.getValue logic at that point.
+export const useHighContrastModifications = ({
+  highContrastMode,
+  colorMode,
+  system,
+  modifications,
+}: {
+  highContrastMode: EuiThemeHighContrastMode;
+  colorMode: EuiThemeColorModeStandard;
+  system: EuiThemeSystem;
+  modifications: EuiThemeModifications;
+}) => {
+  const highContrastModifications = useMemo(() => {
+    const borderColor = system.root.colors[colorMode].fullShade;
+    const getBorderWidth = (width: 'thin' | 'thick') =>
+      modifications?.border?.width?.[width] || system.root.border.width[width];
+
+    return {
+      border: {
+        color: borderColor,
+        thin: `${getBorderWidth('thin')} solid ${borderColor}`,
+        thick: `${getBorderWidth('thick')} solid ${borderColor}`,
+      },
+    };
+  }, [system, colorMode, modifications?.border?.width]);
+
+  // Memoizing the object(s) returned is important for performance/referential equality
+  return useMemo(() => {
+    return highContrastMode
+      ? { ...modifications, ...highContrastModifications }
+      : modifications;
+  }, [highContrastMode, modifications, highContrastModifications]);
+};
diff --git a/packages/eui/src/services/theme/hooks.test.tsx b/packages/eui/src/services/theme/hooks.test.tsx
index d2cb442fe06..f483565ab7e 100644
--- a/packages/eui/src/services/theme/hooks.test.tsx
+++ b/packages/eui/src/services/theme/hooks.test.tsx
@@ -27,6 +27,7 @@ describe('useEuiTheme', () => {
     expect(result.current).toEqual({
       euiTheme: expect.any(Object),
       colorMode: 'LIGHT',
+      highContrastMode: false,
       modifications: {},
     });
   });
@@ -68,7 +69,7 @@ describe('withEuiTheme', () => {
   it('provides underlying class components with a `theme` prop', () => {
     const { container } = render(<Component />);
     expect(container.firstChild!.textContent).toEqual(
-      'euiTheme,colorMode,modifications'
+      'euiTheme,colorMode,highContrastMode,modifications'
     );
   });
 });
@@ -81,7 +82,7 @@ describe('RenderWithEuiTheme', () => {
       </RenderWithEuiTheme>
     );
     expect(container.firstChild!.textContent).toEqual(
-      'euiTheme,colorMode,modifications'
+      'euiTheme,colorMode,highContrastMode,modifications'
     );
   });
 });
diff --git a/packages/eui/src/services/theme/hooks.tsx b/packages/eui/src/services/theme/hooks.tsx
index bf87146612e..a4e71035ea6 100644
--- a/packages/eui/src/services/theme/hooks.tsx
+++ b/packages/eui/src/services/theme/hooks.tsx
@@ -12,12 +12,14 @@ import {
   EuiThemeContext,
   EuiModificationsContext,
   EuiColorModeContext,
+  EuiHighContrastModeContext,
   defaultComputedTheme,
   EuiNestedThemeContext,
 } from './context';
 import { emitEuiProviderWarning } from './warning';
 import {
   EuiThemeColorModeStandard,
+  EuiThemeHighContrastMode,
   EuiThemeModifications,
   EuiThemeComputed,
 } from './types';
@@ -31,12 +33,14 @@ Wrap your component in \`EuiProvider\`: https://ela.st/euiprovider.`;
 export interface UseEuiTheme<T extends {} = {}> {
   euiTheme: EuiThemeComputed<T>;
   colorMode: EuiThemeColorModeStandard;
+  highContrastMode: EuiThemeHighContrastMode;
   modifications: EuiThemeModifications<T>;
 }
 
 export const useEuiTheme = <T extends {} = {}>(): UseEuiTheme<T> => {
   const theme = useContext(EuiThemeContext);
   const colorMode = useContext(EuiColorModeContext);
+  const highContrastMode = useContext(EuiHighContrastModeContext);
   const modifications = useContext(EuiModificationsContext);
 
   const isFallback = theme === defaultComputedTheme;
@@ -48,9 +52,10 @@ export const useEuiTheme = <T extends {} = {}>(): UseEuiTheme<T> => {
     () => ({
       euiTheme: theme as EuiThemeComputed<T>,
       colorMode,
+      highContrastMode,
       modifications: modifications as EuiThemeModifications<T>,
     }),
-    [theme, colorMode, modifications]
+    [theme, colorMode, highContrastMode, modifications]
   );
 
   return assembledTheme;
diff --git a/packages/eui/src/services/theme/index.ts b/packages/eui/src/services/theme/index.ts
index bed57027402..841947db4c8 100644
--- a/packages/eui/src/services/theme/index.ts
+++ b/packages/eui/src/services/theme/index.ts
@@ -12,6 +12,7 @@ export {
   EuiNestedThemeContext,
   EuiModificationsContext,
   EuiColorModeContext,
+  EuiHighContrastModeContext,
 } from './context';
 export type { UseEuiTheme, WithEuiThemeProps } from './hooks';
 export {
@@ -44,6 +45,8 @@ export type {
   ComputedThemeShape,
   EuiThemeColorMode,
   EuiThemeColorModeStandard,
+  EuiThemeHighContrastMode,
+  EuiThemeHighContrastModeProp,
   EuiThemeComputed,
   EuiThemeModifications,
   EuiThemeShape,
diff --git a/packages/eui/src/services/theme/provider.stories.tsx b/packages/eui/src/services/theme/provider.stories.tsx
index 7ce87e1b4d8..de54247f3d3 100644
--- a/packages/eui/src/services/theme/provider.stories.tsx
+++ b/packages/eui/src/services/theme/provider.stories.tsx
@@ -9,6 +9,8 @@
 import React, { FunctionComponent, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { EuiPanel } from '../../components/panel';
+
 import { useEuiThemeCSSVariables } from './hooks';
 import { EuiThemeProvider, EuiThemeProviderProps } from './provider';
 
@@ -21,6 +23,9 @@ export default meta;
 type Story = StoryObj<EuiThemeProviderProps<{}>>;
 
 export const WrapperCloneElement: Story = {
+  parameters: {
+    loki: { skip: true },
+  },
   args: {
     wrapperProps: {
       cloneElement: true,
@@ -101,3 +106,23 @@ const MockComponent: FunctionComponent<{
     </p>
   );
 };
+
+/**
+ * VRT only stories
+ */
+
+export const DarkMode: Story = {
+  tags: ['vrt-only'],
+  args: {
+    colorMode: 'dark',
+    children: <EuiPanel>Dark mode</EuiPanel>,
+  },
+};
+
+export const HighContrastMode: Story = {
+  tags: ['vrt-only'],
+  args: {
+    highContrastMode: true,
+    children: <EuiPanel>High contrast mode</EuiPanel>,
+  },
+};
diff --git a/packages/eui/src/services/theme/provider.test.tsx b/packages/eui/src/services/theme/provider.test.tsx
index 539016bca0a..7200f8b8f11 100644
--- a/packages/eui/src/services/theme/provider.test.tsx
+++ b/packages/eui/src/services/theme/provider.test.tsx
@@ -11,8 +11,17 @@ import { render } from '@testing-library/react'; // Note - don't use the EUI cus
 import { css } from '@emotion/react';
 
 import { EuiProvider } from '../../components/provider';
+import {
+  EuiSystemDefaultsProvider,
+  useWindowMediaMatcher,
+} from '../../components/provider/system_defaults';
+jest.mock('../../components/provider/system_defaults/match_media_hook', () => ({
+  useWindowMediaMatcher: jest.fn(),
+}));
 import { useCurrentEuiBreakpoint } from '../breakpoint';
 import { EuiNestedThemeContext } from './context';
+import { useEuiTheme } from './hooks';
+
 import { EuiThemeProvider } from './provider';
 
 describe('EuiThemeProvider', () => {
@@ -58,6 +67,94 @@ describe('EuiThemeProvider', () => {
         '#000'
       );
     });
+
+    it('detects if color mode is forced from the system and overrides any props', () => {
+      (useWindowMediaMatcher as jest.Mock).mockImplementation((media) => {
+        if (media === '(prefers-color-scheme: dark)') return true;
+        if (media === '(forced-colors: active)') return true;
+      });
+
+      const { getByText } = render(
+        <EuiSystemDefaultsProvider>
+          <EuiThemeProvider colorMode="light">
+            <div css={({ euiTheme }) => ({ color: euiTheme.colors.fullShade })}>
+              Forced dark mode
+            </div>
+          </EuiThemeProvider>
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(getByText('Forced dark mode')).toHaveStyleRule('color', '#FFF');
+    });
+  });
+
+  describe('highContrastMode', () => {
+    const Output = () => {
+      const { highContrastMode } = useEuiTheme();
+      return <>{String(highContrastMode)}</>;
+    };
+
+    afterEach(() => {
+      (useWindowMediaMatcher as jest.Mock).mockReset();
+    });
+
+    it('always sets the contrast mode to forced if inherited from the system, overriding any application prop', () => {
+      (useWindowMediaMatcher as jest.Mock).mockImplementation((media) => {
+        if (media === '(forced-colors: active)') return true;
+      });
+
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <EuiThemeProvider highContrastMode={false}>
+            <Output />
+          </EuiThemeProvider>
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('forced');
+    });
+
+    it("converts true to 'preferred'", () => {
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <EuiThemeProvider highContrastMode={true}>
+            <Output />
+          </EuiThemeProvider>
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('preferred');
+    });
+
+    it('leaves false as `false`', () => {
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <EuiThemeProvider highContrastMode={false}>
+            <Output />
+          </EuiThemeProvider>
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('false');
+    });
+
+    it('falls back to the system/parent contrast mode if not specified', () => {
+      (useWindowMediaMatcher as jest.Mock).mockImplementation((media) => {
+        if (media === '(prefers-contrast: more)') return true;
+      });
+
+      const { container } = render(
+        <EuiSystemDefaultsProvider>
+          <EuiThemeProvider>
+            <Output />
+          </EuiThemeProvider>
+        </EuiSystemDefaultsProvider>
+      );
+
+      expect(container.textContent).toEqual('preferred');
+    });
+
+    // see high_contrast_overrides.test.tsx for tests that output styles are correctly overridden
   });
 
   describe('modify', () => {
diff --git a/packages/eui/src/services/theme/provider.tsx b/packages/eui/src/services/theme/provider.tsx
index c5a6957e8c3..25a182d32e9 100644
--- a/packages/eui/src/services/theme/provider.tsx
+++ b/packages/eui/src/services/theme/provider.tsx
@@ -31,13 +31,18 @@ import {
   EuiNestedThemeContext,
   EuiModificationsContext,
   EuiColorModeContext,
+  EuiHighContrastModeContext,
+  DEFAULTS,
 } from './context';
 import { EuiEmotionThemeProvider } from './emotion';
 import { EuiThemeMemoizedStylesProvider } from './style_memoization';
+import { useHighContrastModifications } from './high_contrast_overrides';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
 import {
   EuiThemeColorMode,
   EuiThemeColorModeStandard,
+  EuiThemeHighContrastModeProp,
+  EuiThemeHighContrastMode,
   EuiThemeSystem,
   EuiThemeModifications,
 } from './types';
@@ -45,6 +50,7 @@ import {
 export interface EuiThemeProviderProps<T> extends PropsWithChildren {
   theme?: EuiThemeSystem<T>;
   colorMode?: EuiThemeColorMode;
+  highContrastMode?: EuiThemeHighContrastModeProp;
   modify?: EuiThemeModifications<T>;
   children: any;
   /**
@@ -64,6 +70,7 @@ export interface EuiThemeProviderProps<T> extends PropsWithChildren {
 export const EuiThemeProvider = <T extends {} = {}>({
   theme: _system,
   colorMode: _colorMode,
+  highContrastMode: _highContrastMode,
   modify: _modifications,
   children,
   wrapperProps,
@@ -77,10 +84,12 @@ export const EuiThemeProvider = <T extends {} = {}>({
   const parentSystem = useContext(EuiSystemContext);
   const parentModifications = useContext(EuiModificationsContext);
   const parentColorMode = useContext(EuiColorModeContext);
+  const parentHighContrastMode = useContext(EuiHighContrastModeContext);
   const parentTheme = useContext(EuiThemeContext);
 
-  const [system, setSystem] = useState(_system || parentSystem);
-  const prevSystemKey = useRef(system.key);
+  // If the user has an OS-wide high contrast theme applied, it will ignore EUI's
+  // colors and light/dark mode. We should respect the user's system setting
+  const isForced = parentHighContrastMode === 'forced';
 
   // To reduce the number of window resize listeners, only render a
   // CurrentEuiBreakpointProvider for the top level parent theme, or for
@@ -91,20 +100,44 @@ export const EuiThemeProvider = <T extends {} = {}>({
       : Fragment;
   }, [isGlobalTheme, _modifications]);
 
+  const [system, setSystem] = useState(_system || parentSystem);
+  const prevSystemKey = useRef(system.key);
+
   const [modifications, setModifications] = useState<EuiThemeModifications>(
     mergeDeep(parentModifications, _modifications)
   );
   const prevModifications = useRef(modifications);
 
   const [colorMode, setColorMode] = useState<EuiThemeColorModeStandard>(
-    getColorMode(_colorMode, parentColorMode)
+    getColorMode(_colorMode, parentColorMode, isForced)
   );
   const prevColorMode = useRef(colorMode);
 
+  const highContrastMode: EuiThemeHighContrastMode = useMemo(() => {
+    if (isForced) return 'forced'; // System forced high contrast mode will always supercede application settings
+    if (_highContrastMode === true) return 'preferred'; // Convert the boolean prop to our internal enum
+    if (_highContrastMode === false) return false; // Allow `false` prop to override user/system preference
+    return parentHighContrastMode; // Fall back to the parent/system setting
+  }, [_highContrastMode, parentHighContrastMode, isForced]);
+  const prevHighContrastMode = useRef(highContrastMode);
+
+  const modificationsWithHighContrast = useHighContrastModifications({
+    highContrastMode,
+    colorMode,
+    system,
+    modifications,
+  });
+
   const isParentTheme = useRef(
-    prevSystemKey.current === parentSystem.key &&
-      colorMode === parentColorMode &&
-      isEqual(parentModifications, modifications)
+    isGlobalTheme
+      ? prevSystemKey.current === DEFAULTS.system.key &&
+          colorMode === DEFAULTS.colorMode &&
+          highContrastMode === DEFAULTS.highContrastMode &&
+          !_modifications
+      : prevSystemKey.current === parentSystem.key &&
+          colorMode === parentColorMode &&
+          highContrastMode === parentHighContrastMode &&
+          isEqual(parentModifications, modifications)
   );
 
   const [theme, setTheme] = useState(
@@ -112,7 +145,7 @@ export const EuiThemeProvider = <T extends {} = {}>({
       ? { ...parentTheme } // Intentionally create a new object to break referential equality
       : getComputed(
           system,
-          buildTheme(modifications, `_${system.key}`) as typeof system,
+          buildTheme<any>(modificationsWithHighContrast, `_${system.key}`),
           colorMode
         )
   );
@@ -136,25 +169,31 @@ export const EuiThemeProvider = <T extends {} = {}>({
   }, [_modifications, parentModifications]);
 
   useEffect(() => {
-    const newColorMode = getColorMode(_colorMode, parentColorMode);
+    const newColorMode = getColorMode(_colorMode, parentColorMode, isForced);
     if (!isEqual(newColorMode, prevColorMode.current)) {
       setColorMode(newColorMode);
       prevColorMode.current = newColorMode;
       isParentTheme.current = false;
     }
-  }, [_colorMode, parentColorMode]);
+  }, [_colorMode, parentColorMode, isForced]);
+
+  useEffect(() => {
+    if (prevHighContrastMode.current !== highContrastMode) {
+      isParentTheme.current = false;
+    }
+  }, [highContrastMode]);
 
   useEffect(() => {
     if (!isParentTheme.current) {
       setTheme(
         getComputed(
           system,
-          buildTheme(modifications, `_${system.key}`) as typeof system,
+          buildTheme<any>(modificationsWithHighContrast, `_${system.key}`),
           colorMode
         )
       );
     }
-  }, [colorMode, system, modifications]);
+  }, [colorMode, system, modificationsWithHighContrast]);
 
   const [themeCSSVariables, _setThemeCSSVariables] = useState<CSSObject>();
   const setThemeCSSVariables = useCallback(
@@ -237,21 +276,23 @@ export const EuiThemeProvider = <T extends {} = {}>({
         <Global styles={{ ':root': themeCSSVariables }} />
       )}
       <EuiColorModeContext.Provider value={colorMode}>
-        <EuiSystemContext.Provider value={system}>
-          <EuiModificationsContext.Provider value={modifications}>
-            <EuiThemeContext.Provider value={theme}>
-              <EuiNestedThemeContext.Provider value={nestedThemeContext}>
-                <EuiThemeMemoizedStylesProvider>
-                  <EuiEmotionThemeProvider>
-                    <EuiConditionalBreakpointProvider>
-                      {renderedChildren}
-                    </EuiConditionalBreakpointProvider>
-                  </EuiEmotionThemeProvider>
-                </EuiThemeMemoizedStylesProvider>
-              </EuiNestedThemeContext.Provider>
-            </EuiThemeContext.Provider>
-          </EuiModificationsContext.Provider>
-        </EuiSystemContext.Provider>
+        <EuiHighContrastModeContext.Provider value={highContrastMode}>
+          <EuiSystemContext.Provider value={system}>
+            <EuiModificationsContext.Provider value={modifications}>
+              <EuiThemeContext.Provider value={theme}>
+                <EuiNestedThemeContext.Provider value={nestedThemeContext}>
+                  <EuiThemeMemoizedStylesProvider>
+                    <EuiEmotionThemeProvider>
+                      <EuiConditionalBreakpointProvider>
+                        {renderedChildren}
+                      </EuiConditionalBreakpointProvider>
+                    </EuiEmotionThemeProvider>
+                  </EuiThemeMemoizedStylesProvider>
+                </EuiNestedThemeContext.Provider>
+              </EuiThemeContext.Provider>
+            </EuiModificationsContext.Provider>
+          </EuiSystemContext.Provider>
+        </EuiHighContrastModeContext.Provider>
       </EuiColorModeContext.Provider>
     </>
   );
diff --git a/packages/eui/src/services/theme/types.ts b/packages/eui/src/services/theme/types.ts
index 04b93b40f20..df6242023e7 100644
--- a/packages/eui/src/services/theme/types.ts
+++ b/packages/eui/src/services/theme/types.ts
@@ -46,6 +46,12 @@ export type StrictColorModeSwitch<T = string> = {
   [key in EuiThemeColorModeStandard]: T;
 };
 
+// Consumers can pass a boolean to manually toggle the preferred high contrast mode,
+// but our internal high contrast mode enum is slightly more granular to account for
+// Windows's high contrast themes, which force colors/backgrounds/shadows
+export type EuiThemeHighContrastModeProp = boolean;
+export type EuiThemeHighContrastMode = 'forced' | 'preferred' | false;
+
 export type EuiThemeShape = {
   colors: _EuiThemeColors;
   /** - Default value: 16 */
diff --git a/packages/eui/src/services/theme/utils.test.ts b/packages/eui/src/services/theme/utils.test.ts
index c654e4d3c22..b7a4e51ce08 100644
--- a/packages/eui/src/services/theme/utils.test.ts
+++ b/packages/eui/src/services/theme/utils.test.ts
@@ -35,6 +35,9 @@ describe('getColorMode', () => {
   it('uses `parentMode` as fallback', () => {
     expect(getColorMode(undefined, 'DARK')).toEqual('DARK');
   });
+  it('uses `parentMode` (the system OS setting) if isForced is true', () => {
+    expect(getColorMode('LIGHT', 'DARK', true)).toEqual('DARK');
+  });
   it("understands 'INVERSE'", () => {
     expect(getColorMode('INVERSE', 'DARK')).toEqual('LIGHT');
     expect(getColorMode('INVERSE', 'LIGHT')).toEqual('DARK');
diff --git a/packages/eui/src/services/theme/utils.ts b/packages/eui/src/services/theme/utils.ts
index c7c9c5216d0..196686340b0 100644
--- a/packages/eui/src/services/theme/utils.ts
+++ b/packages/eui/src/services/theme/utils.ts
@@ -44,9 +44,10 @@ export const isInverseColorMode = (
  */
 export const getColorMode = (
   colorMode?: EuiThemeColorMode,
-  parentColorMode?: EuiThemeColorModeStandard
+  parentColorMode?: EuiThemeColorModeStandard,
+  isForced?: boolean
 ): EuiThemeColorModeStandard => {
-  if (colorMode == null) {
+  if (isForced || colorMode == null) {
     return parentColorMode || DEFAULT_COLOR_MODE;
   }
   const mode = colorMode.toUpperCase() as
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/button.ts b/packages/eui/src/themes/amsterdam/global_styling/mixins/button.ts
index 3a94d5609a2..ca74b0dd3ca 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/button.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/button.ts
@@ -46,9 +46,9 @@ export const euiButtonColor = (
   color: _EuiButtonColor | 'disabled'
 ) => {
   const { euiTheme, colorMode } = euiThemeContext;
-  function tintOrShade(color: string) {
-    return colorMode === 'DARK' ? shade(color, 0.7) : tint(color, 0.8);
-  }
+
+  const tintOrShade = (color: string) =>
+    colorMode === 'DARK' ? shade(color, 0.7) : tint(color, 0.8);
 
   let foreground;
   let background;
@@ -58,6 +58,7 @@ export const euiButtonColor = (
       return {
         color: euiTheme.colors.disabledText,
         backgroundColor: transparentize(euiTheme.colors.lightShade, 0.15),
+        ..._highContrastBorder(euiThemeContext, euiTheme.colors.disabledText),
       };
     case 'text':
       foreground = euiTheme.colors[color];
@@ -75,6 +76,7 @@ export const euiButtonColor = (
   return {
     color: makeHighContrastColor(foreground)(background),
     backgroundColor: background,
+    ..._highContrastBorder(euiThemeContext, foreground),
   };
 };
 
@@ -101,9 +103,7 @@ export const euiButtonFillColor = (
 
   switch (color) {
     case 'disabled':
-      background = euiButtonColor(euiThemeContext, color).backgroundColor;
-      foreground = euiButtonColor(euiThemeContext, color).color;
-      break;
+      return euiButtonColor(euiThemeContext, color);
     case 'text':
       background =
         colorMode === 'DARK' ? euiTheme.colors.text : euiTheme.colors.darkShade;
@@ -129,6 +129,10 @@ export const euiButtonFillColor = (
   return {
     color: foreground,
     backgroundColor: background,
+    ..._highContrastBorder(
+      euiThemeContext,
+      background // The border is necessary for Windows high contrast themes, which ignore background-color
+    ),
   };
 };
 
@@ -297,3 +301,14 @@ export const euiButtonSizeMap = ({ euiTheme }: UseEuiTheme) => ({
     fontScale: 's' as const,
   },
 });
+
+/**
+ * Internal util for high contrast button borders
+ */
+const _highContrastBorder = (
+  { highContrastMode, euiTheme }: UseEuiTheme,
+  color: string
+) =>
+  highContrastMode
+    ? { border: `${euiTheme.border.width.thin} solid ${color}` }
+    : {};
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts b/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
index 21a2360c96e..84e596c93eb 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
@@ -8,23 +8,31 @@
 
 import { useEuiTheme, UseEuiTheme } from '../../../../services/theme';
 import { getShadowColor } from '../functions';
-import {
-  _EuiThemeShadowSize,
-  _EuiThemeShadowCustomColor,
-} from '../../../../global_styling/variables/shadow';
+import { logicalCSS } from '../../../../global_styling';
+import { _EuiThemeShadowSize } from '../../../../global_styling/variables/shadow';
 
-export interface EuiShadowCustomColor {
+export interface EuiShadowOptions {
   color?: string;
+  /**
+   * Note: not supported by all shadow utilities.
+   */
+  property?: 'box-shadow' | 'filter';
+  borderAllInHighContrastMode?: boolean;
 }
 
 /**
  * euiSlightShadow
  */
 export const euiShadowXSmall = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  options?: EuiShadowOptions
 ) => {
-  const color = _color || euiTheme.colors.shadow;
+  if (highContrastMode) {
+    return _highContrastBorder(euiTheme, options);
+  }
+
+  const color = options?.color || euiTheme.colors.shadow;
+
   return `
 box-shadow:
   0 .8px .8px ${getShadowColor(color, 0.04, colorMode)},
@@ -36,10 +44,15 @@ box-shadow:
  * bottomShadowSmall
  */
 export const euiShadowSmall = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  options?: EuiShadowOptions
 ) => {
-  const color = _color || euiTheme.colors.shadow;
+  if (highContrastMode) {
+    return _highContrastBorder(euiTheme, options);
+  }
+
+  const color = options?.color || euiTheme.colors.shadow;
+
   return `
 box-shadow:
   0 .7px 1.4px ${getShadowColor(color, 0.07, colorMode)},
@@ -52,12 +65,16 @@ box-shadow:
  * bottomShadowMedium
  */
 export const euiShadowMedium = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color, property }: _EuiThemeShadowCustomColor = {}
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  options?: EuiShadowOptions
 ) => {
-  const color = _color || euiTheme.colors.shadow;
+  if (highContrastMode) {
+    return _highContrastBorder(euiTheme, options);
+  }
+
+  const color = options?.color || euiTheme.colors.shadow;
 
-  if (property === 'filter') {
+  if (options?.property === 'filter') {
     // Using only one drop-shadow filter instead of multiple is more performant & prevents Safari bugs
     return `filter: drop-shadow(0 5.7px 9px ${getShadowColor(
       color,
@@ -77,10 +94,15 @@ export const euiShadowMedium = (
  * bottomShadow
  */
 export const euiShadowLarge = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  options?: EuiShadowOptions
 ) => {
-  const color = _color || euiTheme.colors.shadow;
+  if (highContrastMode) {
+    return _highContrastBorder(euiTheme, options);
+  }
+
+  const color = options?.color || euiTheme.colors.shadow;
+
   return `
 box-shadow:
   0 1px 5px ${getShadowColor(color, 0.1, colorMode)},
@@ -93,14 +115,21 @@ box-shadow:
 /**
  * bottomShadowLarge
  */
-export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
+export interface EuiShadowXLarge extends EuiShadowOptions {
   reverse?: boolean;
 }
 export const euiShadowXLarge = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color, reverse }: EuiShadowXLarge = {}
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  options?: EuiShadowXLarge
 ) => {
-  const color = _color || euiTheme.colors.shadow;
+  if (highContrastMode) {
+    return _highContrastBorder(euiTheme, options);
+  }
+
+  const color = options?.color || euiTheme.colors.shadow;
+
+  const reverse = options?.reverse ?? false;
+
   return `
 box-shadow:
   0 ${reverse ? '-' : ''}2.7px 9px ${getShadowColor(color, 0.13, colorMode)},
@@ -113,10 +142,15 @@ box-shadow:
  * slightShadowHover
  */
 export const euiSlightShadowHover = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  options?: EuiShadowOptions
 ) => {
-  const color = _color || euiTheme.colors.shadow;
+  if (highContrastMode) {
+    return _highContrastBorder(euiTheme, options);
+  }
+
+  const color = options?.color || euiTheme.colors.shadow;
+
   return `
 box-shadow:
   0 1px 5px ${getShadowColor(color, 0.1, colorMode)},
@@ -125,11 +159,9 @@ box-shadow:
   0 23px 35px ${getShadowColor(color, 0.05, colorMode)};
 `;
 };
-export const useEuiSlightShadowHover = (
-  color?: _EuiThemeShadowCustomColor['color']
-) => {
+export const useEuiSlightShadowHover = (options?: EuiShadowOptions) => {
   const euiThemeContext = useEuiTheme();
-  return euiSlightShadowHover(euiThemeContext, { color });
+  return euiSlightShadowHover(euiThemeContext, options);
 };
 
 /**
@@ -139,10 +171,18 @@ export const useEuiSlightShadowHover = (
  * Useful for popovers that drop UP rather than DOWN.
  */
 export const euiShadowFlat = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
+  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  options?: EuiShadowOptions
 ) => {
-  const color = _color || euiTheme.colors.shadow;
+  if (highContrastMode) {
+    return _highContrastBorder(euiTheme, {
+      borderAllInHighContrastMode: true,
+      ...options,
+    });
+  }
+
+  const color = options?.color || euiTheme.colors.shadow;
+
   return `
 box-shadow:
   0 0 .8px ${getShadowColor(color, 0.06, colorMode)},
@@ -151,29 +191,31 @@ box-shadow:
   0 0 17px ${getShadowColor(color, 0.03, colorMode)};
 `;
 };
-export const useEuiShadowFlat = (
-  color?: _EuiThemeShadowCustomColor['color']
-) => {
+export const useEuiShadowFlat = (options?: EuiShadowOptions) => {
   const euiThemeContext = useEuiTheme();
-  return euiShadowFlat(euiThemeContext, { color });
+  return euiShadowFlat(euiThemeContext, options);
 };
 
 export const euiShadow = (
   euiThemeContext: UseEuiTheme,
   size: _EuiThemeShadowSize = 'l',
-  { color }: _EuiThemeShadowCustomColor = {}
+  options?: EuiShadowOptions
 ) => {
+  if (euiThemeContext.highContrastMode) {
+    return _highContrastBorder(euiThemeContext.euiTheme, options);
+  }
+
   switch (size) {
     case 'xs':
-      return euiShadowXSmall(euiThemeContext, { color });
+      return euiShadowXSmall(euiThemeContext, options);
     case 's':
-      return euiShadowSmall(euiThemeContext, { color });
+      return euiShadowSmall(euiThemeContext, options);
     case 'm':
-      return euiShadowMedium(euiThemeContext, { color });
+      return euiShadowMedium(euiThemeContext, options);
     case 'l':
-      return euiShadowLarge(euiThemeContext, { color });
+      return euiShadowLarge(euiThemeContext, options);
     case 'xl':
-      return euiShadowXLarge(euiThemeContext, { color });
+      return euiShadowXLarge(euiThemeContext, options);
 
     default:
       console.warn('Please provide a valid size option to useEuiShadow');
@@ -183,8 +225,25 @@ export const euiShadow = (
 
 export const useEuiShadow = (
   size: _EuiThemeShadowSize = 'l',
-  color?: _EuiThemeShadowCustomColor['color']
+  options?: EuiShadowOptions
 ) => {
   const euiThemeContext = useEuiTheme();
-  return euiShadow(euiThemeContext, size, { color });
+  return euiShadow(euiThemeContext, size, options);
+};
+
+/**
+ * Internal utilities for replacing shadows with high contrast borders instead.
+ * NOTE: Windows' high contrast themes ignore *all* `box-shadow` CSS,
+ * so we use `border` CSS explicitly instead of shadows
+ */
+
+const _highContrastBorder = (
+  { border }: UseEuiTheme['euiTheme'],
+  { borderAllInHighContrastMode, color = border.color }: EuiShadowOptions = {}
+) => {
+  const borderCSS = `${border.width.thin} solid ${color || border.color}`;
+
+  return borderAllInHighContrastMode
+    ? `border: ${borderCSS};`
+    : logicalCSS('border-bottom', borderCSS);
 };
diff --git a/packages/eui/src/themes/themes.ts b/packages/eui/src/themes/themes.ts
index d2f714092df..8c51afb94a4 100644
--- a/packages/eui/src/themes/themes.ts
+++ b/packages/eui/src/themes/themes.ts
@@ -17,13 +17,8 @@ export interface EUI_THEME {
 
 export const EUI_THEMES: EUI_THEME[] = [
   {
-    text: 'Light',
-    value: 'light',
-    provider: EuiThemeAmsterdam,
-  },
-  {
-    text: 'Dark',
-    value: 'dark',
+    text: 'Amsterdam',
+    value: AMSTERDAM_NAME_KEY,
     provider: EuiThemeAmsterdam,
   },
 ];
diff --git a/packages/website/docs/components/display/comment_list.mdx b/packages/website/docs/components/display/comment_list.mdx
index df09cb52f57..75a9e3463c2 100644
--- a/packages/website/docs/components/display/comment_list.mdx
+++ b/packages/website/docs/components/display/comment_list.mdx
@@ -5,7 +5,7 @@ id: display_comment_list
 
 # Comment list
 
-The **EuiCommentList** is a timeline component built on top of [**EuiTimeline**](/docs/display/timeline). It allows you to display comments or logged actions that either a user or a system has performed.
+The **EuiCommentList** is a timeline component built on top of [**EuiTimeline**](../timeline). It allows you to display comments or logged actions that either a user or a system has performed.
 
 :::note Accessibility recommendation
 Provide a descriptive `aria-label` or the ID of an external label to the `aria-labelledby` prop of the **EuiCommentList**. A `timelineAvatarAriaLabel` should be provided for every **EuiComment** with or without a `timelineAvatar` as `IconType`.
@@ -112,9 +112,7 @@ export default () => (
 
 The **EuiComment** is flexible and adapts the design according to the props passed.
 
-```mdx-code-block
-import { CommentListProps } from './comment_list_props.tsx';
-```
+import { CommentListProps, CommentListStyle } from './comment_list_props.tsx';
 
 <CommentListProps
   snippet={`<EuiCommentList aria-label="Comment example">
@@ -129,15 +127,18 @@ import { CommentListProps } from './comment_list_props.tsx';
     </EuiComment>
   </EuiCommentList>`}
 />
+<CommentListStyle>
 
-1.  `timelineAvatar`: Shows an avatar that should indicate who is the author of the comment. To customize, pass a `string` as a `EuiIcon['type']` or a a [**EuiAvatar**](/docs/display/avatar). Use in conjunction with `timelineAvatarAriaLabel` to pass an aria label to the avatar. If no avatar is provided, it will default to an avatar with a `userAvatar` icon.
+1.  `timelineAvatar`: Shows an avatar that should indicate who is the author of the comment. To customize, pass a `string` as an `EuiIcon['type']` or an [**EuiAvatar**](../avatar). Use in conjunction with `timelineAvatarAriaLabel` to pass an aria label to the avatar. If no avatar is provided, it will default to an avatar with a `userAvatar` icon.
 2.  `eventIcon`: Icon that shows before the username. Use in conjunction with `eventIconAriaLabel` to pass an aria label to the event icon.
 3.  `username`: Author of the comment.
 4.  `event`: Describes the event that took place.
 5.  `timestamp`: Time of occurrence of the event.
-6.  `actions`: Custom actions that the user can perform from the comment's header. When having multiple actions, consider grouping them in a nested menu system using a [**EuiPopover**](/docs/layout/popover) with a [**EuiContextMenu**](/docs/navigation/context-menu).
+6.  `actions`: Custom actions that the user can perform from the comment's header. When having multiple actions, consider grouping them in a nested menu system using a [**EuiPopover**](../../layout/popover) with a [**EuiContextMenu**](../../navigation/context-menu).
 7.  `children`: A user message or any custom component.
 
+</CommentListStyle>
+
 The following demo shows how you can combine different props to create different types of comments events like a regular, update, update with a danger background and a custom one.
 
 ```tsx interactive
@@ -330,8 +331,8 @@ export default () => {
 The timeline icon is a very important part of the comment:
 
 *   By default, each **EuiComment** shows an avatar with the `userAvatar` icon. A `timelineAvatarAriaLabel`should be provided when using this default option.
-*   You can customize your avatar by passing to the `timelineAvatar` any of the icon types that [**EuiIcon**](/docs/display/icons) supports. The icon will show inside a `subdued` avatar. Consider this option when showing a system update. Providing a `timelineAvatarAriaLabel` is recommended.
-*   You can further customize the timeline icon by passing to the `timelineAvatar` a [**EuiAvatar**](/docs/display/avatar).
+*   You can customize your avatar by passing to the `timelineAvatar` any of the icon types that [**EuiIcon**](../icons) supports. The icon will show inside a `subdued` avatar. Consider this option when showing a system update. Providing a `timelineAvatarAriaLabel` is recommended.
+*   You can further customize the timeline icon by passing to the `timelineAvatar` a [**EuiAvatar**](../avatar).
 
 ```tsx interactive
 import React from 'react';
@@ -391,7 +392,7 @@ export default () => (
 
 ## Comment event actions
 
-There are scenarios where you might want to allow the user to perform `actions` related to each comment. Some common `actions` include: editing, deleting, sharing and copying. To add custom `actions` to a comment, use the `actions`prop. These will be placed to the right of the metadata in the comment's header. We recommend using a [**EuiButtonIcon**](/docs/navigation/button) to trigger an action. When having multiple actions, consider grouping them in a nested menu system using a [**EuiPopover**](/docs/layout/popover) with a [**EuiContextMenu**](/docs/navigation/context-menu).
+There are scenarios where you might want to allow the user to perform `actions` related to each comment. Some common `actions` include: editing, deleting, sharing and copying. To add custom `actions` to a comment, use the `actions`prop. These will be placed to the right of the metadata in the comment's header. We recommend using a [**EuiButtonIcon**](../../navigation/button) to trigger an action. When having multiple actions, consider grouping them in a nested menu system using a [**EuiPopover**](../../layout/popover) with a [**EuiContextMenu**](../../navigation/context-menu).
 
 ```tsx interactive
 import React, { useState } from 'react';
@@ -546,7 +547,7 @@ export default () => {
 
 ## A comment system
 
-The below example uses a list of **EuiComments**, a [**EuiMarkdownEditor**](/docs/editors-syntax/markdown-editor), and a [**EuiMarkdownFormat**](/docs/editors-syntax/markdown-format) to create a simple comment system.
+The below example uses a list of **EuiComments**, a [**EuiMarkdownEditor**](../../editors-syntax/markdown-editor), and a [**EuiMarkdownFormat**](../../editors-syntax/markdown-format) to create a simple comment system.
 
 *   Each comment renders in a **EuiComment**.
 *   We use the **EuiMarkdownEditor** to post the `EuiComment.children`. This means the content uses Markdown.
diff --git a/packages/website/docs/components/display/comment_list_props.tsx b/packages/website/docs/components/display/comment_list_props.tsx
index 580719d7530..96e4e4ddf1c 100644
--- a/packages/website/docs/components/display/comment_list_props.tsx
+++ b/packages/website/docs/components/display/comment_list_props.tsx
@@ -50,11 +50,7 @@ export const CommentListProps = ({ snippet }: { snippet: ReactNode }) => {
   );
 
   return (
-    <EuiPanel
-      color="transparent"
-      paddingSize="none"
-      style={{ maxWidth: '540px' }}
-    >
+    <div style={{ maxWidth: '540px' }}>
       <EuiCommentList>
         <EuiComment username="avatar" timelineAvatarAriaLabel="Avatar">
           <div
@@ -149,6 +145,20 @@ export const CommentListProps = ({ snippet }: { snippet: ReactNode }) => {
           {snippet}
         </EuiCodeBlock>
       </EuiAccordion>
-    </EuiPanel>
+
+      <EuiSpacer />
+    </div>
   );
 };
+
+export const CommentListStyle = ({ children }) => (
+  <div
+    css={css`
+      ol {
+        list-style-type: upper-alpha;
+      }
+    `}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/website/docs/components/display/timeline.mdx b/packages/website/docs/components/display/timeline.mdx
index 59d829569f6..d262d818326 100644
--- a/packages/website/docs/components/display/timeline.mdx
+++ b/packages/website/docs/components/display/timeline.mdx
@@ -9,8 +9,8 @@ The **EuiTimeline** component standardizes the way a timeline thread is displaye
 
 This component allows you to create any type of timeline, but for more specific use cases you should consider:
 
-*   [**EuiSteps**](/docs/navigation/steps): a timeline that allows you to present instructional content that must be conducted in a particular order and might contain progress indications.
-*   [**EuiCommentList**](/docs/display/comment-list): a timeline that allows you to display comments or logging actions that either a user or a system has performed.
+*   [**EuiSteps**](../../navigation/steps): a timeline that allows you to present instructional content that must be conducted in a particular order and might contain progress indications.
+*   [**EuiCommentList**](../comment-list): a timeline that allows you to display comments or logging actions that either a user or a system has performed.
 
 :::note Accessibility requirement
 For accessibility, it is required to wrap your **EuiTimelineItem**'s with a **EuiTimeline**. It is highly recommended to provide a descriptive `aria-label`, or a text node ID of an external label to the `aria-labelledby` prop of the **EuiTimeline**.
@@ -63,7 +63,7 @@ export default () => (
 
 Each **EuiTimelineItem** has two parts: an icon on the left side and an event on the right side. To create an item you need the following props:
 
-*   `icon`: main icon that appears on the left side. Can be passed as any `IconType` string or custom node (e.g. [**EuiAvatar**](/docs/display/avatar)). It is recommended not to use an element larger than 40x40.
+*   `icon`: main icon that appears on the left side. Can be passed as any `IconType` string or custom node (e.g. [**EuiAvatar**](../avatar)). It is recommended not to use an element larger than 40x40.
 *   `children`: any node as the event content.
 
 ```tsx interactive
@@ -91,7 +91,7 @@ You can create a timeline thread by rendering multiple **EuiTimelineItem** compo
 When passing an `icon` and `children` prop to each item, there are some design considerations to take into account:
 
 *   `icon`: use icons of the same size to create a better visual consistency.
-*   `children`: when your content is just one line of text, the recommendation is to use a a [**EuiText**](/docs/display/text) as a wrapper. For multi-line content consider using a [**EuiPanel**](/docs/layout/panel) or a [**EuiSplitPanel**](/docs/layout/panel#split-panels) instead. For other types of components like editors, the recommendation is to pass the children without any wrapper.
+*   `children`: when your content is just one line of text, the recommendation is to use an [**EuiText**](../text) as a wrapper. For multi-line content consider using a [**EuiPanel**](../../layout/panel) or a [**EuiSplitPanel**](../../panel#split-panels) instead. For other types of components like editors, the recommendation is to pass the children without any wrapper.
 
 The following example shows how to display multiple **EuiTimelineItem**s and how you can use a **EuiSplitPanel** as the content wrapper.
 
diff --git a/packages/website/docs/components/guidelines/writing/_category_.yml b/packages/website/docs/components/guidelines/writing/_category_.yml
index c64271ca370..95b785455dc 100644
--- a/packages/website/docs/components/guidelines/writing/_category_.yml
+++ b/packages/website/docs/components/guidelines/writing/_category_.yml
@@ -1,3 +1,3 @@
 link:
   type: doc
-  id: guidelines_writing_guidelines
+  id: guidelines_writing
diff --git a/packages/website/docs/components/guidelines/writing/guidelines.mdx b/packages/website/docs/components/guidelines/writing/guidelines.mdx
index 333ad17865f..ee278b22327 100644
--- a/packages/website/docs/components/guidelines/writing/guidelines.mdx
+++ b/packages/website/docs/components/guidelines/writing/guidelines.mdx
@@ -1,6 +1,6 @@
 ---
-slug: /guidelines/writing/guidelines
-id: guidelines_writing_guidelines
+slug: /guidelines/writing
+id: guidelines_writing
 title: Writing
 sidebar_position: 3
 ---
diff --git a/packages/website/docs/components/navigation/button/button_intro.tsx b/packages/website/docs/components/navigation/button/button_intro.tsx
index 98675315466..f62169a0bf8 100644
--- a/packages/website/docs/components/navigation/button/button_intro.tsx
+++ b/packages/website/docs/components/navigation/button/button_intro.tsx
@@ -52,8 +52,9 @@ export default () => {
           image={
             <div
               css={{
-                backgroundColor: euiTheme.colors.body,
                 padding: euiTheme.size.xl,
+                borderBlockEnd: euiTheme.border.thin,
+                backgroundColor: euiTheme.colors.body,
               }}
             >
               {children}
diff --git a/packages/website/docs/components/theming/borders.mdx b/packages/website/docs/components/theming/borders.mdx
index 6dafa5fe800..e2c4ebb27e4 100644
--- a/packages/website/docs/components/theming/borders.mdx
+++ b/packages/website/docs/components/theming/borders.mdx
@@ -51,9 +51,10 @@ import { ColorPreview } from './borders/color_preview';
   <Example.Description>
     ### `euiTheme.border.color` <Badge color="hollow">token</Badge>
 
-    Color for all borders; Default is `colors.lightShade`
-
     You can apply this color directly to any `border-color` property.
+    - Default is `colors.lightShade`
+    - In high contrast mode, this value becomes `colors.fullShade` and cannot be overridden.
+
   </Example.Description>
   <Example.Preview>
     <ColorPreview />
diff --git a/packages/website/docs/components/theming/color_mode.mdx b/packages/website/docs/components/theming/color_mode.mdx
index d21612d4fe8..a29a9864a73 100644
--- a/packages/website/docs/components/theming/color_mode.mdx
+++ b/packages/website/docs/components/theming/color_mode.mdx
@@ -8,9 +8,11 @@ id: theming_color_mode
 
 The `colorMode` determines which values to return based on `LIGHT` or `DARK` mode.
 
+By default, if this prop is not passed, **EuiProvider** will detect and use the user's system dark mode preference. If the prop _is_ passed, it will override the user's system settings.
+
 import { ProviderDetails } from './provider_details';
 
-<ProviderDetails withThemeName={false} />
+<ProviderDetails withThemeName={false} withHighContrastMode={false} />
 
 ## Rendering a specific color mode
 
diff --git a/packages/website/docs/components/theming/colors/_forced_colors_warning.mdx b/packages/website/docs/components/theming/colors/_forced_colors_warning.mdx
new file mode 100644
index 00000000000..caaabc67b4b
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/_forced_colors_warning.mdx
@@ -0,0 +1,6 @@
+:::info Colors and accessibility
+
+Never rely solely on color to convey meaning. Colors can be overridden by [system forced colors](../high_contrast_mode.mdx#forced-contrast-themes-and-colors), or can be difficult to distinguish for different users.
+Always combine color context with accompanying [icons](../../display/icons/overview.mdx) or [copy](../../guidelines/writing/guidelines.mdx) to indicate states such as error, activity, etc.
+
+:::
diff --git a/packages/website/docs/components/theming/colors/utilities.mdx b/packages/website/docs/components/theming/colors/utilities.mdx
index a88a3b482e6..09c847dd039 100644
--- a/packages/website/docs/components/theming/colors/utilities.mdx
+++ b/packages/website/docs/components/theming/colors/utilities.mdx
@@ -5,6 +5,10 @@ id: theming_colors_utilities
 
 # Color utilities
 
+import ForcedColorsWarning from './_forced_colors_warning.mdx';
+
+<ForcedColorsWarning />
+
 ## Background colors
 
 To all but ensure proper contrast of text to background, we recommend using our pre-defined shades of background colors based on the **EuiTheme** brand colors. You can also use [**EuiPanel**](/docs/layout/panel) for the same effect plus more options like padding and rounded corners.
@@ -54,7 +58,7 @@ import { UseEuiBackgroundColorPreview } from './utilities/use_eui_background_col
     ```
     color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'primary' | 'success' | 'warning' | 'danger';
 
-    method? 'opaque' | 'transparent';
+    method?: 'opaque' | 'transparent';
     ```
   </Example.Description>
   <Example.Preview>
diff --git a/packages/website/docs/components/theming/colors/values.mdx b/packages/website/docs/components/theming/colors/values.mdx
index 73ea3c043d4..b0fa503bd23 100644
--- a/packages/website/docs/components/theming/colors/values.mdx
+++ b/packages/website/docs/components/theming/colors/values.mdx
@@ -9,6 +9,10 @@ Elastic UI builds with a very limited palette. It uses a core set of three color
 
 When switching between light and dark color modes, the theme keys do not change, only their values do. This is why most keys are not named for their **evaluated** value but by their **purpose**.
 
+import ForcedColorsWarning from './_forced_colors_warning.mdx';
+
+<ForcedColorsWarning />
+
 ## Brand colors
 
 Elastic has two main brand colors. The other three are used for statefulness like indicating between successful and dangerous actions.
diff --git a/packages/website/docs/components/theming/high_contrast_mode.mdx b/packages/website/docs/components/theming/high_contrast_mode.mdx
new file mode 100644
index 00000000000..11eb0e60538
--- /dev/null
+++ b/packages/website/docs/components/theming/high_contrast_mode.mdx
@@ -0,0 +1,101 @@
+---
+sidebar_position: 2
+slug: /theming/high-contrast-mode
+id: theming_high_contrast_mode
+title: High contrast mode
+---
+
+import { EuiBetaBadge } from '@elastic/eui';
+
+# High contrast mode <EuiBetaBadge label="Beta" color="accent" />
+
+The `highContrastMode` determines and sets certain un-overrideable modifications to the EUI theme, primarily around borders and shadows. Borders will always be pure black or white (depending on the color mode), and shadows will be entirely replaced with borders.
+
+By default, if this prop is not passed, **EuiProvider** will detect and use the user's system contrast preferences.
+
+## Rendering a specific contrast mode
+
+While it's usually best to keep all high contrast mode the same across your app for visual consistency, some instances may benefit from an exaggerated change in contrast. For this you can set **EuiThemeProvider**'s `highContrastMode` to `true`.
+
+:::warning
+In general, we do not ever recommend manually turning off high contrast via `highContrastMode={false}`. Respect the user's contrast preferences where possible.
+:::
+
+```tsx interactive
+import React from 'react';
+import {
+  EuiThemeProvider,
+  EuiBasicTable,
+  EuiBasicTableColumn,
+} from '@elastic/eui';
+import { faker } from '@faker-js/faker';
+
+type User = {
+  firstName: string;
+  lastName: string;
+};
+
+const users: User[] = [];
+for (let i = 0; i < 5; i++) {
+  users.push({
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+  });
+}
+
+const columns: Array<EuiBasicTableColumn<User>> = [
+  {
+    field: 'firstName',
+    name: 'First name',
+  },
+  {
+    field: 'lastName',
+    name: 'Last name',
+  }
+];
+
+export default () => {
+  return (
+    <EuiThemeProvider highContrastMode={true}>
+      <EuiBasicTable
+        columns={columns}
+        items={users}
+        compressed
+        responsiveBreakpoint={false}
+      />
+    </EuiThemeProvider>
+  );
+};
+```
+
+## Forced contrast themes and colors
+
+Please note that some OSes and browsers have something called [forced colors mode](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors), which overrides **all** colors, backgrounds, borders, and shadows. An example of this is Windows High Contrast modes.
+
+Since this is done at a level that EUI can do nothing about, if forced colors mode is detected by **EuiProvider**, EUI will ignore *any* passed `highContrastMode` or `colorMode` prop, as this user choice and system setting takes precedence.
+
+:::tip
+To quickly test your application in forced colors mode without switching OS themes, you can [use Chrome or Edge's devtools to emulate forced-colors mode](https://devtoolstips.org/tips/en/emulate-forced-colors/).
+:::
+
+## Reacting to user high contrast modes
+
+The detected or current `highContrastMode` is available via `useEuiTheme()`. It returns either `"forced"`, `"preferred"`, or simply `false`. You can use this information to (for example) conditionally render or opt out of rendering certain styles or colors.
+
+```tsx interactive
+import React from 'react';
+import { useEuiTheme, EuiPanel } from '@elastic/eui';
+
+export default () => {
+  const { highContrastMode, euiTheme } = useEuiTheme();
+
+  return (
+    <EuiPanel
+      hasBorder={!!highContrastMode}
+      css={highContrastMode ? { border: euiTheme.border.thick } : {}}
+    >
+      This panel will have a thick border in high contrast mode.
+    </EuiPanel>
+  );
+};
+```
diff --git a/packages/website/docs/components/theming/provider_details.tsx b/packages/website/docs/components/theming/provider_details.tsx
index d1d39202a16..95fdd990513 100644
--- a/packages/website/docs/components/theming/provider_details.tsx
+++ b/packages/website/docs/components/theming/provider_details.tsx
@@ -11,10 +11,16 @@ import {
 
 interface ProviderDetailsProps {
   withThemeName?: boolean;
+  withColorMode?: boolean;
+  withHighContrastMode?: boolean;
 }
 
-export const ProviderDetails = ({ withThemeName = true }: ProviderDetailsProps) => {
-  const { euiTheme, colorMode } = useEuiTheme();
+export const ProviderDetails = ({
+  withThemeName = true,
+  withColorMode = true,
+  withHighContrastMode = true,
+}: ProviderDetailsProps) => {
+  const { euiTheme, colorMode, highContrastMode } = useEuiTheme();
   return (
     <EuiPanel grow={false} paddingSize="l" color="subdued">
       <EuiFlexGroup responsive={false} alignItems="center">
@@ -47,18 +53,22 @@ export const ProviderDetails = ({ withThemeName = true }: ProviderDetailsProps)
             </EuiText>
           </EuiFlexItem>
         )}
-        <EuiFlexItem grow={false}>
-          <EuiText size="s">
-            <EuiCode transparentBackground>colorMode:</EuiCode>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiText size="s" color="subdued">
-            <p>
+        {withColorMode && (
+          <EuiFlexItem grow={false}>
+            <EuiText size="s">
+              <EuiCode transparentBackground>colorMode:</EuiCode>
               <code>{colorMode}</code>
-            </p>
-          </EuiText>
-        </EuiFlexItem>
+            </EuiText>
+          </EuiFlexItem>
+        )}
+        {withHighContrastMode && (
+          <EuiFlexItem grow={false}>
+            <EuiText size="s">
+              <EuiCode transparentBackground>highContrastMode:</EuiCode>
+              <code>{String(highContrastMode)}</code>
+            </EuiText>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
     </EuiPanel>
   );
diff --git a/packages/website/docs/components/theming/theme_provider.mdx b/packages/website/docs/components/theming/theme_provider.mdx
index 489bb118202..ac61c8facb3 100644
--- a/packages/website/docs/components/theming/theme_provider.mdx
+++ b/packages/website/docs/components/theming/theme_provider.mdx
@@ -10,13 +10,18 @@ While [**EuiProvider**](#utilities/provider) should not be wrapped around your a
 
 ## EuiThemeProvider
 
-The context layer that enables theming (including the default theme styles) comes from `EuiThemeProvider`. `EuiThemeProvider` accepts three props, all of which have default values and are therefore optional. To use the default EUI theme, no configuration is required.
+The context layer that enables theming (including the default theme styles) comes from `EuiThemeProvider`. `EuiThemeProvider` accepts four main props (all of which have default values and are therefore optional):
 
-*   `theme: EuiThemeSystem` Raw theme values. Calculated values are acceptable.
-*   `colorMode: EuiThemeColorMode` Simply 'light' or 'dark'
-*   `modify: EuiThemeModifications` Overrides and modifications for theme values.
+* `theme:` Raw theme values. Calculated values are acceptable.
+     * For the full shape of an EUI theme, see the [global values](/docs/theming/customizing-themes) page.
+* `modify:` Accepts an object of overrides for theme values.
+     * For examples of this prop, see [Simple instance overrides](#simple-instance-overrides) below.
+* `colorMode:` Accepts 'light', 'dark', or 'inverse'.
+     * For usage, see the [Color mode](/docs/theming/color-mode) page.
+* `highContrastMode`: Accepts a true/false boolean.
+     * For usage, see the [High contrast mode](/docs/theming/high-contrast-mode) page.
 
-The concept for each prop is explained in subsequent sections. More information on the full shape of an EUI theme, see the [Global Values](/docs/theming/customizing-themes) page.
+ To use the default EUI theme, no configuration is required.
 
 import { ProviderDetails } from './provider_details';
 
@@ -24,11 +29,12 @@ import { ProviderDetails } from './provider_details';
 
 ## Consuming with the React hook
 
-Using the react hook **useEuiTheme()** makes it very easy to consume the EUI static and computed variables like colors and sizing. It simply passes back an object of the current theme which includes
+Using the React hook `useEuiTheme()` makes it very easy to consume the EUI static and computed variables like colors and sizing. It simply passes back an object of the current theme which includes:
 
-*   `euiTheme: EuiThemeComputed` All the calculated keys including any modifications
-*   `colorMode: EuiThemeColorMode` Simply 'light' or 'dark'
-*   `modifications: EuiThemeModifications` Only the modification keys
+* `euiTheme:` All the calculated keys including any modifications
+* `modifications:` Only the modification keys
+* `colorMode:` Either 'LIGHT' or 'DARK'
+* `highContrastMode:` Either 'forced', 'preferred', or `false`
 
 When consuming the theme's keys like `euiTheme.colors.primary`, you'll want to pass them via the `css` property to take advantage of Emotion's compilation.
 
diff --git a/packages/website/src/components/example/example.tsx b/packages/website/src/components/example/example.tsx
index aa00eb5d3db..adfc5063cb5 100644
--- a/packages/website/src/components/example/example.tsx
+++ b/packages/website/src/components/example/example.tsx
@@ -6,7 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { PropsWithChildren, ReactNode, useMemo, Children, ReactElement } from 'react';
+import {
+  PropsWithChildren,
+  ReactNode,
+  useMemo,
+  Children,
+  ReactElement,
+} from 'react';
 import { css } from '@emotion/react';
 import {
   EuiSplitPanel,
@@ -15,6 +21,7 @@ import {
   useEuiMemoizedStyles,
   euiFontSize,
 } from '@elastic/eui';
+import { highContrastModeStyles } from '@elastic/eui/lib/global_styling/functions/high_contrast';
 import { isElement } from 'react-is';
 
 export interface ExampleProps extends PropsWithChildren {}
@@ -61,7 +68,8 @@ const ExamplePreview = ({ children }: PropsWithChildren) => children;
  */
 export const Example = ({ children }: ExampleProps) => {
   const styles = useEuiMemoizedStyles(getExampleStyles);
-  const { euiTheme } = useEuiTheme();
+  const euiThemeContext = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
   const { description, snippet, preview } = useMemo(() => {
     let description: ReactNode;
     let snippet: ReactNode;
@@ -97,17 +105,24 @@ export const Example = ({ children }: ExampleProps) => {
         {description}
       </EuiSplitPanel.Inner>
       <EuiSplitPanel.Inner paddingSize="none">
-        <EuiSplitPanel.Outer
-          direction="column"
-          hasBorder
-          hasShadow={false}
-          style={{ overflow: 'hidden' }}
-        >
+        <EuiSplitPanel.Outer direction="column" hasBorder hasShadow={false}>
           <EuiSplitPanel.Inner>{preview}</EuiSplitPanel.Inner>
           <EuiSplitPanel.Inner
             paddingSize="none"
             css={css`
               background: ${euiTheme.colors.lightestShade};
+              border-end-start-radius: ${euiTheme.border.radius.medium};
+              border-end-end-radius: ${euiTheme.border.radius.medium};
+              overflow: hidden;
+
+              ${highContrastModeStyles(euiThemeContext, {
+                // Code block is used within a panel which already has a border - skip doubling up
+                preferred: `
+                  & > .euiCodeBlock {
+                    border: none;
+                  }
+                `,
+              })}
             `}
           >
             {snippet}
diff --git a/packages/website/src/components/homepage/highlights/index.tsx b/packages/website/src/components/homepage/highlights/index.tsx
index e9957110530..c512ec106b9 100644
--- a/packages/website/src/components/homepage/highlights/index.tsx
+++ b/packages/website/src/components/homepage/highlights/index.tsx
@@ -162,11 +162,9 @@ const getStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
     }
   `,
   card: css`
-    background-color: transparent;
-    border: none;
-
     &:hover {
       box-shadow: none;
+      filter: none;
 
       a {
         color: ${euiTheme.colors.link};
@@ -256,7 +254,7 @@ export const HomepageHighlights = () => {
                       )
                     }
                     paddingSize="s"
-                    hasBorder
+                    display="transparent"
                     css={styles.card}
                   >
                     <EuiText>
diff --git a/yarn.lock b/yarn.lock
index 7640422046e..09c7b153432 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4609,7 +4609,7 @@ __metadata:
     "@docusaurus/types": "npm:^3.5.2"
     "@docusaurus/utils-validation": "npm:^3.5.2"
     "@elastic/datemath": "npm:^5.0.3"
-    "@elastic/eui": "npm:97.2.0"
+    "@elastic/eui": "workspace:^"
     "@elastic/eui-docgen": "workspace:^"
     "@emotion/css": "npm:^11.11.2"
     "@emotion/react": "npm:^11.11.4"
@@ -4676,57 +4676,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@elastic/eui@npm:97.2.0":
-  version: 97.2.0
-  resolution: "@elastic/eui@npm:97.2.0"
-  dependencies:
-    "@hello-pangea/dnd": "npm:^16.6.0"
-    "@types/lodash": "npm:^4.14.202"
-    "@types/numeral": "npm:^2.0.5"
-    "@types/react-window": "npm:^1.8.8"
-    "@types/refractor": "npm:^3.4.0"
-    chroma-js: "npm:^2.4.2"
-    classnames: "npm:^2.5.1"
-    lodash: "npm:^4.17.21"
-    mdast-util-to-hast: "npm:^10.2.0"
-    numeral: "npm:^2.0.6"
-    prop-types: "npm:^15.8.1"
-    react-dropzone: "npm:^11.7.1"
-    react-element-to-jsx-string: "npm:^15.0.0"
-    react-focus-on: "npm:^3.9.1"
-    react-is: "npm:^17.0.2"
-    react-remove-scroll-bar: "npm:^2.3.4"
-    react-virtualized-auto-sizer: "npm:^1.0.24"
-    react-window: "npm:^1.8.10"
-    refractor: "npm:^3.6.0"
-    rehype-raw: "npm:^5.1.0"
-    rehype-react: "npm:^6.2.1"
-    rehype-stringify: "npm:^8.0.0"
-    remark-breaks: "npm:^2.0.2"
-    remark-emoji: "npm:^2.1.0"
-    remark-parse-no-trim: "npm:^8.0.4"
-    remark-rehype: "npm:^8.1.0"
-    tabbable: "npm:^5.3.3"
-    text-diff: "npm:^1.0.1"
-    unified: "npm:^9.2.2"
-    unist-util-visit: "npm:^2.0.3"
-    url-parse: "npm:^1.5.10"
-    uuid: "npm:^8.3.0"
-    vfile: "npm:^4.2.1"
-  peerDependencies:
-    "@elastic/datemath": ^5.0.2
-    "@emotion/css": 11.x
-    "@emotion/react": 11.x
-    "@types/react": ^16.9 || ^17.0 || ^18.0
-    "@types/react-dom": ^16.9 || ^17.0 || ^18.0
-    moment: ^2.13.0
-    react: ^16.12 || ^17.0 || ^18.0
-    react-dom: ^16.12 || ^17.0 || ^18.0
-    typescript: ~4.5.3 || ^5
-  checksum: 10c0/c8fed61d39cc6d06f00caf8234b97e9579ca4d11d7bf0d3cf4cb5d09a6782d8866a7db66b02d3d5eb4f2947a213aca03837b38b166020d21c9bda2e7eb20ad11
-  languageName: node
-  linkType: hard
-
 "@elastic/eui@workspace:^, @elastic/eui@workspace:packages/eui":
   version: 0.0.0-use.local
   resolution: "@elastic/eui@workspace:packages/eui"