Copy buttons: Insufficient color contrast ratio for the 'Copied!' text

[afercia]

In a few places in the admin interface, WordPress uses a 'Copy' button to allow users to copy to the clipboard some values like URLs or the Site Health info.

After the values have been copied, a 'Copied!' text appears to provide a confirmation message.

The text color is a #008a20 green. When it is used against the default light grey background #f0f0f1 the contrast ratio is only 3.96:1. It should be at least 4.5:1.
See ​https://jdlsn.com/color/?type=hex&color=008a20&color2=f0f0f1

When used against a white background, the contrast is okay.

[afercia]

I'm not sure the text needs to be green in the first place. I'd just use the default dark grey text color.

[angelok1979]

Replying to afercia:

I'm not sure the text needs to be green in the first place. I'd just use the default dark grey text color.

Why do you think it? It is standart color schema for WP. Anyway you can add to your admin theme css like to:

.site-health-copy-buttons .copy-button-wrapper span.success {color:#3c434a!important}

How to add your own css in WP dashboard?

Go to WordPress Admin > Appearance > Admin CSS MU and add the custom CSS you want

​Copied!

[sabernhardt]

The text needs to have a minimum contrast of 4.5:1 against the background, whether the text is green or gray.

The palette's next darkest green (#007017 ​Green 60) would have a 5.54:1 ​contrast ratio against #f0f0f1.

[sabernhardt]

darkens the green by one shade in privacy, site health and media screens

[sabernhardt]

#51355 switched both Media "Copied" messages to green for consistency with Privacy (#44588) and Site Health (#46573). Changing the color to gray would require design feedback and a new decision.

In addition to making the green pass minimum contrast against the #f0f0f1 background at 5.54:1, Green 60 would increase contrast against white from barely passing (4.51:1) up to 6.3:1.

[afercia]

In 57270:

Administration: Accessibility: Improve color contrast of the Copy buttons success message.

Props sabernhardt.
Fixes #60140.