fix: update colors for 3:1 accessibility on checkbox, radio, and toggle (#3073)

Updated colors for 3:1 accessibility on checkbox, radio, and toggle Updated to support external focus indicator
2020-05-14 16:46:58 -07:00 · 2020-05-14 16:46:58 -07:00 · 0dd89c2c01
--- a/packages/react/fast-components-styles-msft/src/checkbox/index.ts
+++ b/packages/react/fast-components-styles-msft/src/checkbox/index.ts
@ -13,11 +13,13 @@ import {
    neutralFillInputActive,
    neutralFillInputHover,
    neutralFillInputRest,
-    neutralFocus,
+    neutralFillToggleActive,
+    neutralFillToggleHover,
+    neutralFillToggleRest,
    neutralForegroundRest,
-    neutralOutlineActive,
-    neutralOutlineHover,
-    neutralOutlineRest,
+    neutralOutlineContrastActive,
+    neutralOutlineContrastHover,
+    neutralOutlineContrastRest,
 } from "../utilities/color";
 import { applyCornerRadius } from "../utilities/border";
 import {
@ -27,30 +29,33 @@ import {
 } from "../utilities/density";
 import { applyDisabledState } from "../utilities/disabled";
 import { applyScaledTypeRamp } from "../utilities/typography";
-import { designUnit, outlineWidth } from "../utilities/design-system";
+import { backgroundColor, designUnit, outlineWidth } from "../utilities/design-system";
 import { applyCursorDisabled, applyCursorPointer } from "../utilities/cursor";
-import { ColorRecipe } from "../utilities/color/common";
 import {
    HighContrastColor,
    highContrastColorBackground,
    highContrastDisabledBorder,
+    highContrastDoubleOuterFocus,
    highContrastHighlightBackground,
    highContrastOptOutProperty,
    highContrastSelectedBackground,
    highContrastSelector,
    highContrastTextForeground,
 } from "../utilities/high-contrast";
+import { doubleOuterFocus } from "../patterns/input-field";

 const inputSize: DesignSystemResolver<string> = toPx(
    add(divide(heightNumber(), 2), designUnit)
 );
+
 const indeterminateIndicatorMargin: DesignSystemResolver<string> = toPx(
    add(designUnit, densityCategorySwitch(0, 1, 2))
 );
+
 const indicatorSvg: (
-    color: ColorRecipe<string> | string
+    color: DesignSystemResolver<string> | string
 ) => DesignSystemResolver<string> = (
-    color: ColorRecipe<string> | string
+    color: DesignSystemResolver<string> | string
 ): DesignSystemResolver<string> => {
    return (designSystem: DesignSystem): string => {
        const colorEval: string = typeof color === "string" ? color : color(designSystem);
@ -59,6 +64,7 @@ const indicatorSvg: (
        )}" fill-rule="evenodd" clip-rule="evenodd" d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"/></svg>`;
    };
 };
+
 const styles: ComponentStyles<CheckboxClassNameContract, DesignSystem> = {
    checkbox: {
        position: "relative",
@ -90,14 +96,14 @@ const styles: ComponentStyles<CheckboxClassNameContract, DesignSystem> = {
        border: format(
            "{0} solid {1}",
            toPx<DesignSystem>(outlineWidth),
-            neutralOutlineRest
+            neutralOutlineContrastRest
        ),
        "&:enabled": {
            ...applyCursorPointer(),
        },
        "&:hover:enabled": {
            background: neutralFillInputHover,
-            "border-color": neutralOutlineHover,
+            "border-color": neutralOutlineContrastHover,
            [highContrastSelector]: {
                background: HighContrastColor.background,
                "border-color": HighContrastColor.selectedBackground,
@ -105,17 +111,11 @@ const styles: ComponentStyles<CheckboxClassNameContract, DesignSystem> = {
        },
        "&:active:enabled": {
            background: neutralFillInputActive,
-            "border-color": neutralOutlineActive,
+            "border-color": neutralOutlineContrastActive,
        },
        ...applyFocusVisible({
-            "box-shadow": format<DesignSystem>("0 0 0 1px {0} inset", neutralFocus),
-            "border-color": neutralFocus,
-            [highContrastSelector]: {
-                "box-shadow": format<DesignSystem>(
-                    "0 0 0 1px {0}",
-                    () => HighContrastColor.buttonText
-                ),
-            },
+            ...doubleOuterFocus,
+            ...highContrastDoubleOuterFocus,
        }),
        ...highContrastColorBackground,
    },
@ -148,7 +148,7 @@ const styles: ComponentStyles<CheckboxClassNameContract, DesignSystem> = {
            "&::before": {
                background: format(
                    "url('data:image/svg+xml;utf8,{0}')",
-                    indicatorSvg(neutralForegroundRest)
+                    indicatorSvg(backgroundColor)
                ),
                [highContrastSelector]: {
                    background: format(
@ -171,10 +171,16 @@ const styles: ComponentStyles<CheckboxClassNameContract, DesignSystem> = {
            },
        },
        "& $checkbox_input": {
+            background: neutralFillToggleRest,
+            "border-color": "transparent",
            ...highContrastHighlightBackground,
            "&:hover": {
+                background: neutralFillToggleHover,
                ...highContrastSelectedBackground,
            },
+            "&:active": {
+                background: neutralFillToggleActive,
+            },
        },
    },
    checkbox__indeterminate: {
--- a/packages/react/fast-components-styles-msft/src/patterns/input-field.ts
+++ b/packages/react/fast-components-styles-msft/src/patterns/input-field.ts
@ -1,5 +1,5 @@
 import { CSSRules } from "@microsoft/fast-jss-manager";
-import { format, toPx } from "@microsoft/fast-jss-utilities";
+import { add, format, toPx } from "@microsoft/fast-jss-utilities";
 import { applyCornerRadius } from "../utilities/border";
 import { DesignSystem } from "../design-system";
 import {
@ -19,7 +19,11 @@ import { horizontalSpacing } from "../utilities/density";
 import { applyDisabledState } from "../utilities/disabled";
 import { applyScaledTypeRamp } from "../utilities/typography";
 import { applyFontWeightNormal } from "../utilities/fonts";
-import { outlineWidth } from "../utilities/design-system";
+import {
+    backgroundColor,
+    focusOutlineWidth,
+    outlineWidth,
+} from "../utilities/design-system";
 import {
    HighContrastColor,
    highContrastDisabledBorder,
@ -128,3 +132,12 @@ export function filledInputFieldStyles(): CSSRules<{}> {
        },
    };
 }
+
+export const doubleOuterFocus: CSSRules<DesignSystem> = {
+    "box-shadow": format(
+        `0 0 0 2px {0}, 0 0 0 {2} {1}`,
+        backgroundColor,
+        neutralFocus,
+        toPx(add(focusOutlineWidth, 2))
+    ),
+};
--- a/packages/react/fast-components-styles-msft/src/radio/index.ts
+++ b/packages/react/fast-components-styles-msft/src/radio/index.ts
@ -14,11 +14,10 @@ import {
    neutralFillInputActive,
    neutralFillInputHover,
    neutralFillInputRest,
-    neutralFocus,
    neutralForegroundRest,
-    neutralOutlineActive,
-    neutralOutlineHover,
-    neutralOutlineRest,
+    neutralOutlineContrastActive,
+    neutralOutlineContrastHover,
+    neutralOutlineContrastRest,
 } from "../utilities/color";
 import {
    densityCategorySwitch,
@ -27,15 +26,17 @@ import {
 } from "../utilities/density";
 import { applyDisabledState } from "../utilities/disabled";
 import { applyScaledTypeRamp } from "../utilities/typography";
-import { designUnit, outlineWidth } from "../utilities/design-system";
+import { backgroundColor, designUnit, outlineWidth } from "../utilities/design-system";
 import { applyCursorDisabled, applyCursorPointer } from "../utilities/cursor";
 import {
    HighContrastColor,
+    highContrastDoubleOuterFocus,
    highContrastHighlightBackground,
    highContrastOptOutProperty,
    highContrastSelectedBackground,
    highContrastSelector,
 } from "../utilities/high-contrast";
+import { doubleOuterFocus } from "../patterns/input-field";

 const inputSize: DesignSystemResolver<string> = toPx(
    add(divide(heightNumber(), 2), designUnit)
@ -68,14 +69,14 @@ const styles: ComponentStyles<RadioClassNameContract, DesignSystem> = {
        border: format(
            "{0} solid {1}",
            toPx<DesignSystem>(outlineWidth),
-            neutralOutlineRest
+            neutralOutlineContrastRest
        ),
        "&:enabled": {
            ...applyCursorPointer(),
        },
        "&:hover:enabled": {
            background: neutralFillInputHover,
-            "border-color": neutralOutlineHover,
+            "border-color": neutralOutlineContrastHover,
            [highContrastSelector]: {
                background: "transparent",
                border: format(
@ -85,19 +86,13 @@ const styles: ComponentStyles<RadioClassNameContract, DesignSystem> = {
                ),
            },
        },
-        "&:active": {
+        "&:active:enabled": {
            background: neutralFillInputActive,
-            "border-color": neutralOutlineActive,
+            "border-color": neutralOutlineContrastActive,
        },
        ...applyFocusVisible({
-            "box-shadow": format<DesignSystem>("0 0 0 1px {0} inset", neutralFocus),
-            "border-color": neutralFocus,
-            [highContrastSelector]: {
-                "box-shadow": format<DesignSystem>(
-                    "0 0 0 1px {0}",
-                    () => HighContrastColor.buttonText
-                ),
-            },
+            ...doubleOuterFocus,
+            ...highContrastDoubleOuterFocus,
        }),
        [highContrastSelector]: {
            ...highContrastOptOutProperty,
@ -142,7 +137,7 @@ const styles: ComponentStyles<RadioClassNameContract, DesignSystem> = {
    radio__checked: {
        "& $radio_stateIndicator": {
            "&::before": {
-                background: neutralForegroundRest,
+                background: backgroundColor,
                [highContrastSelector]: {
                    background: HighContrastColor.selectedBackground,
                },
@ -152,10 +147,15 @@ const styles: ComponentStyles<RadioClassNameContract, DesignSystem> = {
            ...highContrastSelectedBackground,
        },
        "& $radio_input": {
+            "background-color": neutralOutlineContrastRest,
            ...highContrastSelectedBackground,
-            "&:hover": {
+            "&:hover:enabled": {
+                "background-color": neutralOutlineContrastHover,
                ...highContrastHighlightBackground,
            },
+            "&:active:enabled": {
+                "background-color": neutralOutlineContrastActive,
+            },
        },
    },
    radio__disabled: {
--- a/packages/react/fast-components-styles-msft/src/slider/index.ts
+++ b/packages/react/fast-components-styles-msft/src/slider/index.ts
@ -1,6 +1,5 @@
 import { ComponentStyles } from "@microsoft/fast-jss-manager";
 import {
-    add,
    applyFocusVisible,
    divide,
    format,
@ -14,7 +13,6 @@ import { applyCursorPointer } from "../utilities/cursor";
 import { DesignSystem, DesignSystemResolver } from "../design-system";
 import { applyPillCornerRadius } from "../utilities/border";
 import {
-    neutralFocus,
    neutralForegroundActive,
    neutralForegroundHint,
    neutralForegroundHover,
@ -22,21 +20,18 @@ import {
    neutralOutlineRest,
 } from "../utilities/color";
 import { densityCategorySwitch, heightNumber } from "../utilities/density";
-import {
-    backgroundColor,
-    designUnit,
-    focusOutlineWidth,
-} from "../utilities/design-system";
+import { designUnit } from "../utilities/design-system";
 import { applyDisabledState } from "../utilities/disabled";
-import { applyElevation, ElevationMultiplier } from "../utilities/elevation";
 import {
    highContrastBackground,
    HighContrastColor,
    highContrastDisabledBackground,
+    highContrastDoubleOuterFocus,
    highContrastHighlightBackground,
    highContrastOptOutProperty,
    highContrastSelector,
 } from "../utilities/high-contrast";
+import { doubleOuterFocus } from "../patterns/input-field";

 const thumbSizeValue: DesignSystemResolver<number> = divide(heightNumber(), 2);
 const thumbSize: DesignSystemResolver<string> = toPx(thumbSizeValue);
@ -73,21 +68,9 @@ const styles: ComponentStyles<SliderClassNameContract, DesignSystem> = {
        background: neutralForegroundRest,
        "border-radius": "50%",
        transition: "all 0.2s ease",
-        ...applyElevation(ElevationMultiplier.e4),
        ...applyFocusVisible<DesignSystem>({
-            "box-shadow": format(
-                `0 0 0 2px {0}, 0 0 0 {2} {1}`,
-                backgroundColor,
-                neutralFocus,
-                toPx(add(focusOutlineWidth, 2))
-            ),
-            [highContrastSelector]: {
-                "box-shadow": format(
-                    `0 0 0 2px Background, 0 0 0 {0} {1}`,
-                    toPx(add(focusOutlineWidth, 2)),
-                    () => HighContrastColor.buttonText
-                ),
-            },
+            ...doubleOuterFocus,
+            ...highContrastDoubleOuterFocus,
        }),
        "&:hover": {
            background: neutralForegroundHover,
--- a/packages/react/fast-components-styles-msft/src/toggle/index.ts
+++ b/packages/react/fast-components-styles-msft/src/toggle/index.ts
@ -19,24 +19,23 @@ import {
    neutralFillInputActive,
    neutralFillInputHover,
    neutralFillInputRest,
-    neutralFocus,
-    neutralFocusInnerAccent,
    neutralForegroundRest,
-    neutralOutlineActive,
-    neutralOutlineHover,
-    neutralOutlineRest,
+    neutralOutlineContrastActive,
+    neutralOutlineContrastHover,
+    neutralOutlineContrastRest,
 } from "../utilities/color";
 import { applyDisabledState } from "../utilities/disabled";
 import { densityCategorySwitch, heightNumber } from "../utilities/density";
-import { designUnit, focusOutlineWidth, outlineWidth } from "../utilities/design-system";
+import { designUnit, outlineWidth } from "../utilities/design-system";
 import { applyCursorDisabled, applyCursorPointer } from "../utilities/cursor";
 import {
    HighContrastColor,
-    highContrastDoubleFocus,
+    highContrastDoubleOuterFocus,
    highContrastOptOutProperty,
    highContrastSelector,
    highContrastTextForeground,
 } from "../utilities/high-contrast";
+import { doubleOuterFocus } from "../patterns/input-field";

 const height: DesignSystemResolver<number> = add(divide(heightNumber(), 2), designUnit);
 const width: DesignSystemResolver<number> = multiply(height, 2);
@ -100,7 +99,7 @@ const styles: ComponentStyles<ToggleClassNameContract, DesignSystem> = {
        border: format(
            "{0} solid {1}",
            toPx<DesignSystem>(outlineWidth),
-            neutralOutlineRest
+            neutralOutlineContrastRest
        ),
        "border-radius": toPx(height),
        appearance: "none",
@ -109,7 +108,7 @@ const styles: ComponentStyles<ToggleClassNameContract, DesignSystem> = {
        outline: "none",
        "&:active": {
            background: neutralFillInputActive,
-            "border-color": neutralOutlineActive,
+            "border-color": neutralOutlineContrastActive,
            [highContrastSelector]: {
                background: HighContrastColor.selectedBackground,
                "border-color": HighContrastColor.selectedText,
@ -120,7 +119,7 @@ const styles: ComponentStyles<ToggleClassNameContract, DesignSystem> = {
        },
        "&:hover": {
            background: neutralFillInputHover,
-            "border-color": neutralOutlineHover,
+            "border-color": neutralOutlineContrastHover,
            [highContrastSelector]: {
                background: HighContrastColor.background,
                "border-color": HighContrastColor.selectedBackground,
@ -130,16 +129,8 @@ const styles: ComponentStyles<ToggleClassNameContract, DesignSystem> = {
            },
        },
        ...applyFocusVisible({
-            "box-shadow": format<DesignSystem>("0 0 0 1px {0} inset", neutralFocus),
-            "border-color": neutralFocus,
-            [highContrastSelector]: {
-                "box-shadow": format<DesignSystem>(
-                    "0 0 0 {0} {1} inset",
-                    toPx<DesignSystem>(outlineWidth),
-                    () => HighContrastColor.buttonText
-                ),
-                "border-color": HighContrastColor.buttonText,
-            },
+            ...doubleOuterFocus,
+            ...highContrastDoubleOuterFocus,
        }),
        [highContrastSelector]: {
            background: HighContrastColor.background,
@ -153,17 +144,6 @@ const styles: ComponentStyles<ToggleClassNameContract, DesignSystem> = {
        "& $toggle_input": {
            background: accentFillRest,
            "border-color": accentFillRest,
-            ...applyFocusVisible({
-                "box-shadow": format<DesignSystem>(
-                    "0 0 0 {0} {1} inset, 0 0 0 {2} {3} inset",
-                    toPx(subtract(focusOutlineWidth, outlineWidth)),
-                    neutralFocus,
-                    toPx(add(focusOutlineWidth, outlineWidth)),
-                    neutralFocusInnerAccent(accentFillRest)
-                ),
-                "border-color": neutralFocus,
-                ...highContrastDoubleFocus,
-            }),
            "&:disabled": {
                "& $toggle_input, & $toggle_label, & $toggle_statusMessage": {
                    [highContrastSelector]: {
@ -226,8 +206,8 @@ const styles: ComponentStyles<ToggleClassNameContract, DesignSystem> = {
        ...applyScaledTypeRamp("t7"),
        "line-height": toPx(height),
        float: directionSwitch("left", "right"),
-        "padding-left": directionSwitch("5px", ""),
-        "padding-right": directionSwitch("", "5px"),
+        "padding-left": directionSwitch("6px", ""),
+        "padding-right": directionSwitch("", "6px"),
        "user-select": "none",
        "margin-top": "0",
        "padding-bottom": "0",
--- a/packages/react/fast-components-styles-msft/src/utilities/color/index.ts
+++ b/packages/react/fast-components-styles-msft/src/utilities/color/index.ts
@ -83,6 +83,13 @@ export { neutralFillCard } from "./neutral-fill-card";
 /**
 * Border exports
 */
+export {
+    neutralOutlineContrast,
+    neutralOutlineContrastRest,
+    neutralOutlineContrastHover,
+    neutralOutlineContrastActive,
+} from "./neutral-outline-contrast";
+
 export {
    neutralOutline,
    neutralOutlineRest,
--- a/packages/react/fast-components-styles-msft/src/utilities/color/neutral-outline-contrast.ts
+++ b/packages/react/fast-components-styles-msft/src/utilities/color/neutral-outline-contrast.ts
@ -0,0 +1,50 @@
+import { subtract } from "@microsoft/fast-jss-utilities";
+import {
+    neutralOutlineActiveDelta,
+    neutralOutlineFocusDelta,
+    neutralOutlineHoverDelta,
+    neutralOutlineRestDelta,
+    neutralPalette,
+} from "../design-system";
+import {
+    ColorRecipe,
+    colorRecipeFactory,
+    SwatchFamily,
+    SwatchFamilyResolver,
+    swatchFamilyToSwatchRecipeFactory,
+    SwatchFamilyType,
+    SwatchRecipe,
+} from "./common";
+
+import { accessibleAlgorithm } from "./accessible-recipe";
+
+export const neutralOutlineContrastAlgorithm: SwatchFamilyResolver = colorRecipeFactory(
+    accessibleAlgorithm(
+        neutralPalette,
+        3,
+        0,
+        subtract(neutralOutlineHoverDelta, neutralOutlineRestDelta),
+        subtract(neutralOutlineActiveDelta, neutralOutlineRestDelta),
+        subtract(neutralOutlineFocusDelta, neutralOutlineRestDelta)
+    )
+);
+
+export const neutralOutlineContrast: ColorRecipe<SwatchFamily> = colorRecipeFactory(
+    neutralOutlineContrastAlgorithm
+);
+export const neutralOutlineContrastRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+    SwatchFamilyType.rest,
+    neutralOutlineContrast
+);
+export const neutralOutlineContrastHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+    SwatchFamilyType.hover,
+    neutralOutlineContrast
+);
+export const neutralOutlineContrastActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+    SwatchFamilyType.active,
+    neutralOutlineContrast
+);
+export const neutralOutlineContrastFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+    SwatchFamilyType.focus,
+    neutralOutlineContrast
+);
--- a/packages/react/fast-components-styles-msft/src/utilities/high-contrast.ts
+++ b/packages/react/fast-components-styles-msft/src/utilities/high-contrast.ts
@ -1,5 +1,5 @@
 import { CSSRules } from "@microsoft/fast-jss-manager";
-import { format, important, toPx } from "@microsoft/fast-jss-utilities";
+import { add, format, important, toPx } from "@microsoft/fast-jss-utilities";
 import { canUseForcedColors } from "@microsoft/fast-web-utilities";
 import { DesignSystem } from "../design-system";
 import { focusOutlineWidth, outlineWidth } from "./design-system";
@ -127,6 +127,17 @@ export const highContrastOutlineFocus: CSSRules<DesignSystem> = {
    },
 };

+// Used to apply a focus indicator outside of control bounds for smaller controls like checkbox and radio
+export const highContrastDoubleOuterFocus: CSSRules<DesignSystem> = {
+    [highContrastSelector]: {
+        "box-shadow": format(
+            `0 0 0 2px Background, 0 0 0 {0} {1}`,
+            toPx(add(focusOutlineWidth, 2)),
+            () => HighContrastColor.buttonText
+        ),
+    },
+};
+
 // Used to set double focus with keyboard focus
 export const highContrastDoubleFocus: CSSRules<DesignSystem> = {
    [highContrastSelector]: {
--- a/sites/fast-color-explorer/app/color-blocks.tsx
+++ b/sites/fast-color-explorer/app/color-blocks.tsx
@ -7,6 +7,7 @@ import {
    Checkbox,
    Divider,
    Hypertext,
+    Label,
    Paragraph,
    ParagraphClassNameContract,
    TextField,
@ -22,7 +23,6 @@ import {
    accentForegroundHover,
    accentForegroundRest,
    backgroundColor,
-    DesignSystem,
    fontWeight,
    neutralDividerRest,
    neutralFillActive,
@ -43,18 +43,17 @@ import {
    neutralForegroundHint,
    neutralForegroundHover,
    neutralForegroundRest,
-    neutralForegroundToggle,
    neutralOutlineActive,
+    neutralOutlineContrastActive,
+    neutralOutlineContrastHover,
+    neutralOutlineContrastRest,
    neutralOutlineHover,
    neutralOutlineRest,
 } from "@microsoft/fast-components-styles-msft";
 import manageJss, { ComponentStyleSheet } from "@microsoft/fast-jss-manager-react";
 import classnames from "classnames";
 import { get, isEqual, uniqueId } from "lodash-es";
-import {
-    CheckboxClassNameContract,
-    DividerClassNameContract,
-} from "@microsoft/fast-components-react-base";
+import { DividerClassNameContract } from "@microsoft/fast-components-react-base";
 import { connect } from "react-redux";
 import { Omit } from "utility-types";
 import { ColorsDesignSystem } from "./design-system";
@ -212,34 +211,6 @@ class ColorBlocksBase extends React.Component<ColorBlocksProps, ColorBlocksState
        },
    };

-    private checkboxStyleOverrides: ComponentStyleSheet<
-        CheckboxClassNameContract,
-        ColorsDesignSystem
-    > = {
-        checkbox_input: {},
-        checkbox_stateIndicator: {},
-        checkbox__checked: {
-            "& $checkbox_input": {
-                background: neutralFillToggleRest,
-                "border-color": "transparent",
-                "&:hover": {
-                    background: neutralFillToggleHover,
-                },
-                "&:active": {
-                    background: neutralFillToggleActive,
-                },
-            },
-            "& $checkbox_stateIndicator": {
-                "&::before": {
-                    background: (designSystem: DesignSystem): string =>
-                        `url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="${encodeURIComponent(
-                            neutralForegroundToggle(designSystem)
-                        )}" fill-rule="evenodd" clip-rule="evenodd" d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"/></svg>')`,
-                },
-            },
-        },
-    };
-
    private dividerStyleOverrides: ComponentStyleSheet<
        DividerClassNameContract,
        ColorsDesignSystem
