User autocomplete: The slug has too low color contrast

[carolinan]

Description

When you type @ in the editor, a list of users is shown.
The list shows the avatar, the chosen display name from the user profile, and the user's slug.
The text for the slug has too low contrast on the item in the list that is selected.
It is #757575 on #007cba (contrast ratio 1:1) and hover it is #007cba on #006ba1 (1.26:1).
#007cba and #006ba1 are from the admin theme.

Step-by-step reproduction instructions

Type @ in the editor and select a user. Try to read the slug, which is the second name on the listed item.

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[SainathPoojary]

Yes @carolinan, I agree this indeed is a issue, I would like to work on this.

[im3dabasia]

Thank you, @carolinan, for raising this issue. I agree that this is an accessibility concern, and based on WCAG AA guidelines, we should have at least a contrast ratio of 4.5:1 for small text.

I propose changing the color from #757575 to #fff, as used in the Publish button on the top bar. This would ensure consistency and resolve the accessibility issue.

[carolinan]

To be honest I would label this as a low priority, unless testing show that there are other elements of other autocompletes that also has contrast issues.

---

By setting the text color to white, the display name and the slug would be too similar, and it may be confusing because they would then have the same importance in the interface.
A parenthesis (in addition to the color change) may also not be suitable for de-emphasizing the slug, since the context is not exactly a sentence?

I found it confusing that the slug showed at all, but maybe it is important in some environments with many users.

[SainathPoojary]

Hey @carolinan,

I was wondering if adding @ before the slug and reducing the font size to 0.7rem might help make it less prominent.

Here are a few visual comparisons for your reference:

With font size: 0.7rem and @:

Without font size adjustment:

With font size 0.7rem but without the @:

[afercia]

maybe it is important in some environments with many users.

Yes I guess the slug helps differentiate users with similar usernames.

Due to my low vision I was really struggling to even understand the screenshot attached to this issue because to me the slug of the selected item is barely visible.

It is worth noting tha the color change of the selected item comes from the fact the button of the selected item becomes a primary button:

gutenberg/packages/components/src/button/style.scss

Lines 54 to 55 in 693e315

	background: $components-color-accent;
	color: $components-color-accent-inverted;

These colors use CSS variables that adapt to the admin color scheme set under the WP admin user profile settings. Instead, the user slug color is hardcoded in the component.

Screenshot with the default admin color scheme, 'Midnight' color scheme and 'Ectoplasm' color scheme

While only the default admin color scheme is expected to be accessible, the background colos can't be predicted. As such, I think the slug color should use the same variable of the username color, maybe deemphasized with some Sass function?

[Rishit30G]

Thanks for sharing the issue,

Since I was able to reproduce the issue, I found that using color: currentColor; instead of color: var(--wp-admin-theme-color); for the hover state resolves the problem. Also, setting the text color to something like color: rgb(191, 189, 189); instead of color: $gray-700; makes the username much more visible.

Sharing the screencast for the same:

Screen.Recording.2025-02-03.at.6.26.01.PM.mov

[SainathPoojary]

Hi @Rishit30G,

I tested the suggested color using the ColorContrastChecker component in Storybook, and unfortunately, it did not pass the contrast check. Based on my findings, #FFFFFF(which is same color as name) was the only shade of gray that met the accessibility requirements.

However, if we use the same color for both the name and slug, they become indistinguishable. I think we need to explore a way to visually de-emphasize the slug to differentiate it better.

Looking forward to hearing your thoughts!

[Rishit30G]

Hey @SainathPoojary,

It makes sense, thanks for sharing your thoughts on the above screencast! 👍🏻

For the hover part I think that we have wp-admin-theme-color on the hover ( non-selected ) so it makes sense to have the currentColor for the hover state ( selected ) for username text, that should be fine in my opinion

However for the non-selected/selected state, the username can have a colour somewhere in the lines of rgb(191, 189, 189); that was my thinking, but if it fails the accessibility criteria, then we should go with the approach shared in the above comment ( deemphasizing using sass function )