Twenty Twenty-Four: Low button color contrast in the Ember theme style

[Anlino]

When the ​Ember theme style is active in Twenty Twenty-Four, the color contrast of the buttons doesn't pass the WCAG AA contrast ratio for normal text.

Background color: rgb(255, 60, 0)
Text color: rgb(244, 240, 230)
Default font size: 14.4px

Color contrast: 3.12:1
Required color contrast for AA: 4.5:1

[Anlino]

Screenshot of the button block when the Ember theme style is active.

[poena]

Thank you for reporting this. I don't know how this was missed. I see that the variation was added after the accessibility review.

Pinging @richtabor @beafialho @onemaggie @luminuu to see if you have any thoughts on how to resolve this.

• The bundled themes are required to pass the accessibility-ready requirements.
• Replacing the color now will affect live websites.

[richtabor]

I don't know how this was missed.

Likely because the editor did not flag it: ​https://cln.sh/GQbwxWMQ

Arguably, making it color makes it less readable, even if contrast is technically proper: ​https://cln.sh/r206NCFC

[poena]

@richtabor It is not only the button, but any other elements like links that use the same color.

[richtabor]

Let's make the base color #f9f8f5 and the contrast-2 color value #d73301. This will give the contrast ratio of 4.53 (AA) while maintaining the spirit of the design. ​https://cln.sh/XbQXdHtq

It won't change people's sites if they've selected the Ember theme style variation, as the nature of a theme style variation requires it to be re-applied when the source JSON is changed, to take effect.

Trac ticket:
https://core.trac.wordpress.org/ticket/60459

[poena]

Testing Instructions

Activate the theme and go to Appearance > Editor.
Open the Site Editor, for example by clicking on the current template.
Reset any existing styles: Open the Styles sidebar, open the More options, reset styles.
In the Styles sidebar, select "Browse styles". Select Ember. Save.

Use a contrast checking tool and confirm that no contrast ratios are below 4.5:1.
If you don't have a contrast checker you can pick one here ​https://www.webaxe.org/color-contrast-tools/

[huzaifaalmesbah]

Patch tested: ​PR 6100

Before Contrast Ratio	After Contrast Ratio
3.12:1	4.53:1

[shailu25]

Test Report

Tested Patch: ​https://github.com/WordPress/wordpress-develop/pull/6100

Testing Environment:

OS: Windows
Web Server: Nginx
PHP: 8.1.23
WordPress: 6.4.3
Browser: Chrome
Theme: Twenty Twenty Four
Active Plugins: None

Actual Results:

• Fixed Color Contrast Issue in Ember Theme Style.✅

Screenshots:

Before Patch: ​https://prnt.sc/vnxyiSyBfF7R
After Patch: ​https://prnt.sc/KPDwn1q77CHy

Contrast Ratio:
Before Patch Contrast Ratio: 3.12:1 (​https://prnt.sc/a7OF3zInzjeT)
After Patch Contrast Ratio: 4.53:1 (​https://prnt.sc/UkAQuyO7y3eI)

[itpathsolutions]

Test Report

Tested Patch: ​https://github.com/WordPress/wordpress-develop/pull/6100 ✅

Environment:

OS: Windows
Web Server: Nginx
PHP: 8.1.27
WordPress: 6.5-beta1
Browser: Chrome
Theme: Twenty Twenty Four
Active Plugins: None

Actual Results:

• Color Contrast Issue in Ember Theme Style With Patch. ✅

Screenshots:

Before Patch: ​https://prnt.sc/qwaKSDvyQYej
After Patch: ​https://prnt.sc/P1YTxbShdBMU

Contrast Ratio:
Before Patch Contrast Ratio: 3.12:1
After Patch Contrast Ratio: 4.53:1

[SergeyBiryukov]

In 57642:

Twenty Twenty-Four: Increase the color contrast of the Ember style variation.

This ensures that the color contrast passes the WCAG AA contrast ratio for normal text.

Follow-up to [56951].

Props poena, Anlino, richtabor, huzaifaalmesbah, shailu25, itpathsolutions.
Fixes #60459.

Thanks for the PR! Merged in r57642.