diff --git a/front_end/color_picker/Spectrum.js b/front_end/color_picker/Spectrum.js
index 65d2b02..e0ede60 100644
--- a/front_end/color_picker/Spectrum.js
+++ b/front_end/color_picker/Spectrum.js
@@ -317,6 +317,8 @@
       const animationDelay = animate ? i * 100 / palette.colors.length : 0;
       const colorElement = this._createPaletteColor(palette.colors[i], palette.colorNames[i], animationDelay);
       colorElement.tabIndex = -1;
+      UI.ARIAUtils.markAsButton(colorElement);
+      UI.ARIAUtils.setAccessibleName(colorElement, ls`Color ${palette.colors[i]}`);
       colorElement.addEventListener(
           'mousedown',
           this._paletteColorSelected.bind(this, palette.colors[i], palette.colorNames[i], palette.matchUserFormat));
@@ -334,6 +336,7 @@
         shadow = colorElement.createChild('div', 'spectrum-palette-color spectrum-palette-color-shadow');
         shadow.style.background = palette.colors[i];
         colorElement.title = ls`${palette.colors[i]}. Long-click to show alternate shades.`;
+        UI.ARIAUtils.setAccessibleName(colorElement, colorElement.title);
         new UI.LongClickController(colorElement, this._showLightnessShades.bind(this, colorElement, palette.colors[i]));
       }
       this._paletteContainer.appendChild(colorElement);
@@ -393,6 +396,8 @@
     for (let i = shades.length - 1; i >= 0; i--) {
       const shadeElement =
           this._createPaletteColor(shades[i], undefined /* colorName */, i * 200 / shades.length + 100);
+      UI.ARIAUtils.markAsButton(shadeElement);
+      UI.ARIAUtils.setAccessibleName(shadeElement, ls`Color ${shades[i]}`);
       shadeElement.addEventListener('mousedown', this._paletteColorSelected.bind(this, shades[i], shades[i], false));
       this._shadesContainer.appendChild(shadeElement);
     }
diff --git a/front_end/color_picker/color_picker_strings.grdp b/front_end/color_picker/color_picker_strings.grdp
index 4ebd451..dd54a73 100644
--- a/front_end/color_picker/color_picker_strings.grdp
+++ b/front_end/color_picker/color_picker_strings.grdp
@@ -27,6 +27,9 @@
   <message name="IDS_DEVTOOLS_a03d142f9d52eae6793de3951b4b58f9" desc="Screen reader reads this text when palette switcher button receives focus">
     Preview palettes
   </message>
+  <message name="IDS_DEVTOOLS_aba9beb2d259a7cff58a65229dcbbaf4" desc="Aria label which declares hex value of a swatch in the Color Picker">
+    Color <ph name="PALETTE_COLORS_I_">$1s<ex>#969696</ex></ph>
+  </message>
   <message name="IDS_DEVTOOLS_b201b2e7e7a20df48b625f20c2f0933e" desc="Title text content in Spectrum of the Color Picker">
     Color Palettes
   </message>