diff --git a/package-lock.json b/package-lock.json index 94a60889e63cc..b55e9ee2e5cee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54517,7 +54517,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "diff": "^4.0.2", "dom-scroll-into-view": "^1.2.1", @@ -54612,7 +54612,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "escape-html": "^1.0.3", "fast-average-color": "^9.1.1", "fast-deep-equal": "^3.1.3", @@ -54680,7 +54680,7 @@ "@wordpress/private-apis": "file:../private-apis", "@wordpress/shortcode": "file:../shortcode", "change-case": "^4.1.2", - "colord": "^2.7.0", + "colord": "^2.9.3", "fast-deep-equal": "^3.1.3", "hpq": "^1.3.0", "is-plain-object": "^5.0.0", @@ -54777,7 +54777,7 @@ "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "date-fns": "^2.28.0", "deepmerge": "^4.3.0", "dom-scroll-into-view": "^1.2.1", @@ -55320,7 +55320,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.9.2", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", "is-plain-object": "^5.0.0", @@ -69985,7 +69985,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "diff": "^4.0.2", "dom-scroll-into-view": "^1.2.1", @@ -70053,7 +70053,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "escape-html": "^1.0.3", "fast-average-color": "^9.1.1", "fast-deep-equal": "^3.1.3", @@ -70100,7 +70100,7 @@ "@wordpress/private-apis": "file:../private-apis", "@wordpress/shortcode": "file:../shortcode", "change-case": "^4.1.2", - "colord": "^2.7.0", + "colord": "^2.9.3", "fast-deep-equal": "^3.1.3", "hpq": "^1.3.0", "is-plain-object": "^5.0.0", @@ -70172,7 +70172,7 @@ "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "date-fns": "^2.28.0", "deepmerge": "^4.3.0", "dom-scroll-into-view": "^1.2.1", @@ -70555,7 +70555,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.9.2", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", "is-plain-object": "^5.0.0", diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index b53b86140f5a3..e3ff07d4d705b 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- Added option to allow switching between AA/AAA color-constrast checks ([41363](https://github.com/WordPress/gutenberg/pull/41363)). + ## 12.15.0 (2023-11-29) ## 12.14.0 (2023-11-16) diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index ec17341369382..295af6572126c 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -66,7 +66,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "diff": "^4.0.2", "dom-scroll-into-view": "^1.2.1", diff --git a/packages/block-editor/src/components/contrast-checker/index.js b/packages/block-editor/src/components/contrast-checker/index.js index 98b4a6fb1afdf..4d9d1d312358a 100644 --- a/packages/block-editor/src/components/contrast-checker/index.js +++ b/packages/block-editor/src/components/contrast-checker/index.js @@ -11,6 +11,8 @@ import { colord, extend } from 'colord'; import { __, sprintf } from '@wordpress/i18n'; import { Notice } from '@wordpress/components'; import { speak } from '@wordpress/a11y'; +import { useSelect } from '@wordpress/data'; +import { store as preferencesStore } from '@wordpress/preferences'; extend( [ namesPlugin, a11yPlugin ] ); @@ -27,6 +29,16 @@ function ContrastChecker( { } ) { const currentBackgroundColor = backgroundColor || fallbackBackgroundColor; + const { strictContrastCheck } = useSelect( + ( select ) => ( { + strictContrastCheck: select( preferencesStore ).get( + 'core/edit-post', + 'strictColorContrastChecks' + ), + } ), + [] + ); + // Must have a background color. if ( ! currentBackgroundColor ) { return null; @@ -52,9 +64,9 @@ function ContrastChecker( { ]; const colordBackgroundColor = colord( currentBackgroundColor ); const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1; - const backgroundColorBrightness = colordBackgroundColor.brightness(); + const backgroundColorLuminance = colordBackgroundColor.luminance(); const isReadableOptions = { - level: 'AA', + level: strictContrastCheck ? 'AAA' : 'AA', size: isLargeText || ( isLargeText !== false && fontSize >= 24 ) ? 'large' @@ -82,7 +94,7 @@ function ContrastChecker( { continue; } message = - backgroundColorBrightness < colordTextColor.brightness() + backgroundColorLuminance < colordTextColor.luminance() ? sprintf( // translators: %s is a type of text color, e.g., "text color" or "link color". __( diff --git a/packages/block-library/package.json b/packages/block-library/package.json index f989e586ec7b8..7c325dcc4bde1 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -63,7 +63,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "escape-html": "^1.0.3", "fast-average-color": "^9.1.1", "fast-deep-equal": "^3.1.3", diff --git a/packages/blocks/package.json b/packages/blocks/package.json index 961cb338d7337..b1a52be00c644 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -44,7 +44,7 @@ "@wordpress/private-apis": "file:../private-apis", "@wordpress/shortcode": "file:../shortcode", "change-case": "^4.1.2", - "colord": "^2.7.0", + "colord": "^2.9.3", "fast-deep-equal": "^3.1.3", "hpq": "^1.3.0", "is-plain-object": "^5.0.0", diff --git a/packages/components/package.json b/packages/components/package.json index 25ddcf603fb32..bf7bb23bd5364 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -62,7 +62,7 @@ "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "date-fns": "^2.28.0", "deepmerge": "^4.3.0", "dom-scroll-into-view": "^1.2.1", diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index c08dda81f8e59..b7e5d167a16f7 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; import { useSelect, useDispatch } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; @@ -76,6 +76,10 @@ export default function EditPostPreferencesModal() { closeGeneralSidebar(); }; + const colorContrastCheckAAA = useSelect( ( select ) => { + const { isFeatureActive } = select( editPostStore ); + return isFeatureActive( 'strictColorContrastChecks' ); + }, [] ); const sections = useMemo( () => [ { @@ -152,6 +156,14 @@ export default function EditPostPreferencesModal() { label={ __( 'Display block breadcrumbs' ) } /> ) } + ), diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index fe967eeeed337..1d232a59834a5 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -58,6 +58,7 @@ export function initializeEditor( showIconLabels: false, showListViewByDefault: false, themeStyles: true, + strictColorContrastChecks: false, welcomeGuide: true, welcomeGuideTemplate: true, } ); diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 2ff4f10c084a8..bd22c6b825935 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -69,7 +69,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.9.2", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", "is-plain-object": "^5.0.0",