diff --git a/packages/edit-site/src/components/global-styles/screen-color-element.js b/packages/edit-site/src/components/global-styles/screen-color-element.js
index 79e7f1c85e66d8..88ab67ed26b46a 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-element.js
@@ -16,7 +16,9 @@ import {
 
 const elements = {
 	text: {
-		description: __( '' ),
+		description: __(
+			'Set the default color used for text across the site.'
+		),
 		title: __( 'Text' ),
 	},
 	link: {
@@ -44,36 +46,56 @@ function ScreenColorElement( { name, element } ) {
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+	let [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+	const [ isTextEnabled ] = useSetting( 'color.text', name );
+
+	let textColorElementSelector = 'elements.' + element + '.color.text';
+	const backgroundColorElementSelector =
+		'elements.' + element + '.color.background';
+
+	let hasElementColor = false;
 
-	let hasElementColor =
-		supports.includes( 'color' ) &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+	switch ( element ) {
+		case 'button':
+			hasElementColor =
+				supports.includes( 'buttonColor' ) &&
+				isBackgroundEnabled &&
+				( solids.length > 0 || areCustomSolidsEnabled );
+			break;
+		case 'text':
+			hasElementColor =
+				supports.includes( 'color' ) &&
+				isTextEnabled &&
+				( solids.length > 0 || areCustomSolidsEnabled );
+			textColorElementSelector = 'color.text';
+			isBackgroundEnabled = false;
+			break;
 
-	if ( supports.includes( 'buttonColor' ) ) {
-		hasElementColor =
-			supports.includes( 'buttonColor' ) &&
-			isBackgroundEnabled &&
-			( solids.length > 0 || areCustomSolidsEnabled );
+		default:
+			hasElementColor =
+				supports.includes( 'color' ) &&
+				( solids.length > 0 || areCustomSolidsEnabled );
+			break;
 	}
 
 	const [ elementTextColor, setElementTextColor ] = useStyle(
-		'elements.' + element + '.color.text',
+		textColorElementSelector,
 		name
 	);
 
 	const [ userElementTextColor ] = useStyle(
-		'elements.' + element + '.color.text',
+		textColorElementSelector,
 		name,
 		'user'
 	);
 
 	const [ elementBgColor, setElementBgColor ] = useStyle(
-		'elements.' + element + '.color.background',
+		backgroundColorElementSelector,
 		name
 	);
+
 	const [ userElementBgColor ] = useStyle(
-		'elements.' + element + '.color.background',
+		backgroundColorElementSelector,
 		name,
 		'user'
 	);
@@ -103,22 +125,25 @@ function ScreenColorElement( { name, element } ) {
 					onColorChange={ setElementTextColor }
 					clearable={ elementTextColor === userElementTextColor }
 				/>
-
-				<h4>{ __( 'Background color' ) }</h4>
-
-				<ColorGradientControl
-					className="edit-site-screen-element-color__control"
-					colors={ colorsPerOrigin }
-					disableCustomColors={ ! areCustomSolidsEnabled }
-					__experimentalHasMultipleOrigins
-					showTitle={ false }
-					enableAlpha
-					__experimentalIsRenderedInSidebar
-					colorValue={ elementBgColor }
-					onColorChange={ setElementBgColor }
-					clearable={ elementBgColor === userElementBgColor }
-				/>
 			</div>
+			{ isBackgroundEnabled && (
+				<div className="edit-site-global-styles-screen-element-color">
+					<h4>{ __( 'Background color' ) }</h4>
+
+					<ColorGradientControl
+						className="edit-site-screen-element-color__control"
+						colors={ colorsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						colorValue={ elementBgColor }
+						onColorChange={ setElementBgColor }
+						clearable={ elementBgColor === userElementBgColor }
+					/>
+				</div>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
deleted file mode 100644
index 4c212adfe33475..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
-
-function ScreenTextColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const [ color, setColor ] = useStyle( 'color.text', name );
-	const [ userColor ] = useStyle( 'color.text', name, 'user' );
-
-	if ( ! hasTextColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Text' ) }
-				description={ __(
-					'Set the default color used for text across the site.'
-				) }
-			/>
-			<ColorGradientControl
-				className="edit-site-screen-text-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ color }
-				onColorChange={ setColor }
-				clearable={ color === userColor }
-			/>
-		</>
-	);
-}
-
-export default ScreenTextColor;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 2e5626b789d624..74d1130e683396 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -19,7 +19,6 @@ import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
 import ScreenColorElement from './screen-color-element';
-import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenHeadingColor from './screen-heading-color';
 import ScreenLayout from './screen-layout';
@@ -95,7 +94,7 @@ function ContextScreens( { name } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } />
+				<ScreenColorElement name={ name } element="text" />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>