search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.37k stars 4.15k forks source link

Data views filter chips color contrast below standards #62760

Closed joedolson closed 3 months ago

joedolson commented 3 months ago

Description

The buttons to filter patterns according to synced status are below color contrast. The button is at 4.04:1, where the minimum contrast is 4.5:1.

See previous relevant issue: https://github.com/WordPress/gutenberg/issues/52555. That issue was with a different wrapping design, but the same control group.

I'll also observe that these should be real buttons, rather than div elements with events and tabindex; but that's a separate issue.

Step-by-step reproduction instructions

  1. Go to Patterns
  2. Choose All Patterns
  3. Inspect the 'Sync Status' button colors

Screenshots, screen recording, code snippet

image image

Environment info

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

annezazu commented 3 months ago

@jasmussen @jameskoster as a heads up. If we can get this fixed for 6.6, let's add it to the board.

jasmussen commented 3 months ago

Seems like we can either use $gray-800 for the text, resulting in this:

Screenshot 2024-06-26 at 08 42 23

That would match these chips: Screenshot 2024-06-26 at 08 42 37

Or we can use a border instead of a background: Screenshot 2024-06-26 at 08 43 34

I'd love a quick check by @jameskoster before I make either PR, as the interface is meant for additional places.