diff --git a/core-blocks/button/edit.js b/core-blocks/button/edit.js
index ea1cce634930bc..6e9677d16f152d 100644
--- a/core-blocks/button/edit.js
+++ b/core-blocks/button/edit.js
@@ -121,7 +121,6 @@ class ButtonEdit extends Component {
 									value: backgroundColor.value,
 									onChange: setBackgroundColor,
 									label: __( 'Background Color' ),
-									// translators: %s: The name of the color e.g: "vivid red" or color hex code if name is not available e.g: "#f00".
 									colorIndicatorAriaLabel: __( '(current background color: %s)' ),
 								},
 								{
diff --git a/editor/components/color-palette/control.js b/editor/components/color-palette/control.js
index 08a0d03a9b6ec8..5863a5f9e605f4 100644
--- a/editor/components/color-palette/control.js
+++ b/editor/components/color-palette/control.js
@@ -3,7 +3,7 @@
  */
 import { BaseControl, ColorIndicator } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
-import { sprintf } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -13,12 +13,12 @@ import ColorPalette from './';
 import withColorContext from './with-color-context';
 import { getColorName } from '../colors';
 
-const ColorPaletteControl = withColorContext( ( { label, value, onChange, colorIndicatorAriaLabel, colors } ) => {
-	let ariaLabel;
-	if ( colorIndicatorAriaLabel ) {
-		const colorName = getColorName( colors, value );
-		ariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );
-	}
+// translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
+const colorIndicatorAriaLabel = __( '(current %s: %s)' );
+
+const ColorPaletteControl = withColorContext( ( { label, value, onChange, colors } ) => {
+	const colorName = getColorName( colors, value );
+	const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
 
 	const labelElement = (
 		<Fragment>
diff --git a/editor/components/panel-color-settings/index.js b/editor/components/panel-color-settings/index.js
index 95f90410c122dd..736bcf7e5a3904 100644
--- a/editor/components/panel-color-settings/index.js
+++ b/editor/components/panel-color-settings/index.js
@@ -8,7 +8,7 @@ import { omit } from 'lodash';
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
 import { ifCondition, compose } from '@wordpress/compose';
-import { sprintf } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -18,17 +18,17 @@ import ColorPaletteControl from '../color-palette/control';
 import withColorContext from '../color-palette/with-color-context';
 import { getColorName } from '../colors';
 
+// translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
+const colorIndicatorAriaLabel = __( '(current %s: %s)' );
+
 const renderColorIndicators = ( colorSettings, colors ) => {
-	return colorSettings.map( ( { value, colorIndicatorAriaLabel }, index ) => {
+	return colorSettings.map( ( { value, label }, index ) => {
 		if ( ! value ) {
 			return null;
 		}
 
-		let ariaLabel;
-		if ( colorIndicatorAriaLabel ) {
-			const colorName = getColorName( colors, value );
-			ariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );
-		}
+		const colorName = getColorName( colors, value );
+		const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
 
 		return (
 			<ColorIndicator