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-Four
• Plugins: None
• Browser: Chrome (latest)

Steps:

1. Opened Site Editor > Navigation.
2. Edited an existing navigation menu.
3. Added a new menu item.
4. Viewed the menu on the frontend.

Result:
The issue could not be reproduced.
Newly added navigation menu items have sufficient contrast and are clearly readable.

[sabernhardt]

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