[RNMobile] Add Contrast Checker to Text-Based Blocks

packages/base-styles/_colors.native.scss

@@ -80,6 +80,9 @@ $gray-80: #2c3338;
 $gray-90: #1d2327;
 $gray-100: #101517;
 
+$yellow-30: #deb100;
+$yellow-50: #9d6e00;
+
 // neutral (light) - black is a base color in light mode
 $light-primary: #000d; //rgba(0, 0, 0, 0.87);
 $light-secondary: #0009; //rgba(0, 0, 0, 0.6);

packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -14,7 +14,11 @@ import { useMemo } from '@wordpress/element';
  */
 import { blockSettingsScreens } from '../block-settings';
 
-export default function PanelColorGradientSettings( { settings, title } ) {
+export default function PanelColorGradientSettings( {
+	settings,
+	title,
+	children,
+} ) {
 	const navigation = useNavigation();
 
 	const mappedSettings = useMemo( () => {
@@ -46,5 +50,10 @@ export default function PanelColorGradientSettings( { settings, title } ) {
 		);
 	}, [ settings ] );
 
-	return <PanelBody title={ title }>{ mappedSettings }</PanelBody>;
+	return (
+		<>
+			<PanelBody title={ title }>{ mappedSettings }</PanelBody>
+			<PanelBody>{ children }</PanelBody>
+		</>
+	);
 }

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

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
+
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { Icon, warning } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+extend( [ namesPlugin, a11yPlugin ] );
+
+function ContrastCheckerMessage( {
+	colordBackgroundColor,
+	colordTextColor,
+	backgroundColor,
+	textColor,
+	msgStyle,
+} ) {
+	const msg =
+		colordBackgroundColor.brightness() < colordTextColor.brightness()
+			? __(
+					'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
+			  )
+			: __(
+					'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+			  );
+
+	// Note: The `Notice` component can speak messages via its `spokenMessage`
+	// prop, but the contrast checker requires granular control over when the
+	// announcements are made. Notably, the message will be re-announced if a
+	// new color combination is selected and the contrast is still insufficient.
+	useEffect( () => {
+		speak( __( 'This color combination may be hard for people to read.' ) );
+	}, [ backgroundColor, textColor ] );
+
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'block-editor-contrast-checker__icon' ],
+		styles[ 'block-editor-contrast-checker__icon-dark' ]
+	);
+
+	return (
+		<View style={ styles[ 'block-editor-contrast-checker' ] }>
+			<Icon style={ iconStyle } icon={ warning } />
+			<Text style={ msgStyle }>{ msg }</Text>
+		</View>
+	);
+}
+
+function ContrastChecker( {
+	backgroundColor,
+	fallbackBackgroundColor,
+	fallbackTextColor,
+	fontSize, // font size value in pixels
+	isLargeText,
+	textColor,
+} ) {
+	const msgStyle = usePreferredColorSchemeStyle(
+		styles[ 'block-editor-contrast-checker__notice' ],
+		styles[ 'block-editor-contrast-checker__notice-dark' ]
+	);
+
+	if (
+		! ( backgroundColor || fallbackBackgroundColor ) ||
+		! ( textColor || fallbackTextColor )
+	) {
+		return null;
+	}
+
+	const colordBackgroundColor = colord(
+		backgroundColor || fallbackBackgroundColor
+	);
+	const colordTextColor = colord( textColor || fallbackTextColor );
+
+	const hasTransparency =
+		colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
+
+	if (
+		hasTransparency ||
+		colordTextColor.isReadable( colordBackgroundColor, {
+			level: 'AA',
+			size:
+				isLargeText || ( isLargeText !== false && fontSize >= 24 )
+					? 'large'
+					: 'small',
+		} )
+	) {
+		return null;
+	}
+
+	return (
+		<ContrastCheckerMessage
+			backgroundColor={ backgroundColor }
+			textColor={ textColor }
+			colordBackgroundColor={ colordBackgroundColor }
+			colordTextColor={ colordTextColor }
+			msgStyle={ msgStyle }
+		/>
+	);
+}
+
+export default ContrastChecker;

packages/block-editor/src/components/contrast-checker/style.native.scss

@@ -0,0 +1,26 @@
+.block-editor-contrast-checker {
+	flex-direction: row;
+	align-items: center;
+	padding: 8px 0;
+	justify-content: space-between;
+}
+
+.block-editor-contrast-checker__notice {
+	font-size: 11px;
+	font-weight: 500;
+	color: $yellow-50;
+	flex: 1;
+}
+
+.block-editor-contrast-checker__notice-dark {
+	color: $yellow-30;
+}
+
+.block-editor-contrast-checker__icon {
+	color: $yellow-50;
+	margin-right: 5px;
+}
+
+.block-editor-contrast-checker__icon-dark {
+	color: $yellow-30;
+}

packages/block-editor/src/components/index.native.js

@@ -54,6 +54,7 @@ export { default as __experimentalPanelColorGradientSettings } from './colors-gr
 export { default as useSetting } from './use-setting';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
 export { default as Warning } from './warning';
+export { default as ContrastChecker } from './contrast-checker';
 
 export {
 	BottomSheetSettings,

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

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useGlobalStyles } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
+import ContrastChecker from '../components/contrast-checker';
+import InspectorControls from '../components/inspector-controls';
+
+const ColorPanel = ( { settings } ) => {
+	const globalStyles = useGlobalStyles();
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedTextColor, setDetectedTextColor ] = useState();
+
+	const { baseGlobalStyles } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			baseGlobalStyles: getSettings()
+				?.__experimentalGlobalStylesBaseStyles?.color,
+		};
+	} );
+
+	useEffect( () => {
+		// The following logic is used to determine current text/background colors:
+		// 1. The globalStyles object is queried to determine whether a color has been
+		// set via a block's settings.
+		// 2. If a block-based theme is in use and no globalStyles exist, the theme's
+		// default/base colors are used.
+		// 3. If no globalStyles exist and a theme isn't block-based, there is no way
+		// to determine the default text/background color and the checker won't run.
+		const textColor = globalStyles?.color || baseGlobalStyles?.text;
+		const backgroundColor =
+			globalStyles?.backgroundColor || baseGlobalStyles?.background;
+
+		setDetectedTextColor( textColor );
+		setDetectedBackgroundColor( backgroundColor );
+	}, [ globalStyles, baseGlobalStyles ] );
+
+	return (
+		<InspectorControls>
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				initialOpen={ false }
+				settings={ settings }
+			>
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedTextColor }
+				/>
+			</PanelColorGradientSettings>
+		</InspectorControls>
+	);
+};
+
+export default ColorPanel;