Update WP-admin Buttons

[hugobaeta]

Following the work done on ticket #31234, the buttons needed some updating as well to comply to the new default color scheme.

Used the opportunity to evolve the style of the buttons ever so slightly to match everything else better (removal of the 1px light inset box-shadow on the top, for example).

Here's a comparisson:

Tracking label: #a11y-color

[hugobaeta]

Patch with updated CSS

[helen]

Not sure I can tell if they're illustrated above - focus, hover, and active states?

[hugobaeta]

For clarification, on the comparison image I posted, the top row is normal state, the bottom row is hover state.

[paulwilde]

These changes should also apply to .wp-slider .ui-slider-handle for consistency. This is the slider used on the Revision screen.

[hugobaeta]

Replying to paulwilde:

These changes should also apply to .wp-slider .ui-slider-handle for consistency. This is the slider used on the Revision screen.

I focused on the buttons here, not other interaction elements. Would you like to make a patch for that slider?

[afercia]

Please consider color contrast ratio should be at least 4.5:1. In the accessibility team we discussed a while ago the contrast issue, noticed there are several other places in the admin that need some love (most notably: primary buttons, TinyMCE buttons, login screen links and "orange" things) but decided to postpone for now. So it's not a priority at the moment but since you're working on primary buttons, maybe it would be a nice opportunity :)

[hugobaeta]

Replying to afercia:

Please consider color contrast ratio should be at least 4.5:1. In the accessibility team we discussed a while ago the contrast issue, noticed there are several other places in the admin that need some love (most notably: primary buttons, TinyMCE buttons, login screen links and "orange" things) but decided to postpone for now. So it's not a priority at the moment but since you're working on primary buttons, maybe it would be a nice opportunity :)

My proposed change is already an improvement in contrast.

The current primary buttons (blue) in the admin have a contrast ratio of 2.97.
The ones I propose have a contrast ratio of 3.04

They are not the recommended ratio... I know. But if this already feels like a big change, imagine if we went all out? The easy solution here is to reverse the styles: Hover (the bottom one) becomes the normal state of the button. That one has a contrast ratio (my version) of 5.25.

what do y'all think?
cc/ @melchoyce @helen

[melchoyce]

I like how subtle the changes are on the default button states — losing the shine makes them feel fresher without making them feel like entirely different buttons. I think they'll go better with some of the more recently refreshed screens in the admin. The hover on the primary button feels really drastic, though. The brightening + darker borders works well on the secondary buttons, but the full-dark on the primary almost makes it feel more like a pushed state in a way the old primary hover didn't. Maybe the primary button background should also get a little brighter on hover.

[joedolson]

From an accessibility perspective, I can understand if it would be too much of a UI change right now to make the contrast meet WCAG requirements. Is it possible to add a slight text shadow on the button text to compensate? Having a dark delimiter around the text can improve readability, by creating an outline with a higher contrast that demarks the text for low-contrast readers. If the contrast between the shadow and the background & the shadow and the text meets WCAG guidelines, that can make the text considerably more readable.

[Kelderic]

I'd like to echo melchoyce that the darkened button seems more like a pressed state than a hover state. When I was with a marketing company a few years ago we did user testing on hover states, and a high majority of users felt brighter signified a potential to interact while darker signified and active interacting element; clicked in the case of a button.

[hugobaeta]

Replying to Kelderic:

I'd like to echo @melchoyce that the darkened button seems more like a pressed state than a hover state. When I was with a marketing company a few years ago we did user testing on hover states, and a high majority of users felt brighter signified a potential to interact while darker signified and active interacting element; clicked in the case of a button.

I agree with you both, I usually go lighter on hover too. But I was trying to not change the interaction patters, only the actual colors of the buttons. If you notice, the current ones in admin have a dark hover (you can see them in the screenshot above).

I'll do a new pass, taking in all feedback in this thread, soon ;)

[melchoyce]

Replying to hugobaeta:

But I was trying to not change the interaction patters, only the actual colors of the buttons. If you notice, the current ones in admin have a dark hover (you can see them in the screenshot above).

Yeah — the current buttons are also a little wonky, I think it works a little better in them because they still have the highlight on top. Removing that in the new buttons adds to the indented look.

Looking forward to your next iteration :)

[afercia]

Replying to hugobaeta:

I usually go lighter on hover too.

That's the way it should always be IMHO, I'd just add "on hover/focus".

But I was trying to not change the interaction patters, only the actual colors of the buttons.

Don't bee too shy :)

If you notice, the current ones in admin have a dark hover

Yup and IMHO that's basically wrong, darker means "off", lighter means "on".

I'll do a new pass, taking in all feedback in this thread, soon ;)

Thanks very much @hugobaeta

[helen]

Can we just update the colors for 4.2 and look at further changes later, given that we're into beta?

[DrewAPicture]

Per the above-linked Slack discussion, we're going to punt this to a future release, and handle the button color changes in #31234.

[hugobaeta]

Did color updates to buttons (and other missing elements) on #31234

Will revisit this ticket, with all we discussed, for next release ;)

[paulwilde]

Will this be considered for 4.3? If so I'll create a patch for .wp-slider .ui-slider-handle (See ticket:31459#comment:3).

[hugobaeta]

Replying to paulwilde:

Will this be considered for 4.3? If so I'll create a patch for .wp-slider .ui-slider-handle (See ticket:31459#comment:3).

Yes! @michael-arestad showed interest in helping with this too. Should we keep this ticket and iterate on it here?

[hugobaeta]

Revision of Buttons style update, with new colors for accessibility

[hugobaeta]

Following up on the accessibility concerns, I did a lot of work on color contrasts and also pleasant aesthetics for the buttons refresh. I just uploaded a new patch that focuses on the primary buttons (didn't do major changes to secondary buttons, aside from the generic removal of the 1px highlight on them - I'd still like the shadows to be more solid).

(short video of this: ​https://cloudup.com/iTnemi76nAE )

In my proposal, the button background color doesn't reach a 4.5:1 ratio for WCAG AA compliance, but it's close (discussed this with @helen, and we both agreed that the compliant background blue was too dark and unpleasant). To solve this, I added a text-shadow to the white text, that bumps this up to a WCAG AA compliance. @afercia, can you please audit this too to be sure?

As discussed before, the revised states for the button make more sense now: Hover is slightly lighter.

The screenshot is just a quick representation, but this is a patch worth seeing live on the admin, so apply it and test it, please!

I ended up adding some more shades of blue to the Accent Colors section in my ​CodePen for all things color in core. I'll update the Design Handbook when I have a chance, but for now this serves us well for reference. Also, I might need to add darker variations to the Accent blues, let me know @afercia if the borders need to be darker :)

@michael-arestad, What do you think of the style update? Should we also add a subtle transition to them?

[afercia]

Thanks very much @hugobaeta. Would like to hear the Accessibility team opinion :)