Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#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 4 months ago.
wp.jpg (10.5 KB) - added by angelok1979 4 months ago.
60140.diff (1.4 KB) - added by sabernhardt 3 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
4 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
4 months ago

#2 in reply to: ↑ 1 @angelok1979
4 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 4 months ago by angelok1979 (previous) (diff)

#3 @sabernhardt
4 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
3 months ago

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

#4 @sabernhardt
3 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
3 months ago

  • Milestone changed from Awaiting Review to 6.5

#6 @afercia
3 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.