Patterns: Inactive "All, Synced and Standard" toggle group options have too low color contrast

[carolinan]

Description

In Appearance > Editor > Patterns > My patterns, the inactive options in the toggle group control for the synced status does not have a high enough color contrast to pass WCAG 2 AA:

Text: #757575
Background: #2F2F2F
Contrast Ratio: 2.9:1

Required: 3:1
Preferred: 4.5:1

Step-by-step reproduction instructions

Go to Appearance > Editor > Patterns > My patterns
-Test the color contrast of the inactive toggle group options.
-Try reading the text of the inactive toggle group options.

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

[ndiego]

I can confirm. I think rgb(150 150 150) would get it to pass. Also, the padding around the button looks a little off.

[carolinan]

I am not sure about introducing a new color. I think the next step is ccc:

// WordPress grays.
$black: #000;
$gray-900: #1e1e1e;

$gray-800: #2f2f2f; This is the current background color for these buttons
$gray-700: #757575; This is the current text color of these buttons
$gray-600: #949494; This is the current text color of the "inactive" unselected menu items like "Manage all of my patterns", but it is too dark to be used with gray-800 as background, it does not have a high enough contrast.

$gray-400: #ccc;
$gray-300: #ddd;
$gray-200: #e0e0e0;
$gray-100: #f0f0f0;
$white: #fff;

[carolinan]

Example of using ccc: It now does not match the placeholder or icon in the search bar:

[carolinan]

Actually on a second look, #949494 does have a high enough contrast. I must have been looking at the wrong element in the color contrast report.

[annezazu]

@WordPress/gutenberg-design flagging for you all as we look at future iterations here and build on the work in the Site Editor. Let's make sure we automatically have the right color contrast!