diff --git a/src/components/form/form.styles.test.tsx b/src/components/form/form.styles.test.tsx
index a673708fd9d..847402061b1 100644
--- a/src/components/form/form.styles.test.tsx
+++ b/src/components/form/form.styles.test.tsx
@@ -68,7 +68,7 @@ describe('euiFormVariables', () => {
     expect(result.current.controlPlaceholderText).toEqual('#878b95');
     expect(result.current.inputGroupLabelBackground).toEqual('#2c2f37');
     expect(result.current.customControlDisabledIconColor).toEqual('#33373f');
-    expect(result.current.customControlBorderColor).toEqual('#1e1f26');
+    expect(result.current.customControlBorderColor).toEqual('#16171c');
   });
 });
 
diff --git a/src/components/form/form.styles.ts b/src/components/form/form.styles.ts
index 2c51e422754..82b2323fde5 100644
--- a/src/components/form/form.styles.ts
+++ b/src/components/form/form.styles.ts
@@ -53,14 +53,14 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
     inputGroupBorder: 'none',
   };
 
-  // Colors - specific for checkboxes and radios
+  // Colors - specific to checkboxes, radios, switches, and range thumbs
   const customControlColors = {
     customControlDisabledIconColor: isColorDark
       ? shade(euiTheme.colors.mediumShade, 0.38)
       : tint(euiTheme.colors.mediumShade, 0.485),
     customControlBorderColor: isColorDark
-      ? shade(euiTheme.colors.lightestShade, 0.18)
-      : tint(euiTheme.colors.lightestShade, 0.3),
+      ? shade(euiTheme.colors.lightestShade, 0.4)
+      : tint(euiTheme.colors.lightestShade, 0.31),
   };
 
   const controlLayout = {
diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
index 15a3254acb8..ad96a2686e7 100644
--- a/src/components/form/switch/_switch.scss
+++ b/src/components/form/switch/_switch.scss
@@ -2,6 +2,9 @@
 // stylelint-disable max-nesting-depth
 
 .euiSwitch {
+  $euiSwitchOffDisabledColor: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4));
+  $euiSwitchDisabledThumbColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade);
+
   position: relative;
   display: inline-flex;
   align-items: flex-start;
@@ -24,30 +27,6 @@
       @include euiCustomControlFocused;
     }
 
-    &:disabled {
-      &:hover,
-      ~ .euiSwitch__label:hover {
-        cursor: not-allowed;
-      }
-
-      .euiSwitch__body {
-        background-color: $euiSwitchOffColor;
-      }
-
-      .euiSwitch__thumb {
-        @include euiCustomControlDisabled;
-        background-color: $euiSwitchOffColor;
-      }
-
-      .euiSwitch__icon {
-        fill: $euiFormCustomControlDisabledIconColor;
-      }
-
-      + .euiSwitch__label {
-        color: $euiFormControlDisabledColor;
-      }
-    }
-
     &[aria-checked='false'] {
       .euiSwitch__body {
         background-color: $euiSwitchOffColor;
@@ -67,6 +46,31 @@
         }
       }
     }
+
+    &:disabled {
+      &:hover,
+      ~ .euiSwitch__label:hover {
+        cursor: not-allowed;
+      }
+
+      .euiSwitch__body {
+        background-color: $euiSwitchOffDisabledColor;
+      }
+
+      .euiSwitch__thumb {
+        background-color: rgba(0,0,0,0);
+        border-color: $euiSwitchDisabledThumbColor;
+        box-shadow: none;
+      }
+
+      .euiSwitch__icon {
+        fill: $euiColorDarkShade;
+      }
+
+      + .euiSwitch__label {
+        color: $euiFormControlDisabledColor;
+      }
+    }
   }
 
   .euiSwitch__body {
@@ -107,7 +111,7 @@
     width: $euiSwitchWidth - ($euiSwitchThumbSize / 2) + $euiSizeS;
     height: $euiSwitchIconHeight;
     transition: left $euiAnimSpeedNormal $euiAnimSlightBounce, right $euiAnimSpeedNormal $euiAnimSlightBounce;
-    fill: $euiTextColor;
+    fill: $euiColorEmptyShade;
   }
 
   .euiSwitch__icon--checked {
@@ -194,7 +198,7 @@
     .euiSwitch__button[aria-checked='false'],
     .euiSwitch__button[aria-checked='true']:disabled {
       .euiSwitch__thumb {
-        border-color: $euiFormCustomControlBorderColor;
+        border-color: $euiSwitchDisabledThumbColor;
       }
     }
 
diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss
index a20d3ed074d..e86d3990064 100644
--- a/src/global_styling/variables/_form.scss
+++ b/src/global_styling/variables/_form.scss
@@ -33,13 +33,13 @@ $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 2
 $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
-$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default;
+$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 0 transparent !default;
 $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
 $euiFormInputGroupBorder: none !default;
-$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
+$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .25), transparentize($euiColorDarkShade, .4)) !default;
 
 // Icons sizes
 $euiFormControlIconSizes: (
diff --git a/upcoming_changelogs/6729.md b/upcoming_changelogs/6729.md
new file mode 100644
index 00000000000..2d842eea26c
--- /dev/null
+++ b/upcoming_changelogs/6729.md
@@ -0,0 +1 @@
+- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and `EuiSwitch` in their unchecked states to meet WCAG AA guidelines.
\ No newline at end of file