Make WordPress Core

Opened 7 years ago

Last modified 3 years ago

#31459 closed task (blessed)

Update WP-admin Buttons — at Version 30

Reported by: hugobaeta Owned by: hugobaeta
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: has-patch has-screenshots
Focuses: ui, accessibility, administration Cc:

Description (last modified by rianrietveld)

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:

http://cl.ly/image/2x351c0H3F1q/admin-buttons-old-new.png

Tracking label: #a11y-color

Change History (32)

@hugobaeta
7 years ago

Patch with updated CSS

#1 @helen
7 years ago

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

#2 @hugobaeta
7 years ago

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

#3 follow-up: @paulwilde
7 years ago

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

#4 @SergeyBiryukov
7 years ago

  • Milestone changed from Awaiting Review to 4.2

#5 in reply to: ↑ 3 @hugobaeta
7 years ago

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?

#6 @joedolson
7 years ago

  • Focuses accessibility removed

This ticket was mentioned in Slack in #core by johnbillion. View the logs.


7 years ago

#8 @DrewAPicture
7 years ago

  • Keywords 4.2-beta added

#9 follow-up: @afercia
7 years ago

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 :)

#10 in reply to: ↑ 9 @hugobaeta
7 years ago

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

#11 @melchoyce
7 years ago

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.

#12 @joedolson
7 years ago

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.

#13 follow-up: @Kelderic
7 years ago

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.

#14 in reply to: ↑ 13 ; follow-ups: @hugobaeta
7 years ago

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 ;)

#15 in reply to: ↑ 14 @melchoyce
7 years ago

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 :)

#16 in reply to: ↑ 14 @afercia
7 years ago

  • Focuses accessibility added

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

#17 @DrewAPicture
7 years ago

  • Owner set to hugobaeta
  • Status changed from new to assigned

#18 @helen
7 years ago

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

This ticket was mentioned in Slack in #core by drew. View the logs.


7 years ago

#20 @DrewAPicture
7 years ago

  • Keywords 4.2-beta removed
  • Milestone changed from 4.2 to Future Release

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

#21 @hugobaeta
7 years ago

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

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

#22 follow-up: @paulwilde
7 years ago

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

#23 in reply to: ↑ 22 @hugobaeta
7 years ago

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?

Last edited 7 years ago by hugobaeta (previous) (diff)

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


7 years ago

@hugobaeta
7 years ago

Revision of Buttons style update, with new colors for accessibility

#25 @hugobaeta
7 years ago

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

https://cldup.com/yYIHvk8b7y.png

(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?

Last edited 7 years ago by hugobaeta (previous) (diff)

#26 @afercia
7 years ago

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

This ticket was mentioned in Slack in #core by hugobaeta. View the logs.


7 years ago

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


7 years ago

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


7 years ago

#30 @rianrietveld
6 years ago

  • Description modified (diff)
Note: See TracTickets for help on using tickets.