diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/palette.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/palette.js
index 69f584af41556..d60dc13f0105b 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/palette.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/palette.js
@@ -61,7 +61,9 @@ const PaletteArgInput = ({ onValueChange, argValue, renderError }) => {
 
   const palette = astToPalette(argValue);
 
-  return <PalettePicker value={palette} onChange={handleChange} />;
+  return (
+    <PalettePicker value={palette} onChange={handleChange} ariaLabel={strings.getDisplayName()} />
+  );
 };
 
 PaletteArgInput.propTypes = {
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js
index c056e7d1f2281..baa2127b03c3c 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js
@@ -20,6 +20,7 @@ const ShapeArgInput = ({ onValueChange, argValue, typeInstance }) => (
         value={argValue}
         onChange={onValueChange}
         shapes={typeInstance.options.shapes}
+        ariaLabel={typeInstance.displayName}
       />
     </EuiFlexItem>
   </EuiFlexGroup>
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
index de19d3e29221b..bcad4678e0b6a 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
@@ -12,7 +12,7 @@ import { ArgumentStrings } from '../../../i18n';
 
 const { Toggle: strings } = ArgumentStrings;
 
-const ToggleArgInput = ({ onValueChange, argValue, argId, renderError }) => {
+const ToggleArgInput = ({ onValueChange, argValue, argId, renderError, typeInstance }) => {
   const handleChange = () => onValueChange(!argValue);
   if (typeof argValue !== 'boolean') {
     renderError();
@@ -26,6 +26,9 @@ const ToggleArgInput = ({ onValueChange, argValue, argId, renderError }) => {
         checked={argValue}
         onChange={handleChange}
         className="canvasArg__switch"
+        aria-label={typeInstance.displayName}
+        label=""
+        showLabel={false}
       />
     </EuiFormRow>
   );
diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts
index c898db7467b44..d0a9051d7af87 100644
--- a/x-pack/legacy/plugins/canvas/i18n/components.ts
+++ b/x-pack/legacy/plugins/canvas/i18n/components.ts
@@ -912,6 +912,10 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.textStylePicker.styleUnderlineOption', {
         defaultMessage: 'Underline',
       }),
+    getFontColorLabel: () =>
+      i18n.translate('xpack.canvas.textStylePicker.fontColorLabel', {
+        defaultMessage: 'Font Color',
+      }),
   },
   TimePicker: {
     getApplyButtonLabel: () =>
@@ -1007,7 +1011,11 @@ export const ComponentStrings = {
     getUSLetterButtonLabel: () =>
       i18n.translate('xpack.canvas.workpadConfig.USLetterButtonLabel', {
         defaultMessage: 'US Letter',
-        description: 'This is referring to the dimentions of U.S. standard letter paper.',
+        description: 'This is referring to the dimensions of U.S. standard letter paper.',
+      }),
+    getBackgroundColorLabel: () =>
+      i18n.translate('xpack.canvas.workpadConfig.backgroundColorLabel', {
+        defaultMessage: 'Background color',
       }),
   },
   WorkpadCreate: {
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/__snapshots__/color_palette.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/__snapshots__/color_palette.examples.storyshot
index badbf96029f12..8610ed2f1b4a3 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/__snapshots__/color_palette.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/__snapshots__/color_palette.examples.storyshot
@@ -8,6 +8,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
     className="item-grid-row"
   >
     <button
+      aria-label="white"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -34,6 +35,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
       </div>
     </button>
     <button
+      aria-label="#666"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -60,6 +62,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
       </div>
     </button>
     <button
+      aria-label="black"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -86,6 +89,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
       </div>
     </button>
     <button
+      aria-label="#abc"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -112,6 +116,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
       </div>
     </button>
     <button
+      aria-label="#def"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -138,6 +143,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
       </div>
     </button>
     <button
+      aria-label="#abcdef"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -176,6 +182,7 @@ Array [
       className="item-grid-row"
     >
       <button
+        aria-label="white"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -202,6 +209,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#666"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -228,6 +236,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="black"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -254,6 +263,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#abc"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -280,6 +290,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#def"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -306,6 +317,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#abcdef"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -340,6 +352,7 @@ Array [
       className="item-grid-row"
     >
       <button
+        aria-label="white"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -382,6 +395,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#666"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -408,6 +422,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="black"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -434,6 +449,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#abc"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -460,6 +476,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#def"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -486,6 +503,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#abcdef"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -524,6 +542,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
     className="item-grid-row"
   >
     <button
+      aria-label="white"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -550,6 +569,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
       </div>
     </button>
     <button
+      aria-label="#666"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -576,6 +596,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
       </div>
     </button>
     <button
+      aria-label="black"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -602,6 +623,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
       </div>
     </button>
     <button
+      aria-label="#abc"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -628,6 +650,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
       </div>
     </button>
     <button
+      aria-label="#def"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -654,6 +677,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
       </div>
     </button>
     <button
+      aria-label="#abcdef"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -691,6 +715,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
     className="item-grid-row"
   >
     <button
+      aria-label="white"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -733,6 +758,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
       </div>
     </button>
     <button
+      aria-label="#666"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -759,6 +785,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
       </div>
     </button>
     <button
+      aria-label="black"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -785,6 +812,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
       </div>
     </button>
     <button
+      aria-label="#abc"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -815,6 +843,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
     className="item-grid-row"
   >
     <button
+      aria-label="#def"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -841,6 +870,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
       </div>
     </button>
     <button
+      aria-label="#abcdef"
       className="euiLink euiLink--primary canvasColorPalette__dot"
       onClick={[Function]}
       style={
@@ -879,6 +909,7 @@ Array [
       className="item-grid-row"
     >
       <button
+        aria-label="white"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -905,6 +936,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#666"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -931,6 +963,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="black"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -965,6 +998,7 @@ Array [
       className="item-grid-row"
     >
       <button
+        aria-label="white"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -1007,6 +1041,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="#666"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -1033,6 +1068,7 @@ Array [
         </div>
       </button>
       <button
+        aria-label="black"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.tsx b/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.tsx
index 66d389118074b..90f3f8860b4ae 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.tsx
@@ -61,6 +61,7 @@ export const ColorPalette: FunctionComponent<Props> = ({
               key={color}
               onClick={() => !match && onChange(color)}
               className="canvasColorPalette__dot"
+              aria-label={tinycolor(color).toName() || color}
             >
               <ColorDot value={color}>{icon}</ColorDot>
             </EuiLink>
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_picker/__examples__/__snapshots__/color_picker.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/color_picker/__examples__/__snapshots__/color_picker.examples.storyshot
index 6e25ce3d4b0d4..5fbb4ee7d584d 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_picker/__examples__/__snapshots__/color_picker.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/color_picker/__examples__/__snapshots__/color_picker.examples.storyshot
@@ -10,6 +10,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
         className="item-grid-row"
       >
         <button
+          aria-label="white"
           className="euiLink euiLink--primary canvasColorPalette__dot"
           onClick={[Function]}
           style={
@@ -36,6 +37,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
           </div>
         </button>
         <button
+          aria-label="#666"
           className="euiLink euiLink--primary canvasColorPalette__dot"
           onClick={[Function]}
           style={
@@ -62,6 +64,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
           </div>
         </button>
         <button
+          aria-label="black"
           className="euiLink euiLink--primary canvasColorPalette__dot"
           onClick={[Function]}
           style={
@@ -88,6 +91,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
           </div>
         </button>
         <button
+          aria-label="#abc"
           className="euiLink euiLink--primary canvasColorPalette__dot"
           onClick={[Function]}
           style={
@@ -114,6 +118,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
           </div>
         </button>
         <button
+          aria-label="#def"
           className="euiLink euiLink--primary canvasColorPalette__dot"
           onClick={[Function]}
           style={
@@ -140,6 +145,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
           </div>
         </button>
         <button
+          aria-label="#abcdef"
           className="euiLink euiLink--primary canvasColorPalette__dot"
           onClick={[Function]}
           style={
@@ -285,6 +291,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
       className="item-grid-row"
     >
       <button
+        aria-label="white"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -327,6 +334,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
         </div>
       </button>
       <button
+        aria-label="#666"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -353,6 +361,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
         </div>
       </button>
       <button
+        aria-label="black"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -379,6 +388,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
         </div>
       </button>
       <button
+        aria-label="#abc"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -405,6 +415,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
         </div>
       </button>
       <button
+        aria-label="#def"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -431,6 +442,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
         </div>
       </button>
       <button
+        aria-label="#abcdef"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -559,6 +571,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
       className="item-grid-row"
     >
       <button
+        aria-label="white"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -585,6 +598,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
         </div>
       </button>
       <button
+        aria-label="#666"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -611,6 +625,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
         </div>
       </button>
       <button
+        aria-label="black"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -637,6 +652,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
         </div>
       </button>
       <button
+        aria-label="#abc"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -663,6 +679,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
         </div>
       </button>
       <button
+        aria-label="#def"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -689,6 +706,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
         </div>
       </button>
       <button
+        aria-label="#abcdef"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -817,6 +835,7 @@ exports[`Storyshots components/Color/ColorPicker three colors 1`] = `
       className="item-grid-row"
     >
       <button
+        aria-label="white"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -859,6 +878,7 @@ exports[`Storyshots components/Color/ColorPicker three colors 1`] = `
         </div>
       </button>
       <button
+        aria-label="#666"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
@@ -885,6 +905,7 @@ exports[`Storyshots components/Color/ColorPicker three colors 1`] = `
         </div>
       </button>
       <button
+        aria-label="black"
         className="euiLink euiLink--primary canvasColorPalette__dot"
         onClick={[Function]}
         style={
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/__snapshots__/color_picker_popover.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/__snapshots__/color_picker_popover.examples.storyshot
index e852b46a79bc2..178cba0c99e4a 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/__snapshots__/color_picker_popover.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/__snapshots__/color_picker_popover.examples.storyshot
@@ -16,6 +16,7 @@ exports[`Storyshots components/Color/ColorPickerPopover interactive 1`] = `
       className="euiPopover__anchor"
     >
       <button
+        aria-label="Color Picker black"
         className="euiLink euiLink--primary"
         onClick={[Function]}
         style={
@@ -77,6 +78,7 @@ exports[`Storyshots components/Color/ColorPickerPopover six colors 1`] = `
     className="euiPopover__anchor"
   >
     <button
+      aria-label="Color Picker white"
       className="euiLink euiLink--primary"
       onClick={[Function]}
       style={
@@ -121,6 +123,7 @@ exports[`Storyshots components/Color/ColorPickerPopover six colors, value missin
     className="euiPopover__anchor"
   >
     <button
+      aria-label="Color Picker #a1b2c3"
       className="euiLink euiLink--primary"
       onClick={[Function]}
       style={
@@ -165,6 +168,7 @@ exports[`Storyshots components/Color/ColorPickerPopover three colors 1`] = `
     className="euiPopover__anchor"
   >
     <button
+      aria-label="Color Picker white"
       className="euiLink euiLink--primary"
       onClick={[Function]}
       style={
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/color_picker_popover.examples.tsx b/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/color_picker_popover.examples.tsx
index ea6615c9fc6a1..83923d1f0da1f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/color_picker_popover.examples.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/color_picker_popover.examples.tsx
@@ -33,6 +33,7 @@ class Interactive extends React.Component<
           value={this.state.value}
           anchorPosition="downCenter"
           hasButtons={this.state.hasButtons}
+          ariaLabel="Color Picker"
         />
         <p style={{ marginTop: 20 }}>
           <label>
@@ -72,6 +73,7 @@ storiesOf('components/Color/ColorPickerPopover', module)
       anchorPosition="downCenter"
       onChange={action('onChange')}
       colors={THREE_COLORS}
+      ariaLabel="Color Picker"
     />
   ))
   .add('six colors', () => (
@@ -80,6 +82,7 @@ storiesOf('components/Color/ColorPickerPopover', module)
       anchorPosition="downCenter"
       onChange={action('onChange')}
       colors={SIX_COLORS}
+      ariaLabel="Color Picker"
     />
   ))
   .add('six colors, value missing', () => (
@@ -88,6 +91,7 @@ storiesOf('components/Color/ColorPickerPopover', module)
       anchorPosition="downCenter"
       onChange={action('onChange')}
       colors={SIX_COLORS}
+      ariaLabel="Color Picker"
     />
   ))
   .add('interactive', () => <Interactive />, {
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx b/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx
index 9961eba74a19d..95d6144f3e3c3 100644
--- a/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx
@@ -7,18 +7,24 @@
 import { EuiLink, PopoverAnchorPosition } from '@elastic/eui';
 import PropTypes from 'prop-types';
 import React, { FunctionComponent, MouseEvent } from 'react';
+import tinycolor from 'tinycolor2';
 import { ColorDot } from '../color_dot';
 import { ColorPicker, Props as ColorPickerProps } from '../color_picker';
 import { Popover } from '../popover';
 
 export interface Props extends ColorPickerProps {
   anchorPosition: PopoverAnchorPosition;
+  ariaLabel?: string;
 }
 
 export const ColorPickerPopover: FunctionComponent<Props> = (props: Props) => {
-  const { value, anchorPosition, ...rest } = props;
+  const { value, anchorPosition, ariaLabel, ...rest } = props;
   const button = (handleClick: (ev: MouseEvent) => void) => (
-    <EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
+    <EuiLink
+      aria-label={`${ariaLabel} ${tinycolor(value).toName() || value}`}
+      style={{ fontSize: 0 }}
+      onClick={handleClick}
+    >
       <ColorDot value={value} />
     </EuiLink>
   );
diff --git a/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.js b/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.js
index 254d9647e26a7..e5808dd623530 100644
--- a/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.js
+++ b/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.js
@@ -12,9 +12,9 @@ import { Popover } from '../popover';
 import { PaletteSwatch } from '../palette_swatch';
 import { palettes } from '../../../common/lib/palettes';
 
-export const PalettePicker = ({ onChange, value, anchorPosition }) => {
+export const PalettePicker = ({ onChange, value, anchorPosition, ariaLabel }) => {
   const button = handleClick => (
-    <button style={{ width: '100%', height: 16 }} onClick={handleClick}>
+    <button aria-label={ariaLabel} style={{ width: '100%', height: 16 }} onClick={handleClick}>
       <PaletteSwatch colors={value.colors} gradient={value.gradient} />
     </button>
   );
diff --git a/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx b/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
index 970f72da698ba..717ec6d0faecc 100644
--- a/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
@@ -17,12 +17,13 @@ interface Props {
   };
   onChange?: (key: string) => void;
   value?: string;
+  ariaLabel?: string;
 }
 
-export const ShapePickerPopover = ({ shapes, onChange, value }: Props) => {
+export const ShapePickerPopover = ({ shapes, onChange, value, ariaLabel }: Props) => {
   const button = (handleClick: (ev: MouseEvent) => void) => (
     <EuiPanel paddingSize="s" hasShadow={false}>
-      <EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
+      <EuiLink aria-label={ariaLabel} style={{ fontSize: 0 }} onClick={handleClick}>
         <ShapePreview shape={value ? shapes[value] : undefined} />
       </EuiLink>
     </EuiPanel>
diff --git a/x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js b/x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js
index 1a44181475091..179455e15b36e 100644
--- a/x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js
+++ b/x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js
@@ -127,6 +127,7 @@ export const TextStylePicker = ({
             value={color}
             onChange={value => doChange('color', value)}
             colors={colors}
+            ariaLabel={strings.getFontColorLabel()}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx
index 69401c89c79a5..c81f3e78efddd 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx
@@ -6,9 +6,18 @@
 
 import React from 'react';
 import { ColorPickerPopover, Props } from '../color_picker_popover';
+import { ComponentStrings } from '../../../i18n';
+
+const { WorkpadConfig: strings } = ComponentStrings;
 
 export const WorkpadColorPicker = (props: Props) => {
-  return <ColorPickerPopover {...props} hasButtons={true} />;
+  return (
+    <ColorPickerPopover
+      {...props}
+      hasButtons={true}
+      ariaLabel={strings.getBackgroundColorLabel()}
+    />
+  );
 };
 
 WorkpadColorPicker.propTypes = ColorPickerPopover.propTypes;
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/color.js b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/color.js
index 2a47150b4a1b9..8d756dd8111b1 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/color.js
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/color.js
@@ -13,10 +13,15 @@ import { ArgTypesStrings } from '../../../i18n';
 
 const { Color: strings } = ArgTypesStrings;
 
-const ColorArgInput = ({ onValueChange, argValue, workpad }) => (
+const ColorArgInput = ({ onValueChange, argValue, workpad, typeInstance }) => (
   <EuiFlexGroup gutterSize="s">
     <EuiFlexItem grow={false}>
-      <ColorPickerPopover value={argValue} onChange={onValueChange} colors={workpad.colors} />
+      <ColorPickerPopover
+        value={argValue}
+        onChange={onValueChange}
+        colors={workpad.colors}
+        ariaLabel={`${typeInstance.displayName} ${strings.getDisplayName()}`}
+      />
     </EuiFlexItem>
   </EuiFlexGroup>
 );
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
index 2915d3bfef57b..649d11cb2dbab 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -467,6 +467,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
                 className="euiPopover__anchor"
               >
                 <button
+                  aria-label="Border white"
                   className="euiLink euiLink--primary"
                   onClick={[Function]}
                   style={
@@ -956,6 +957,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
               className="euiPopover__anchor"
             >
               <button
+                aria-label="Border black"
                 className="euiLink euiLink--primary"
                 onClick={[Function]}
                 style={
@@ -1457,6 +1459,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
                 className="euiPopover__anchor"
               >
                 <button
+                  aria-label="Border white"
                   className="euiLink euiLink--primary"
                   onClick={[Function]}
                   style={
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.examples.storyshot b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.examples.storyshot
index f8d460a634214..401e7bf1e937d 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.examples.storyshot
@@ -31,6 +31,7 @@ exports[`Storyshots arguments/ContainerStyle simple 1`] = `
         className="euiPopover__anchor"
       >
         <button
+          aria-label="Container style white"
           className="euiLink euiLink--primary"
           onClick={[Function]}
           style={
@@ -93,6 +94,7 @@ exports[`Storyshots arguments/ContainerStyle/components simple template 1`] = `
         className="euiPopover__anchor"
       >
         <button
+          aria-label="Container style white"
           className="euiLink euiLink--primary"
           onClick={[Function]}
           style={
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/border_form.tsx b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/border_form.tsx
index 803fd83adb8ef..929eaeb02f3c7 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/border_form.tsx
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/border_form.tsx
@@ -115,6 +115,7 @@ export const BorderForm: FunctionComponent<Props> = ({
             onChange={borderColorChange}
             colors={colors}
             anchorPosition="upCenter"
+            ariaLabel={strings.getBorderTitle()}
           />
         </EuiFormRow>
       </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/simple_template.tsx b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/simple_template.tsx
index 11e000e08481f..cb7a5d606c7d9 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/simple_template.tsx
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/simple_template.tsx
@@ -8,6 +8,9 @@ import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { ColorPickerPopover } from '../../../components/color_picker_popover';
 import { CanvasWorkpad } from '../.../../../../../types';
+import { ArgTypesStrings } from '../../../../i18n';
+
+const { ContainerStyle: strings } = ArgTypesStrings;
 
 export interface Arguments {
   backgroundColor: string;
@@ -27,6 +30,7 @@ export const SimpleTemplate: FunctionComponent<Props> = ({ getArgValue, setArgVa
       onChange={color => setArgValue('backgroundColor', color)}
       colors={workpad.colors}
       anchorPosition="leftCenter"
+      ariaLabel={strings.getDisplayName()}
     />
   </div>
 );
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
index e05c48b97f54a..ba1f4305167a4 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
@@ -76,6 +76,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
               colors={workpad.colors}
               onChange={val => handleChange('color', val)}
               value={color}
+              ariaLabel={strings.getColorLabel()}
             />
           </EuiFlexItem>
           <EuiFlexItem>