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.