Increase color contrast for embed template

[rishit30g]

moved from GB70153

Links and excerpt text in the WordPress embed template fail to meet WCAG AA accessibility standards due to insufficient contrast against the white background.

Step-by-step reproduction instructions

• Add a new post
• Add an Embed Block in the editor
• Paste a post URL in the input field of embed block ( make sure the post has 8-10 lines of content )
• Save the post and view it on frontend
• Notice the 'Continue reading' button is barely visible, it can create issue for low vision users

([34903] added the embed template colors, and [50025] slightly edited some of the colors)

[sabernhardt]

Excerpt text is too light.

• .wp-embed { color: #8c8f94; }
• 3.24:1

Continue reading link has very low contrast.

• .wp-embed .wp-embed-more { color: #c3c4c7; }
• 1.74:1, with no underline until hover

Site title link has low contrast.

• .wp-embed a { color: #8c8f94; }
• 3.24:1, no underline until hover

The number for the comments link does not have enough contrast until hovering.

• 3.24:1 .wp-embed a { color: #8c8f94; }
• 5.17:1 .wp-embed-meta a:hover { color: #2271b1; }

Icon SVGs for the comments link and share button would meet the minimum contrast for non-text content, but they were not updated to fit the color palette.

• 3.62:1 SVG fill="#82878c"
• 5.21:1 SVG hover fill="#0073aa"

Heading has plenty of contrast.

• .wp-embed-heading a { color: #2c3338; }
• 12.82:1, but no underline until hover

[sabernhardt]

Suggested replacements in 63460.diff​:

#646970 Gray 50 (5.53:1)

• Post excerpt
• Site title link
• Comments count
• Comments and Share SVG icons

#2271b1 Blue 50 (5.17:1)

• Continue reading link, always underlined

#135e96 Blue 60 (6.84:1)

• Comments count hover
• SVG icons hover

[swissspidy]

Thanks for the suggestions, could you perhaps add some before/after screenshots for them? Or even submit this as a PR so it could be tested in Playground right away.

[sabernhardt]

before: low contrast, especially with "Continue reading" link

[sabernhardt]

with patch: darker text, including the underlined blue "Continue reading" link

[sabernhardt]

GB70153 has a screenshot of the Embed block before any patch, including a featured image.

My screenshots show an embed in Classic Editor, without a featured image, before and after the patch.

[sabernhardt]

Note: When testing the patch, the embedded post needs to come from the same site with the revised styles. For simplicity, you could use the same post before and after the patch to compare colors.

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

Before :

After:

How is this PR different from the already provided patch?

[swissspidy]

Related: #63468

[SirLouen]

Patch Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63460/63460.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Test reproduction instructions

• All the instructions are provided in the OP post clearly, nothing to add

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Both patches from sabernhardt and PR8819 are identical, so I've simply tested the former.

• No need to provide additional screenshots, I get the exact same result as these two screenshots provided in the report, before, and after and ​my after

@joedolson this patch is ready to be shipped.

[joedolson]

Thank you!

[joedolson]

In 60260:

Embeds: Increase color contrast on preview content.

Fix the color contrast in the post embed template for the post excerpt, site title link, comments count, comments and share icons, continue reading link, and related hover states.

Props rishit30g, sabernhardt, getsyash, swissspidy, SirLouen, joedolson.
Fixes #63460.