@ -531,6 +502,7 @@ class ColorBlocksBase extends React.Component<ColorBlocksProps, ColorBlocksState
    }

    private renderFormComponents(): React.ReactNode {
+        const checkboxId: string = uniqueId();
        return (
            <React.Fragment>
                {this.renderExample(<TextField placeholder="jerry@microsoft.com" />)}
@ -568,11 +540,10 @@ class ColorBlocksBase extends React.Component<ColorBlocksProps, ColorBlocksState
                />
                <FocusSwatch />
                {this.renderExample(
-                    <Checkbox
-                        inputId={uniqueId()}
-                        jssStyleSheet={this.checkboxStyleOverrides}
-                    >
-                        <label slot="label">Checkbox</label>
+                    <Checkbox inputId={checkboxId}>
+                        <Label slot="label" htmlFor={checkboxId}>
+                            Checkbox
+                        </Label>
                    </Checkbox>
                )}
                <Swatch
@ -609,15 +580,22 @@ class ColorBlocksBase extends React.Component<ColorBlocksProps, ColorBlocksState
                    type={SwatchTypes.outline}
                    fillRecipe={backgroundColor}
                    foregroundRecipe={neutralForegroundRest}
-                    outlineRecipe={neutralOutlineRest}
-                    recipeName="neutralOutlineRest"
+                    outlineRecipe={neutralOutlineContrastRest}
+                    recipeName="neutralOutlineContrastRest"
                />
                <Swatch
                    type={SwatchTypes.outline}
                    fillRecipe={backgroundColor}
                    foregroundRecipe={neutralForegroundRest}
-                    outlineRecipe={neutralOutlineHover}
-                    recipeName="neutralOutlineHover"
+                    outlineRecipe={neutralOutlineContrastHover}
+                    recipeName="neutralOutlineContrastHover"
+                />
+                <Swatch
+                    type={SwatchTypes.outline}
+                    fillRecipe={backgroundColor}
+                    foregroundRecipe={neutralForegroundRest}
+                    outlineRecipe={neutralOutlineContrastActive}
+                    recipeName="neutralOutlineContrastActive"
                />
                <FocusSwatch />
                {this.renderExample(
--- a/sites/fast-color-explorer/app/control-pane.tsx
+++ b/sites/fast-color-explorer/app/control-pane.tsx
@ -6,6 +6,7 @@ import {
    elevation,
    ElevationMultiplier,
    height,
+    neutralDividerRest,
    neutralFillInputRest,
    neutralFocus,
    neutralForegroundRest,
@ -13,6 +14,7 @@ import {
 } from "@microsoft/fast-components-styles-msft";
 import manageJss, {
    ComponentStyleSheet,
+    DesignSystem,
    ManagedClasses,
 } from "@microsoft/fast-jss-manager-react";
 import { format, toPx } from "@microsoft/fast-jss-utilities";
@ -139,10 +141,7 @@ const styles: any = (
            color: neutralForegroundRest,
            height: "100%",
            maxWidth: "300px",
-            boxShadow: (config: ColorsDesignSystem): string => {
-                return (elevation(ElevationMultiplier.e7)(undefined as any) as any)
-                    .boxShadow;
-            },
+            borderLeft: `1px solid ${neutralDividerRest(designSystem)}`,
            background: backgroundColor,
        },
    };
@ -342,14 +341,14 @@ class ControlPaneBase extends React.Component<ControlPaneProps, ControlPaneState
    }

    private renderShowOnlyReccomendedBackgroundsInput(): JSX.Element {
-        const id: string = "showOnlyReccomendedBackgrounds";
+        const id: string = "showOnlyRecommendedBackgrounds";
        return (
            <React.Fragment>
                <div style={{ marginBottom: "12px" }}>
                    <Checkbox
                        checked={this.props.showOnlyRecommendedBackgrounds}
                        inputId={id}
-                        onChange={this.handleReccomendedBackgroundsChange}
+                        onChange={this.handleRecommendedBackgroundsChange}
                    >
                        <Label slot="label" htmlFor={id}>
                            Show recommended backgrounds only
@ -360,7 +359,7 @@ class ControlPaneBase extends React.Component<ControlPaneProps, ControlPaneState
        );
    }

-    private handleReccomendedBackgroundsChange = (
+    private handleRecommendedBackgroundsChange = (
        e: React.ChangeEvent<HTMLInputElement>
    ): void => {
        this.props.setShowOnlyRecommendedBackgrounds(