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.

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.