Color contrast below WCAG standards for newly-added items in customizer menus

[joedolson]

After adding an item to a menu in the customizer, the item changes to a medium gray with a checkmark to indicate it's been added.

The color is #8c8f94 on white, which is a color contrast of 3.24:1. This is acceptable for a disabled control or for an icon, but not for the text.

These controls are not disabled after adding; but are only dimmed.

There are a couple possible solutions here, depending on whether there's a use case for letting users add the same item twice in the same session.

If users *should* be able to add the same item twice in a row, then the contrast should be increased.

If we can't identify a use case for adding the same item twice in a row, then it may make more sense to disable it, instead.

I'll note that disabling the control wouldn't prevent users from adding the same item to a menu twice; it would just make it more difficult.

The primary case I can think of for adding an item multiple times is in complex menus where there may be multiple user paths to reach a particular service/resource/etc. In this case, making that item disabled would be inconvenient.

[joedolson]

Added in #32576, color updated for #49999.

[bridgetwillard]

I love this idea and I am wondering if the AI team couldn't make a helper that warns the users of the contrast issues.

This change makes the added menu item in Customizer WCAG compliant while leaving subtle effects to let the user know that they already added the menu item, but also, if they want they can add it again. This decision was made because it's the least amount of CSS changes while still making sense.

The same dark gray color used initially for menu item labels in Customizer is reused because a color change is not needed. The user will already see the checkmark icon indicating that the item was successfully added. Since you can add the same menu item multiple times (which should stay as-is in case a user has a complex repetitive menu or some reason I'm not thinking of), I also changed the on hover icon to the plus icon. This way, after adding, the user sees the check mark (☑️ great, it added!). If they want to re-add, instead of seeing the initial blue hover color, they see the dark gray _but_ also the plus icon. This combination says, "you already added this, but add it again if you want."

Other solutions would add more lines of CSS or require more changes. I'm a fan of fixing the WCAG issue with minimal changes.

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

---

Current:

New, after adding:

New, after adding and on hover:

[emptyopssphere]

Tested on WordPress 6.9

Environment:

• Theme: Twenty Twenty-One
• Plugins: None
• Browser: Chrome (latest)

Steps:

1. Appearance → Customize → Menus
2. Open an existing menu
3. Click “Add Items” → Pages
4. Add a page to the menu

Result:
After adding a page, the item in the “Add Items” panel becomes medium gray and shows a checkmark.
The gray text has low contrast and may be difficult to read, which matches the reported issue.

[sabernhardt]

To test adding menus with the Customizer, you need to activate a classic theme (such as Twenty Twenty-One).

[makdiahussain]

Hi, I’ve reviewed the issue regarding color contrast for newly-added menu items in the Customizer. Here are a few observations and suggestions that might help move this forward:

Contrast Issue
The current color #8c8f94 on a white background gives a contrast ratio of 3.24:1, which is below WCAG minimum standards for normal text (4.5:1). This is indeed an accessibility concern for users with visual impairments.

Potential Approaches

Increase text contrast: Simply adjust the color of the newly-added item text to meet the 4.5:1 ratio. This would keep the current UI behavior while improving accessibility.

Disable added items: If there is no strong use case for adding the same item multiple times in the same session, consider disabling the control instead of dimming it. This would communicate the state more clearly and also comply with accessibility guidelines.

Additional Considerations

If the item remains active and can be added multiple times, consider adding a hover or focus state that improves visibility.

Testing the proposed color choices with real users or using automated contrast checkers could help select an appropriate shade.

I don’t have a patch ready, but I hope this helps clarify possible solutions and their accessibility impact. I’d be happy to help test any proposed changes if needed.

[joedolson]

The PR has been updated to remove the icon change and just darken the gray instead of changing the design to re-use the un-added color.

This is mostly just to keep the patch focused on fixing the existing accessibility issue, rather than making UX changes.

[ozgursar]

Test Report

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

Steps to Test

1. Activate theme Twenty Twenty-One (or any classic theme)
2. In the dashboard, go to Appearance > Customizer > Menus
3. Choose your menu (e.g. Primary Menu)
4. Click Add Items
5. Add Page
6. Give a name (e.g. Test Page)
7. Click Add
8. View the added page's text color (to check contrast ratio in Chrome Dev Tools)
9. Without patch text color is #8c8f94 with contrast ratio 3.24 over white.

Expected Results

✅ Text color contrast ratio must be minimum 4.5

Environment

• WordPress: 7.0-alpha-20260113.162135
• PHP: 8.3.29
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 143.0.0.0
• OS: macOS
• Theme: Twenty Twenty-One 2.7
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Actual Results

• ✅ Issue resolved with patch.
• ✅ Text color #646970 has a contrast ratio of 5.53 (more than required 4.5 to pass AA)

Screenshots

Before	After

[showravhasan]

Test Report
Tested on a local WordPress installation.

Environment:

• WordPress: 6.9
• Theme: Twenty Twenty-One
• Browser: Chrome
• OS: macOS

Steps:

1. Appearance → Customize → Menus
2. Open "Primary Menu"
3. Click "Add Items" → Pages
4. Add "About" page to the menu

Result: ✅ Confirmed the bug. The text color for added items is #8c8f94 (3.24:1 contrast ratio), which is below WCAG AA standards (4.5:1 minimum). The grayed-out text with the checkmark is difficult to read.

Recommendation: ​PR #10542 correctly addresses this issue by darkening the text color to meet accessibility standards.

+1 for commit.

## Test Report ✅
Tested on a local WordPress 6.9 installation with Twenty Twenty-One theme.

### Bug Confirmed

• Current color: #8c8f94
• Contrast ratio: 3.24:1 (fails WCAG AA 4.5:1 minimum)
• Added menu items in Customizer are hard to read

### Steps to Reproduce

1. Appearance → Customize → Menus
2. Open "Primary Menu"
3. Click "Add Items" → Pages
4. Add any page to the menu
5. Observe: The added item text is low contrast gray

### Verdict
LGTM 👍 The fix to darken the text color correctly addresses the accessibility issue.

Also left a comment on the Trac ticket: https://core.trac.wordpress.org/ticket/64013

[joedolson]

In 61511:

A11y: Fix color contrast on added menu items in Customizer

Changes the color on items added to menus in the Customizer from #8c8f94 (a contrast ratio of 3.24:1) to #646970 (a contrast ratio of 5.53:1).

Props joedolson, sabernhardt, wilcosky, showravhasan, emptyopssphere, ozgursar.
Fixes #64013.

[joedolson]

@makdiahussain I did not include you in the props because your contribution appears to be just an AI re-hash of the issue, with no original contribution.

@sachinrajcp123 I did not include you in the props because your contribution, while different from the previous patch, was provided after the prior patch was already agreed on and did not contribute to dialog on the topic. If you want to propose alternatives, those should be made as comments and counter proposals, not just providing a new patch. The same suggestion as a comment on the existing PR would have earned props, even if it was not accepted.

## Summary
Updates the color used for already-added available menu items in the Customizer from #646970 to the standard admin secondary text color #50575e. This keeps the subdued "already added" state while improving contrast against the white background.

## Contrast

• Reported color #8c8f94 on white: 3.24:1
• Current color #646970 on white: 5.53:1
• Updated color #50575e on white: 7.33:1

## Testing

• git diff --check -- src/wp-admin/css/customize-nav-menus.css
• Verified contrast ratios for #8c8f94, #646970, and #50575e against white.