diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 6052c2ad71567b..61d1f210199a60 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -105,6 +105,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               style={
                 Object {
                   "background": "#f00",
+                  "color": "#000",
                 }
               }
             >
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 5627138fcc2123..fa39c5ea7f13c9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,7 @@
 
 ### Bug Fix
 
+-   Improve accessibility and visibility in `ColorPallete` ([#36925](https://github.com/WordPress/gutenberg/pull/36925))
 -   Fixed spacing between `BaseControl` fields and help text within the `ToolsPanel` ([#36334](https://github.com/WordPress/gutenberg/pull/36334))
 -   Replaced hardcoded blue in `ColorPicker` with UI theme color ([#36153](https://github.com/WordPress/gutenberg/pull/36153)).
 -   Fixed empty `ToolsPanel` height by correcting menu button line-height ([#36895](https://github.com/WordPress/gutenberg/pull/36895)).
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index 7052098d115c7a..64778a449f2c2d 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -35,6 +35,7 @@ function SinglePalette( {
 	const colorOptions = useMemo( () => {
 		return map( colors, ( { color, name } ) => {
 			const colordColor = colord( color );
+
 			return (
 				<CircularOptionPicker.Option
 					key={ color }
@@ -133,6 +134,8 @@ export default function ColorPalette( {
 		/>
 	);
 
+	const colordColor = colord( value );
+
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
@@ -151,7 +154,14 @@ export default function ColorPalette( {
 							aria-haspopup="true"
 							onClick={ onToggle }
 							aria-label={ __( 'Custom color picker' ) }
-							style={ { background: value } }
+							style={ {
+								background: value,
+								color:
+									colordColor.contrast() >
+									colordColor.contrast( '#000' )
+										? '#fff'
+										: '#000',
+							} }
 						>
 							{ value }
 						</button>
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 3345a8103eea0d..9f03c8c399da8b 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -1,7 +1,7 @@
 .components-color-palette__custom-color {
+	position: relative;
 	border: none;
 	background: none;
-	outline: 0;
 	display: block;
 	border-radius: $radius-block-ui;
 	height: $grid-unit-60;
@@ -15,6 +15,15 @@
 	box-sizing: border-box;
 	color: $white;
 	cursor: pointer;
+	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+	// Show a thin outline in Windows high contrast mode.
+	outline: 1px solid transparent;
+
+	&:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		// Show a outline in Windows high contrast mode.
+		outline-width: 2px;
+	}
 }
 
 .components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 270ed6cdcb8a74..e2c6b1b5b08354 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -17,6 +17,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
   style={
     Object {
       "background": "#f00",
+      "color": "#000",
     }
   }
 >
@@ -44,6 +45,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
       style={
         Object {
           "background": "#f00",
+          "color": "#000",
         }
       }
     >
@@ -196,6 +198,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               style={
                 Object {
                   "background": "#f00",
+                  "color": "#000",
                 }
               }
             >