diff --git a/modules/apps/layout/layout-js-components-web/src/main/resources/META-INF/resources/js/components/color_picker/ColorPicker.tsx b/modules/apps/layout/layout-js-components-web/src/main/resources/META-INF/resources/js/components/color_picker/ColorPicker.tsx
index b01abbb3a316ad..7e770cec4eaae3 100644
--- a/modules/apps/layout/layout-js-components-web/src/main/resources/META-INF/resources/js/components/color_picker/ColorPicker.tsx
+++ b/modules/apps/layout/layout-js-components-web/src/main/resources/META-INF/resources/js/components/color_picker/ColorPicker.tsx
@@ -270,7 +270,9 @@ export default function ColorPicker({
 
 	return (
 		<ClayForm.Group aria-label={field.label} small>
-			{showLabel ? <label>{field.label}</label> : null}
+			<label className={classNames({'sr-only': !showLabel})}>
+				{field.label}
+			</label>
 
 			<div
 				className={classNames('layout__color-picker', {