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_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_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_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/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/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/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/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/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``,
+  };
+};