Low Contrast Ratio in Footer Separator of “WordPress Events and News” Widget

[ankitkumarshah]

While running a Lighthouse accessibility audit on the WordPress Dashboard, I encountered a contrast ratio issue in the footer of the “WordPress Events and News” widget.

Specifically, the issue appears in the vertical separator "|" between the footer links. The separator has insufficient color contrast, which can hinder readability for users.

Screenshot:

Expected:

The vertical separator should meet the WCAG 2.1 AA minimum contrast requirement of at least 4.5:1 for normal text.
​https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1&showtechniques=143#contrast-minimum

Steps to Reproduce:

1. Go to the WordPress Admin Dashboard.
2. Run a Lighthouse audit.

This PR improves accessibility in the WordPress Dashboard by updating the color of the vertical separator | used in the footer of the “WordPress Events and News” widget.

Previously, the separator used the color #dcdcde, which fails the WCAG 2.1 AA contrast requirement against a white background. The new color #73777D ensures a minimum contrast ratio of 4.54:1, meeting accessibility standards for normal text.

Trac Ticket: #63447

[sainathpoojary]

Test Report

Description

This report validates whether the indicated patch works as expected.

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

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: macOS
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

Actual Results

✅ Issue resolved with patch.

Supplemental Artifacts

Screenshots of Events and News widget and Activity widget

Before patch:

With patch:

[sabernhardt]

#63540 was marked as a duplicate.

[sabernhardt]

​PR 8808 applies #73777D in both the Events and Activity widgets.

• The darker color has just enough contrast to avoid errors in Lighthouse or WAVE.
• The color choice is not in the ​current palette (and hex values should be lowercase).

​PR 8929 changes the Events widget footer markup to be more like the footer links in the Activity widget.

• This passes the Lighthouse tool without changing the color, but WAVE would still report the same colors as errors.
• The patch currently adds padding around each of the links and increases their line-height.

The automated test tool errors do not exactly fit the use case. I doubt whether the separators should even qualify for the ​non-text minimum ratio of 3:1 (especially because the links have space between them and the separators).

In addition, the dashboard might be replaced soon anyway.

[rollybueno]

Reproduction Report

Description

This report validates whether the contrast issue reported in the ticket can be reproduced in a clean environment.

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: Linux
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).
   • The text color in the admin bar does not provide sufficient contrast against the background in high contrast.

Additional Notes

• This may affect accessibility for users with visual impairments, especially in admin notices or toolbar elements.
• No third-party styles were interfering. Verified with all plugins disabled except the test utility.

Supplemental Artifacts

[rollybueno]

Test Report

Description

This report validates whether the indicated patch works as expected.

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

This patch addresses a contrast issue in the WordPress admin UI, specifically in the "WordPress Events and News" dashboard widget where the location text had insufficient contrast against the background.

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: Linux
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Steps to Apply Patch

1. Navigate to your local wordpress-develop directory.
2. Make sure you add remote upstream and fetch it:

   git fetch upstream pull/8808/head:pr-8808
   git checkout pr-8808

3. Rebuild the environment:

   npm install
   npm run build:dev

4. Restart Docker to ensure changes are picked up:

   npm run env:stop
   npm run env:start

5. Confirm the patch is present inside the container:

This confirms the patch is active within the environment.

Actual Results

1. ✅ Issue resolved with patch based on Lighthouse scan.
   • UI contrast for the affected elements is visibly improved.
   • No visual regressions observed during normal admin use.
   • Works correctly on Dashboard page with no plugins active.
2. ⚠️❗However, it's worth noting that it failed for normal text, on WCAG AAA which is the highest rating.

Additional Notes

• The patch improves readability for elements that previously had low contrast based on Lighthouse.
• No plugin conflicts or console warnings detected.
• ⚠️ While the new patch passed on WCAG AA, it failed on WCAG AAA in normal text, which this issue may fall under that. Need second opinion on this part.

Supplemental Artifacts

WCAG:

Lighthouse:

[sabernhardt]

While the new patch passed on WCAG AA, it failed on WCAG AAA in normal text, which this issue may fall under that.

No. The footer links only have a contrast ratio of 5.17:1 in the Events and Activity widgets, and separators should not follow a higher standard than words.

I questioned whether the line characters should even meet the 3:1 non-text minimum. They are not readable text, and they do not define the link boundary.

For another method, replacing the | character with a pseudo-element that has a light border could prevent these automated testing errors without changing the color.

---

History:

• #25824 added a ​light color in the Activity widget.
• #40702 implemented a ​similar style in the Events widget.

[joedolson]

From a purely practical standpoint, it makes sense to prevent the Lighthouse error. That is something that is likely to just consume developer time, because other reporters will continue to bring it up.

I agree with you, @sabernhardt, that this is not a real issue; the character is an insignificant decorative character - if it wasn't there, nobody would lose anything.

I can go with either option; either changing the color or using a pseudo-element to prevent the error. It's not important enough to be really concerned about.

[joedolson]

Milestoning. This is primarily to avoid automated error reports, as the actual issue is insignificant.

[sabernhardt]

proof of concept for pseudo-element within paragraph

[sabernhardt]

Using a pseudo-element can make the Events widget pass automated contrast testing and remove the | characters. However, it is quite elaborate just for one dashboard widget.

I originally created a proof of concept with a .subsubsub list like PR 8929, but I switched back to the paragraph. I'm not sure I like how that would center links on smaller screens, with a larger font size (​see common.css). On the other hand, the pseudo-element could be more valuable with .subsubsub lists (in the Activity widget footer and at the top of list table screens) than with the Events widget.

[wildworks]

I checked ​the chat in the accessibility channel, and it seems there are two opinions regarding this ticket: whether to close it or punt it. For now, I'd like to close it, but if it's worth resolving, please reopen it and change the milestone to 7.0.