enableContrastChecking if enableAlpha is true

only show the transparency warning where the text color alpha is < 1
ensure the readability/contrast warning takes precedence over the transparency warning

packages/block-editor/src/components/contrast-checker/index.js

@@ -24,9 +24,7 @@ function ContrastCheckerMessage( {
 } ) {
 	let msg = '';
 	if ( shouldShowTransparencyWarning ) {
-		msg = __(
-			'Transparent background and/or text colors may be hard for people to read.'
-		);
+		msg = __( 'Transparent text may be hard for people to read.' );
 	} else {
 		msg =
 			colordBackgroundColor.brightness() < colordTextColor.brightness()
@@ -44,7 +42,7 @@ function ContrastCheckerMessage( {
 	// new color combination is selected and the contrast is still insufficient.
 	useEffect( () => {
 		const speakMsg = shouldShowTransparencyWarning
-			? __( 'Transparent colors may be hard for people to read.' )
+			? __( 'Transparent text may be hard for people to read.' )
 			: __( 'This color combination may be hard for people to read.' );
 		speak( speakMsg );
 	}, [ backgroundColor, textColor ] );
@@ -81,8 +79,10 @@ function ContrastChecker( {
 		backgroundColor || fallbackBackgroundColor
 	);
 	const colordTextColor = colord( textColor || fallbackTextColor );
+	const textColorHasTransparency = colordTextColor.alpha() < 1;
+	const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
 	const hasTransparency =
-		colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
+		textColorHasTransparency || backgroundColorHasTransparency;
 	const isReadable = colordTextColor.isReadable( colordBackgroundColor, {
 		level: 'AA',
 		size:
@@ -91,23 +91,34 @@ function ContrastChecker( {
 				: 'small',
 	} );
 
-	// Don't show the  message if the text is readable and there's no transparency,
-	// or if there is transparency and the alpha checker is disabled.
-	if (
-		( isReadable && ! hasTransparency ) ||
-		( hasTransparency && ! __experimentalEnableAlphaChecker )
-	) {
+	// Don't show the message if the text is readable AND there's no transparency.
+	// This is the default.
+	if ( isReadable && ! hasTransparency ) {
 		return null;
 	}
 
+	if ( hasTransparency ) {
+		if (
+			// If there's transparency, don't show the message if the alpha checker is disabled.
+			! __experimentalEnableAlphaChecker ||
+			// If the alpha checker is enabled, we only show the warning if the text has transparency.
+			( isReadable && ! textColorHasTransparency )
+		) {
+			return null;
+		}
+	}
+
 	return (
 		<ContrastCheckerMessage
 			backgroundColor={ backgroundColor }
 			textColor={ textColor }
 			colordBackgroundColor={ colordBackgroundColor }
 			colordTextColor={ colordTextColor }
-			// Flag to warn about transparency only if the text is otherwise readable according to colord.
-			shouldShowTransparencyWarning={ isReadable && hasTransparency }
+			// Flag to warn about transparency only if the text is otherwise readable according to colord
+			// to ensure the readability warnings take precedence.
+			shouldShowTransparencyWarning={
+				isReadable && textColorHasTransparency
+			}
 		/>
 	);
 }

packages/block-editor/src/components/contrast-checker/test/index.js

@@ -274,25 +274,25 @@ describe( 'ContrastChecker', () => {
 	} );
 
 	// __experimentalEnableAlphaChecker tests
-	test( 'should render component when the colors meet AA WCAG guidelines but the text color has alpha transparency with alpha checker enabled.', () => {
+	test( 'should render component when the colors meet AA WCAG guidelines but the text color only has alpha transparency with alpha checker enabled.', () => {
 		const wrapper = mount(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
-				textColor={ textColor }
+				backgroundColor={ backgroundColor }
+				textColor={ 'rgba(0,0,0,0.9)' }
 				isLargeText={ isLargeText }
 				__experimentalEnableAlphaChecker={ true }
 			/>
 		);
 
 		expect( speak ).toHaveBeenCalledWith(
-			'Transparent colors may be hard for people to read.'
+			'Transparent text may be hard for people to read.'
 		);
 		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'Transparent background and/or text colors may be hard for people to read.'
+			'Transparent text may be hard for people to read.'
 		);
 	} );
 
-	test( 'should render component when the colors meet AA WCAG guidelines but the background color has alpha transparency with alpha checker enabled.', () => {
+	test( 'should render null when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
 		const wrapper = mount(
 			<ContrastChecker
 				backgroundColor={ 'rgba(255,255,255,0.7)' }
@@ -302,12 +302,8 @@ describe( 'ContrastChecker', () => {
 			/>
 		);
 
-		expect( speak ).toHaveBeenCalledWith(
-			'Transparent colors may be hard for people to read.'
-		);
-		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'Transparent background and/or text colors may be hard for people to read.'
-		);
+		expect( speak ).not.toHaveBeenCalled();
+		expect( wrapper.html() ).toBeNull();
 	} );
 
 	test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
@@ -321,10 +317,10 @@ describe( 'ContrastChecker', () => {
 		);
 
 		expect( speak ).toHaveBeenCalledWith(
-			'Transparent colors may be hard for people to read.'
+			'Transparent text may be hard for people to read.'
 		);
 		expect( wrapper.find( Notice ).children().text() ).toBe(
-			'Transparent background and/or text colors may be hard for people to read.'
+			'Transparent text may be hard for people to read.'
 		);
 	} );
 } );

packages/block-editor/src/hooks/color-panel.js

@@ -22,7 +22,6 @@ export default function ColorPanel( {
 	clientId,
 	enableContrastChecking = true,
 	showTitle = true,
-	enableAlphaChecking = false,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
@@ -70,7 +69,7 @@ export default function ColorPanel( {
 					<ContrastChecker
 						backgroundColor={ detectedBackgroundColor }
 						textColor={ detectedColor }
-						__experimentalEnableAlphaChecker={ enableAlphaChecking }
+						__experimentalEnableAlphaChecker={ enableAlpha }
 					/>
 				) }
 			</PanelColorGradientSettings>

packages/block-editor/src/hooks/color.js

@@ -377,7 +377,6 @@ export function ColorEdit( props ) {
 	return (
 		<ColorPanel
 			enableContrastChecking={ enableContrastChecking }
-			enableAlphaChecking={ enableContrastChecking }
 			clientId={ props.clientId }
 			enableAlpha={ true }
 			settings={ [