diff --git a/packages/components/src/color-picker/hue.js b/packages/components/src/color-picker/hue.js
index 214df7e725bdc1..0c97020d89efdc 100644
--- a/packages/components/src/color-picker/hue.js
+++ b/packages/components/src/color-picker/hue.js
@@ -43,6 +43,7 @@ import { TAB } from '@wordpress/keycodes';
  */
 import { calculateHueChange } from './utils';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import VisuallyHidden from '../visually-hidden';
 
 export class Hue extends Component {
 	constructor() {
@@ -157,12 +158,11 @@ export class Hue extends Component {
 							style={ pointerLocation }
 							onKeyDown={ this.preventKeyEvents }
 						/>
-						<p
-							className="components-color-picker__hue-description screen-reader-text"
+						<VisuallyHidden as="p"
 							id={ `components-color-picker__hue-description-${ instanceId }` }
 						>
 							{ __( 'Move the arrow left or right to change hue.' ) }
-						</p>
+						</VisuallyHidden>
 					</div>
 					{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }
 				</div>
diff --git a/packages/components/src/color-picker/inputs.js b/packages/components/src/color-picker/inputs.js
index 39817d13edb74f..42e77a31e71820 100644
--- a/packages/components/src/color-picker/inputs.js
+++ b/packages/components/src/color-picker/inputs.js
@@ -17,6 +17,7 @@ import { pure } from '@wordpress/compose';
  */
 import IconButton from '../icon-button';
 import TextControl from '../text-control';
+import VisuallyHidden from '../visually-hidden';
 import { isValidHex } from './utils';
 
 /* Wrapper for TextControl, only used to handle intermediate state while typing. */
@@ -175,9 +176,9 @@ export class Inputs extends Component {
 		} else if ( this.state.view === 'rgb' ) {
 			return (
 				<fieldset>
-					<legend className="screen-reader-text">
+					<VisuallyHidden as="legend">
 						{ __( 'Color value in RGB' ) }
-					</legend>
+					</VisuallyHidden>
 					<div className="components-color-picker__inputs-fields">
 						<Input
 							source={ this.state.view }
@@ -228,9 +229,9 @@ export class Inputs extends Component {
 		} else if ( this.state.view === 'hsl' ) {
 			return (
 				<fieldset>
-					<legend className="screen-reader-text">
+					<VisuallyHidden as="legend">
 						{ __( 'Color value in HSL' ) }
-					</legend>
+					</VisuallyHidden>
 					<div className="components-color-picker__inputs-fields">
 						<Input
 							source={ this.state.view }
diff --git a/packages/components/src/color-picker/saturation.js b/packages/components/src/color-picker/saturation.js
index 3bdd10bfcdfe28..ae1f80333237d5 100644
--- a/packages/components/src/color-picker/saturation.js
+++ b/packages/components/src/color-picker/saturation.js
@@ -43,6 +43,7 @@ import { compose, pure, withInstanceId } from '@wordpress/compose';
  */
 import { calculateSaturationChange } from './utils';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import VisuallyHidden from '../visually-hidden';
 
 export class Saturation extends Component {
 	constructor( props ) {
@@ -171,13 +172,12 @@ export class Saturation extends Component {
 						style={ pointerLocation }
 						onKeyDown={ this.preventKeyEvents }
 					/>
-					<div
-						className="screen-reader-text"
+					<VisuallyHidden
 						id={ `color-picker-saturation-${ instanceId }` }>
 						{ __(
 							'Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.'
 						) }
-					</div>
+					</VisuallyHidden>
 				</div>
 			</KeyboardShortcuts>
 		);
diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
new file mode 100644
index 00000000000000..19bca39729d4f5
--- /dev/null
+++ b/packages/components/src/color-picker/stories/index.js
@@ -0,0 +1,39 @@
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ColorPicker from '../';
+
+export default { title: 'ColorPicker', component: ColorPicker };
+
+const ColorPickerWithState = ( { ...props } ) => {
+	const [ color, setColor ] = useState( '#f00' );
+	return (
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChangeComplete={ ( value ) => setColor( value.hex ) }
+		/>
+	);
+};
+
+export const _default = () => {
+	return (
+		<ColorPickerWithState
+			disableAlpha
+		/>
+	);
+};
+
+export const alphaEnabled = () => {
+	return (
+		<ColorPickerWithState
+			disableAlpha={ false }
+		/>
+	);
+};
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
index 5d61a24e5ac9e6..a3713f860f3c01 100644
--- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -39,7 +39,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-2"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -99,7 +99,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-2"
               >
                 Move the arrow left or right to change hue.
@@ -213,7 +213,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-4"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -273,7 +273,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-4"
               >
                 Move the arrow left or right to change hue.
@@ -387,7 +387,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-5"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -447,7 +447,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-5"
               >
                 Move the arrow left or right to change hue.
@@ -561,7 +561,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-3"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -621,7 +621,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-3"
               >
                 Move the arrow left or right to change hue.
@@ -735,7 +735,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-1"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -795,7 +795,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-1"
               >
                 Move the arrow left or right to change hue.
@@ -909,7 +909,7 @@ exports[`ColorPicker should render color picker 1`] = `
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-0"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -969,7 +969,7 @@ exports[`ColorPicker should render color picker 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-0"
               >
                 Move the arrow left or right to change hue.