Global styles revisions: insufficient text color contrast

[afercia]

Description

In the Site Editor > Styles > Revisions, a few UI elements have a too low color contrast ratio:

Username and descriptive text in the screenshot below use the gray color $gray-600: #949494;. On the white background the contrast ratio is only 3.03:1. See https://jdlsn.com/color/?type=hex&color=949494&color2=ffffff

Also, italic text should be avoided for large sentences and only be used for single words or a few words within a sentence, only when necessary.

The selected revision gets a color that is a result of a an 'ad-hoc' calculation of alpha transparency. I'm not sure it's good idea to use 'ad-hoc', unique colors that deviate from the standard color palette. There is a reason why we're using a color palette ahd that's we need to keep under control consistency and color pairs that provide sufficient color contrast ratio.

gutenberg/packages/edit-site/src/components/global-styles/screen-revisions/style.scss

Line 86 in 9e67078

background: rgba(var(--wp-admin-theme-color--rgb), 0.04);

This background color uses alpha transparency and approximately produces a #f7fafc light blue.
The blue text that uses the #007cba blue would normally produces a sufficient color contrast ratio on a white background bbut it doesn't on the #f7fafc background. The color contrast ratio is only 4.36:1. See https://jdlsn.com/color/?type=rgb&color=0,124,186&color2=247,250,252

I'd recommend to check for any other usage of the #949494 gray and variations default colorrs throughout the whole revisions UI.

@WordPress/gutenberg-design
I'd like to remind everyone that color contrast is a basic accessibility requirement. It is also easy to implement and check and it's objective. Any design should be double checked for color contrast even before the implementation phase.

I'd strongly recommend to stick to the default color palette, avoid 'unique' colors, and stick to the color pairs that guarantee a sufficient color contrast.

Step-by-step reproduction instructions

• Go to Site Editor > Styles > Revisions
• Make sure you do have at least two revisions.
• Check the color contrast of the elements highlighted in the screenshot above, both for the 'selected' and 'non selected' items.

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

[afercia]

To my understanding, the current UI comes from #55647 / #55913 where the design clearly didn't take into consideration color contrast.

After almost 7 years of accessibility efforts in this project, it's extremely disappointing to see that such a simple requirement like color contrast keeps to be missed by web designers in this project.

[annezazu]

@WordPress/gutenberg-design can you all chime in here so we can iterate in time for 6.5? Thanks for flagging and reviewing this.

[jasmussen]

Can just go full $gray-900 for the selected/active item, and reserve $gray-700 for when the background is white.

[afercia]

Rather, I would suggest to not use 'ad-hoc' colors. I'm not sure that altering the palette colors on a case by case basis contributes to make the UI more accessible and maintenable. Also, it defeats the purpose of having reusable, accessible components. To me, 'ad-hoc' alterations of components, colors, and such shhould be entirely avoided.

Things ike the one below are probably not a great idea to start with:
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);

[ramonjd]

Can just go full $gray-900 for the selected/active item, and reserve $gray-700 for when the background is white.

Here's what it looks like, also with the italics removed.

Possible icon to draw attention to the previously-italicised text?

The selected revision gets a color that is a result of a an 'ad-hoc' calculation of alpha transparency.

The above screenshot has a background of background-color: #f6fbfe;

[ramonjd]

WIP PR here:

• Global styles revisions: update text color contrast  #58340

Feel free to update and test stuff.

[ramonjd]

In relation to the "'ad-hoc' calculation of alpha transparency" I've started a PR here:

• Try/admin color lighten colors #58481

The question is whether we create solid colors that kinda match current ad-hoc values, or just migrate the rgba completely, e.g., --wp-admin-theme-color-opaque-04:rgba(var(--wp-admin-theme-color--rgb), 0.04);