Skip to content

User autocomplete: The slug has too low color contrast #69001

@carolinan

Description

@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

A screenshot of the list of users, showing the text and background colors.

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

Metadata

Metadata

Labels

Needs Design FeedbackNeeds general design feedback.[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions