Make WordPress Core

#60140 closed defect (bug) (fixed)

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

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 6.5 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch
Focuses: accessibility Cc:

Description

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.

Attachments (3)

copied contrast.png (430.9 KB) - added by afercia 12 months ago.
wp.jpg (10.5 KB) - added by angelok1979 11 months ago.
60140.diff (1.4 KB) - added by sabernhardt 11 months ago.
darkens the green by one shade in privacy, site health and media screens

Download all attachments as: .zip

Change History (9)

#1 follow-up: @afercia
12 months ago

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
11 months ago

#2 in reply to: ↑ 1 @angelok1979
11 months ago

  • Resolution set to wontfix
  • Status changed from new to closed

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}

/raw-attachment/ticket/60140/wp.jpg

How to add your own css in WP dashboard?

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

Last edited 11 months ago by angelok1979 (previous) (diff)

#3 @sabernhardt
11 months ago

  • Resolution wontfix deleted
  • Status changed from closed to reopened

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
11 months ago

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

#4 @sabernhardt
11 months ago

  • Keywords has-patch added; needs-patch removed

#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.

#5 @afercia
11 months ago

  • Milestone changed from Awaiting Review to 6.5

#6 @afercia
11 months ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from reopened to closed

In 57270:

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

Props sabernhardt.
Fixes #60140.

Note: See TracTickets for help on using tickets.