Make WordPress Core

Opened 4 months ago

Closed 3 months ago

Last modified 2 months ago

#60459 closed defect (bug) (fixed)

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

Reported by: anlino's profile Anlino Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.4.3
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: accessibility Cc:

Description

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

Attachments (1)

Skärmavbild 2024-02-07 kl. 10.55.00.png (70.6 KB) - added by Anlino 4 months ago.
Screenshot of the button block when the Ember theme style is active.

Download all attachments as: .zip

Change History (13)

@Anlino
4 months ago

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

#1 @poena
4 months ago

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.

#2 @richtabor
4 months ago

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

#3 @poena
4 months ago

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

#4 @richtabor
4 months ago

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.

Last edited 4 months ago by richtabor (previous) (diff)

This ticket was mentioned in PR #6100 on WordPress/wordpress-develop by @poena.


3 months ago
#5

  • Keywords has-patch added

#6 @poena
3 months ago

  • Keywords needs-testing added

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/

#7 @huzaifaalmesbah
3 months ago

Patch tested: PR 6100

Before Contrast Ratio After Contrast Ratio
3.12:14.53:1

#8 @poena
3 months ago

  • Milestone changed from Awaiting Review to 6.5

#9 @shailu25
3 months ago

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)

#10 @itpathsolutions
3 months ago

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

#11 @SergeyBiryukov
3 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

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.

@SergeyBiryukov commented on PR #6100:


3 months ago
#12

Thanks for the PR! Merged in r57642.

Note: See TracTickets for help on using tickets.