Thanks to visit codestin.com
Credit goes to core.trac.wordpress.org

Make WordPress Core

Opened 16 months ago

Closed 5 months ago

#62982 closed defect (bug) (fixed)

Twenty Twenty-Five: The Written by pattern on single posts has too low color contrast in some variations

Reported by: poena's profile poena Owned by: joedolson's profile joedolson
Milestone: 7.0 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch commit
Focuses: accessibility Cc:

Description

In the theme Twenty Twenty-Five, the pattern twentytwentyfive/hidden-written-by has a text and link color set on a group block that wraps some text content, the author name, and the categories.
The color is accent 4.

This text color does not have a high enough color contrast ratio against some of the background colors that can be applied with section styles.

Originally reported in https://wordpress.org/support/topic/sections-dont-work-appropriately/

Testing instructions:

Activate Twenty Twenty-Five.
Reset any custom styles and template changes.
Edit the single posts template.

Select the main group block, or, the first group block that is inside the main.
Open the Styles tab in the block settings.
Apply Styles 1 to 5, one by one, and observe the color of the text
"Written by author in categories" that is below the featured image.

Then repeat the steps with all the site style variations, and you will find that in some combinations, the text color is the same as the background color, so it is invisible.


My suggestion is to remove the text color from the markup. This will mean that the "Written by" content will fallback to using its default colors that are set in the variations.
But it will also mean that the text color will not be lighter than the post content, which was the intention behind the color choice in the original design.

Attachments (1)

morning.png (101.2 KB) - added by poena 16 months ago.
Morning style variation, with section style 5 applied to the main group. The "written by" text is not readable.

Download all attachments as: .zip

Change History (13)

@poena
16 months ago

Morning style variation, with section style 5 applied to the main group. The "written by" text is not readable.

#1 @poena
16 months ago

  • Keywords needs-design-feedback needs-patch added

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


16 months ago
#2

  • Keywords has-patch added; needs-patch removed

Fixes #62982

### Testing instructions:

  1. Activate Twenty Twenty-Five.
  2. Edit the single posts template.
  3. Select the main group block, or, the first group block that is inside the main.
  4. Open the Styles tab in the block settings.
  5. Apply Styles 1 to 5, one by one, and observe the color of the text
  6. "Written by author in categories" that is below the featured image.
Before

https://github.com/user-attachments/assets/6f6866ea-1d48-4029-a74a-d014c9873607

After

https://github.com/user-attachments/assets/61246b15-3f06-4b26-887a-939ad98a4a91

#3 @joedolson
8 months ago

  • Focuses accessibility added

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


7 months ago

#5 @joedolson
7 months ago

  • Milestone changed from Awaiting Review to 7.0

#6 @noruzzaman
7 months ago

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/8347

Environment

  • WordPress: 7.0-alpha-61215-src
  • PHP: 8.2.29
  • Server: nginx/1.29.3
  • Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
  • Browser: Chrome 142.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.3
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.1

Actual Results

This issue has been solved with this patch

Screenshots

Before After
https://i.ibb.co.com/XcHyZLG/beforestyle4.png https://i.ibb.co.com/dsgBVtqk/afterstyle.png

#7 @huzaifaalmesbah
7 months ago

Test Report

Description

Patch tested: https://github.com/WordPress/wordpress-develop/pull/8347.diff

  • WordPress: 6.9-beta3-61129-src
  • PHP: 8.4.12
  • Server: nginx/1.29.1
  • Database: mysqli (Server: 9.4.0 / Client: mysqlnd 8.4.12)
  • Browser: Chrome 142.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.3
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ✅ Issue resolved with patch.

Screenshots

Before Apply Patch After Apply Patch ✅
https://i.ibb.co.com/33p3B8F/Huzaifa-20251112203929.png https://i.ibb.co.com/qfpFVFN/Huzaifa-20251112204434.png
Last edited 7 months ago by huzaifaalmesbah (previous) (diff)

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


5 months ago

#9 @joedolson
5 months ago

  • Keywords commit added; needs-design-feedback removed

#10 @sabernhardt
5 months ago

  • Type changed from defect (bug) to enhancement

I'm switching to enhancement because PR 103 purposely used a lighter color for the post meta text row. The text is also smaller and inherits the Light 300 weight, so the Default gray is not easy for me to read (even though the contrast ratio is AA-compliant at 5.57:1).

Accent 4 can be a problem if the chosen section style variation (e.g., Style 1, Style 2) is significantly different than the site's style variation (e.g., Evening, Dusk). The contrast is not a problem when the section styles are not used, and even the Style 2 and Style 3 options can have enough contrast in Midnight.

My testing process below confirmed that updating the template should not affect existing sites, leaving the original design for them.

  1. Create a new site with WordPress 6.9, which already has Twenty Twenty-Five activated.
  2. Go to the Editor and select the Single Posts template.
  3. Find the Group block for the main post content. (I clicked on the "Written by" text, and then selected the second Group block in the breadcrumbs "Template > Group > Group > Row > Paragraph".)
  4. View the block's Styles tab in the sidebar, and select Style 4 (or Style 5).
  5. Save.
  6. Create a theme update.
    • Apply the patch to another site, ideally a local installation.
    • Change the theme version number in readme.txt and style.css.
    • Compress the theme to a zip package. (I saved the package as twentytwentyfive.1.4.1.zip.)
  7. Go back to the new site.
  8. Go to Appearance > Themes, and click Add Theme.
  9. Click Upload Theme, select the theme zip package, and click Install Now.
  10. Click the "Replace installed with uploaded" button.
  11. Go to the Editor and select the Single Posts template again, and check whether the Row block still has Accent 4 as the text color.

#11 @joedolson
5 months ago

  • Type changed from enhancement to defect (bug)

@sabernhardt I think I'll disagree with you on switching this to an enhancement, for two reasons:

1) It is a clear accessibility violation, and we have generally considered those to be bugs, regardless of prior intent and
2) The person who authored and merged that PR is the same person who opened this ticket, considering it to be a bug.

Thanks for confirming the impact on existing sites, as that's something that feels uncertain to me with patterns, sometimes...

#12 @joedolson
5 months ago

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

In 61534:

Twenty Twenty-Five: A11y: Fix color contrast in Written By pattern.

Remove the text color setting on the Written by pattern. The setting was resulting in color contrast that was well below contrast guidelines. Allow the text color to be inherited by default.

Props poena, rinkalpagdar, narenin, sabernhardt, noruzzaman, huzaifaalmesbah, joedolson.
Fixes #62982.

Note: See TracTickets for help on using tickets.