Inserter: Patterns and Media selected items insufficient color contrast ratio

[afercia]

Description

When selecting a Pattern or a Media category in the inserter, the category item is in a 'selected' state and an additional panel opens.

Semantically, the categories are a list with list items. The currently selected item does have a aria-current="true" attribute. So far so good.

However, visually, the selected state is only communicated by the means of:

• A subtle almost unnoticeable background color change.
• A subtle text color change.

As such, it is very hard to visually distinguish the currently selected category. As this is an user interface control, the different state should be communicated with a color change that has at least a 3:1 contrast with the adjacent colors. Alternatively, a shape with 3:1 contrast could work.

Screenshot of Patterns catgories:

The Patterns selected category name is repeated in the additional panel. That helps, but still the selected category can't be visually distinguished in the categories list.

Screenshot of Media categories:

The Media category name is not repeated in the additional panel

Step-by-step reproduction instructions

• Edit a post (or go to the Site editor)
• Open the inserter
• Click the Patterns tab or the Media tab
• Select one of the categories
• Observe the selected category is visually indicated only by the means of a slight colors change

Screenshots, screen recording, code snippet

No response

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

[joedolson]

This is very similar to #51582; we should probably use that pattern consistently.

[joedolson]

This would be a good example of something that belongs in design system documentation; we should be able to easily standardize these types of design decisions. See #53615