#31459 closed task (blessed) (fixed)
Update WP-admin Buttons
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 )
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
Attachments (8)
Change History (64)
#1
@
10 years ago
Not sure I can tell if they're illustrated above - focus, hover, and active states?
#2
@
10 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:
↓ 5
@
10 years ago
These changes should also apply to .wp-slider .ui-slider-handle
for consistency. This is the slider used on the Revision screen.
#5
in reply to:
↑ 3
@
10 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?
This ticket was mentioned in Slack in #core by johnbillion. View the logs.
10 years ago
#9
follow-up:
↓ 10
@
10 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
@
10 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
@
10 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
@
10 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:
↓ 14
@
10 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:
↓ 15
↓ 16
@
10 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
@
10 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
@
10 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
#18
@
10 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.
10 years ago
#20
@
10 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
@
10 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:
↓ 23
@
10 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
@
10 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?
This ticket was mentioned in Slack in #design by hugobaeta. View the logs.
9 years ago
#25
@
9 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).
(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?
This ticket was mentioned in Slack in #core by hugobaeta. View the logs.
9 years ago
This ticket was mentioned in Slack in #design by hugobaeta. View the logs.
9 years ago
This ticket was mentioned in Slack in #design by hugobaeta. View the logs.
9 years ago
This ticket was mentioned in Slack in #design by hugobaeta. View the logs.
9 years ago
@
9 years ago
Update buttons style, including tweaks for color schemes, and update to press this split button
#33
@
9 years ago
Just added a new patch (sorry for the two uploads, forgot something on the first) )that optimizes the code for the buttons a little bit, cleans up a few of the changes I made before. I also tested and changed the .scss mixin for the color schemes so they reflect the new button styles and patterns (lighter button on hover, etc). Finally, per @helen request, I tweaked the Press This split button to match the new style, but I had to make a couple of changes to make it work. This needs some other set of eyes on it, I'm sure, but I think it's on the right track.
Some screenshots with examples:
This ticket was mentioned in Slack in #design by hugobaeta. View the logs.
9 years ago
#35
@
9 years ago
@hugobaeta: Have you had a chance to take a look at the tweaks yet? I'll copy them here just so we all have an easy reference:
- ease on the active text color (too light, looks disabled)
- increase shadow contrast (notice midnight scheme)
- Increase box-shadow on larger buttons
- remove translateY from split-button (Press This)
#36
@
9 years ago
Adding a note here as reminder, would be great to do this in conjunction with #32915.
#37
follow-up:
↓ 38
@
9 years ago
Was trying to write a decent commit message, but apparently it didn't went through with the patch...
I did all the needed fixes:
- Lightened the active text color;
- increased the text-shadow contrast (for color schemes)
- Increased box-shadow on the hero-button
- removed translateY from the split-button (Press This)
Note, @afercia - I purposefully didn't touch the outline on the focus styles in these patches. I was thinking of leaving that for your ticket, since it's already open.
Also, another note, it's important to remember that controlling contrast in the color schemes is a complicated business, since it all depends of the colors people use there. @helen mentioned the lack of contrast on the Midnight scheme, but actually there are worst ones. The only way we could control that would be to use a Sass library to assess color contrast between text color and button background. Maybe something like this, but I know I've seen more evolved solutions, just need to research it better if that's the way we wanna go. Either way, I think this is out of scope to this ticket, and should be addressed elsewhere IMO ;)
#39
@
9 years ago
- Keywords has-patch needs-screenshots added
Can some updated screenshots be added please?
#40
@
9 years ago
@johnbillion, not much has changed since last screenshot, but here are some animated gifs so the states can be seen:
Funny enough, looking at these gifs in one place brings up some stuff:
- hero-button has no outline on focus
- Slipt-button in Press This is a pain, because it doesn't use any of the normal wp-admin button styles - it's a complete separate button, and the main notable different I spot here is the text weight being different
- seeing the buttons zoomed in like this also makes me think about the inner box-shadow on :active... maybe it needs some blur to soften it a bit. Thoughts?
#42
@
9 years ago
The text-shadow
property added to .wp-core-ui .button-primary
and friends in [34948] is causing some ugliness for plugins that introduce their own color schemes.
Screenshot's imminent.
This ticket was mentioned in Slack in #design by helen. View the logs.
9 years ago
@
9 years ago
I'm embarrassingly unfamiliar with many of our admin color-sheme mixins, but rgba()
seems to make this a bit more adaptable.
#44
@
9 years ago
My 30 second attempt at improving this ended up being:
text-shadow: 0 -1px 1px rgba(0, 0, 0, .23), 1px 0 1px rgba(0, 0, 0, .23), 0 1px 1px rgba(0, 0, 0, .23), -1px 0 1px rgba(0, 0, 0, .23);
...but I'm unsure how that translates to mixins or whether or not there's any history behind not using rgba()
for weird little quirks like these.
#45
@
9 years ago
Hey @johnjamesjacoby - The text-shadow color is relative to the button color. If you check out the mixin in the color schemes Sass folder you can see how I did it. The color formula for the text shadow is basically darkening the button color by 15%, like so:
darken( $button-color, 15% )
This text shadow is a new thing, and is there to help with color contrast for accessibility. The plugins that customize the admin can use the formula in the mixin to generate updated color schemes.
Hope this helps!
#46
follow-up:
↓ 54
@
9 years ago
@hugobaeta Should we update the blue color for disabled buttons? See https://wordpress.slack.com/archives/core/p1445007736000576.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
9 years ago
#49
@
9 years ago
- Keywords has-screenshots added; needs-screenshots removed
- Resolution fixed deleted
- Status changed from closed to reopened
- Type changed from enhancement to task (blessed)
Reopening for 46.
This ticket was mentioned in Slack in #core by wonderboymusic. View the logs.
9 years ago
#54
in reply to:
↑ 46
@
9 years ago
Replying to ocean90:
@hugobaeta Should we update the blue color for disabled buttons? See https://wordpress.slack.com/archives/core/p1445007736000576.
Definitely, I missed that. I'm not in a place where I can make a patch right now, but did a quick inspector tweaking and if someone could make a patch for it, that would be great:
The colors are:
color: #66C6E4 !important background: #008EC2 !important; border-color: #007CB2 !important;
The color schemes mixin seems to be making the right disabled version correctly for those, so no worries there.
Patch with updated CSS