Make WordPress Core

Opened 3 weeks ago

Last modified 2 hours ago

#48590 assigned enhancement

Change the outline button hover background color

Reported by: sourav926 Owned by:
Milestone: 5.3.1 Priority: normal
Severity: normal Version: 5.3
Component: Administration Keywords: needs-patch has-screenshots
Focuses: ui, accessibility Cc:
PR Number:


Admin panel's new outline button hover background color is hardly understandable.

It can be background: #016087; color: #fff;

Attachments (2)

wp.png (20.2 KB) - added by sourav926 3 weeks ago.
Before and after of implementation
48590.diff (413 bytes) - added by melchoyce 2 hours ago.

Download all attachments as: .zip

Change History (10)

3 weeks ago

Before and after of implementation

This ticket was mentioned in Slack in #design by sourav926. View the logs.

3 weeks ago

#2 @SergeyBiryukov
3 weeks ago

  • Focuses ui accessibility added
  • Summary changed from Change the outline button hover backgroun color to Change the outline button hover background color

#3 follow-up: @mapk
3 weeks ago

  • Keywords needs-design-feedback removed

Thanks @sourav926! The design style you're proposing looks similar to the current primary button style. Take a look at the two styles below:


I'd refrain from making all the buttons assume the primary styling. I know there is work to refine the secondary button styling to work better.

#4 in reply to: ↑ 3 @sourav926
3 weeks ago

Replying to mapk:

  1. Primary and Secondary both buttons should look different in Normal state.
  2. On the Hover state, a secondary button can look like the Primary button or a darker gray color.
  3. The main point is, "on hover" design of secondary button is not user-friendly.

#5 @afercia
3 weeks ago

  • Keywords close added; needs-patch removed

@sourav926 thanks for your report. Worth noting the new secondary buttons style is a design choice that was discussed and implemented in #34904 see https://core.trac.wordpress.org/ticket/34904#comment:73 and following comments.

Actually, the color contrast or the new button style is greater than the previous one and that's one of the reasons for the change. One more reason is the new style is now consistent with the block editor buttons style (see screenshot below).

Same goes for the hover style: it's now consistent with the one used by the block editor buttons. I guess this is hardly going to change, as it's a deliberate design choice.

Regarding accessibility concerns, the hover state is indicated by the cursor change in the first place thus I wouldn't be greatly concerned.

Worth also considering on touch devices the hover state doesn't exist and it's generally less and less important on all devices.

For these reasons, I'd lean towards closing this ticket unless the design team feels some change is necessary.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

8 hours ago

#7 @afercia
8 hours ago

  • Keywords needs-patch has-screenshots added; close removed
  • Milestone changed from Awaiting Review to 5.3.1

This ticket was discussed during today's accessibility bug-scrub. While some tend to think the hover style is way less important today than in the past, a quick improvement could be using the same background color change that was used on WordPress 5.2 together with a darker border. If a patch comes in in the very next days, this could be considered for 5.3.1.

#8 @melchoyce
2 hours ago

I agree the contrast could get bumped up a bit on hover — it is pretty subtle now — but I'm struggling with finding an appropriate increase. I think I might want to wait for @kjellr to return from sabbatical before making any changes.

The color schemes have the same problem, though, and the greys are easy to darken. Attaching a patch to do so.

2 hours ago

Note: See TracTickets for help on using tickets.