[EuiForm] Increase Contrast on EuiForm Section Controls to Pass WCAG AA Standards

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');
   });
 });
 

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 = {

src/components/form/switch/_switch.scss

@@ -24,30 +24,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 +43,31 @@
         }
       }
     }
+
+    &:disabled {
+      &:hover,
+      ~ .euiSwitch__label:hover {
+        cursor: not-allowed;
+      }
+
+      .euiSwitch__body {
+        background-color: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4));
+      }
+
+      .euiSwitch__thumb {
+        background-color: rgba(0,0,0,0);
+        border-color: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade);
+        box-shadow: none;
+      }
+
+      .euiSwitch__icon {
+        fill: $euiColorDarkShade;
+      }
+
+      + .euiSwitch__label {
+        color: $euiFormControlDisabledColor;
+      }
+    }
   }
 
   .euiSwitch__body {
@@ -107,7 +108,7 @@
     width: $euiSwitchWidth - ($euiSwitchThumbSize / 2) + $euiSizeS;
     height: $euiSwitchIconHeight;
     transition: left $euiAnimSpeedNormal $euiAnimSlightBounce, right $euiAnimSpeedNormal $euiAnimSlightBounce;
-    fill: $euiTextColor;
+    fill: $euiColorEmptyShade;
   }
 
   .euiSwitch__icon--checked {

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: (

upcoming_changelogs/6729.md

@@ -0,0 +1 @@
+- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and `EuiSwitch` to meet WCAG AA guidelines.