#31234 closed task (blessed) (fixed)
Update wp-admin default colors
Reported by: | hugobaeta | Owned by: | helen |
---|---|---|---|
Milestone: | 4.2 | Priority: | normal |
Severity: | normal | Version: | 4.2 |
Component: | General | Keywords: | has-patch |
Focuses: | ui, administration | Cc: |
Description
In an effort to document and unify the colors of the WordPress brand, I started slightly adjusting the hues in the default wp-admin color scheme. This exercise ended up translating to a subtle but refreshed update to the admin itself, bringing slightly improved contrast, but also a cool overall hue that conveys a bit more elegance and refinement to the admin. Technically, a ever so slightly blue hue was given to the neutral dark greys. On the blues, I removed the red channel completely and adjusted the green/blue channels to retain similar value.
Attachments (3)
Change History (37)
#2
@
10 years ago
It's incredibly subtle to my color-blind eyes but I really like this. Making the grays cooler and not completely neutral helps them feel more related to the blues. +1
#3
follow-ups:
↓ 4
↓ 5
↓ 6
@
10 years ago
Chrome and Safari show different colors right now (on Mac, of course), especially with blues and reds. In fact, Digital Color Meter shows completely different values for the main highlight blue (e.g. the background color of Dashboard in your screenshot). Can we clean that up so the experience is more consistent? Or is that just an issue with Chrome vs Safari?
#4
in reply to:
↑ 3
;
follow-up:
↓ 7
@
10 years ago
Replying to samuelsidler:
Chrome and Safari show different colors right now (on Mac, of course), especially with blues and reds. In fact, Digital Color Meter shows completely different values for the main highlight blue (e.g. the background color of Dashboard in your screenshot). Can we clean that up so the experience is more consistent? Or is that just an issue with Chrome vs Safari?
Do you use an external monitor?
I should mention that in OS X, every time you change your monitor or monitor profile (e.g. if you switch from your laptop display to your external display), you MUST restart Chrome for it to get the proper monitor profile information from the OS.
Also see: https://code.google.com/p/chromium/issues/detail?id=44872
#5
in reply to:
↑ 3
@
10 years ago
Replying to samuelsidler:
Chrome and Safari show different colors right now (on Mac, of course), especially with blues and reds. In fact, Digital Color Meter shows completely different values for the main highlight blue (e.g. the background color of Dashboard in your screenshot). Can we clean that up so the experience is more consistent? Or is that just an issue with Chrome vs Safari?
I can confirm this. It's the weirdest thing!! I have Chrome, Safari, and Firefox on this screenshot:
Running the mac os color meter over the blue (on Dashboard), Safari does show a different RGB value. But on the safari inspector, the Hex value is the same as the other browsers. Both Chrome and Firefox display the same on the Color Meter.
I'm viewing this on my Thunderbolt Display, connected to my Retina MacbookPro.
#6
in reply to:
↑ 3
@
10 years ago
Replying to samuelsidler:
Chrome and Safari show different colors right now (on Mac, of course), especially with blues and reds. In fact, Digital Color Meter shows completely different values for the main highlight blue
Almost certain this is related to color calibration. Safari is aware of the color profile that's chosen in System Preferences, Chrome isn't. You can test this by comparing the RGB values in Digital Color Meter in Safari and Chrome before and after switching your color profile to sRGB: https://cloudup.com/ciIey_pqXIl
More info: https://code.google.com/p/chromium/issues/detail?id=318005
#7
in reply to:
↑ 4
@
10 years ago
Replying to melchoyce:
Replying to samuelsidler:
Chrome and Safari show different colors right now (on Mac, of course), especially with blues and reds. In fact, Digital Color Meter shows completely different values for the main highlight blue (e.g. the background color of Dashboard in your screenshot). Can we clean that up so the experience is more consistent? Or is that just an issue with Chrome vs Safari?
Do you use an external monitor?
Nope. I've had this problem since MP6 landed at least.
#8
follow-ups:
↓ 9
↓ 33
@
10 years ago
Maybe this is just me, but I like the existing version better. Cooling down the colors in the revised version actually seems to remove the contrast that makes it pop. I will, however, defer to the designers, who know an awful lot more about this than I do :-)
#9
in reply to:
↑ 8
@
10 years ago
- Keywords has-patch added
Replying to DrewAPicture:
Maybe this is just me, but I like the existing version better. Cooling down the colors in the revised version actually seems to remove the contrast that makes it pop. I will, however, defer to the designers, who know an awful lot more about this than I do :-)
I'll follow up on my own comment with a better response.
I agree with @hugobaeta's assertion that the revised scheme lends more toward a sense of elegance and refinement in the admin. My concern lies mostly in that I think applying these changes to the default color scheme as-is would be removing too much personality from the original. I wonder if we could balance the personality of the original with the subtle elegance of the revised version and meet more in the middle.
#10
follow-up:
↓ 11
@
10 years ago
My subjective feeling is that the shift in colors is so slight, it doesn't really change the feeling we intended to convey with the original MP6 colors. If anything, it makes the grays look more intentional, a color palette designed to work harmoniously rather than pairing a signature shade of blue with a lot of neutral grays.
#11
in reply to:
↑ 10
@
10 years ago
Replying to iammattthomas:
My subjective feeling is that the shift in colors is so slight, it doesn't really change the feeling we intended to convey with the original MP6 colors. If anything, it makes the grays look more intentional, a color palette designed to work harmoniously rather than pairing a signature shade of blue with a lot of neutral grays.
@DrewAPicture - MT summed up my intentions quite well with his comment. When I mention refinement and finesse, this is what I mean - an intentional palette that ties in well with what the WordPress brand stands for, while maintaining the levels of accessibility we are accustomed to in core. Regarding that, I actually believe that having white text on a black background isn't the best thing for readability - it actually causes a lot of strain in the eyes due to the maximum contrast. That's why designers usually soften the whites (a very very subtle light gray) for background where we have dark text, and vice-versa.
Here's a closer look at the colors - you can notice I didn't really change the values by much (value = how light or dark the color is). The change is minimal on the blues, even tho I actually removed all red in them. Try squinting your eyes and see the top and bottom circles merge - you can't tell them apart. On the greys, I did make a slight adjustment in value, but only to compensate to what I explained above. The relationship between tones (left-to-right) remains unchanged.
#12
@
10 years ago
- Milestone changed from Awaiting Review to 4.2
I am 100% behind this change. Reality check:
- In practice, you are not going to see large swaths of the altered colors side by side, and it's incredibly unlikely anybody is going to actively notice this. I think this is a good, definitive place to land backed by reasoning and a goal of cohesion. Some themes/plugins will need to adjust, so we should probably announce that somewhere (on top of the documentation in progress).
- Most people are not on beautiful, calibrated monitors. I can see the difference clearly on one monitor, and not at all on another. Right now, the colors are changing again because I use f.lux. That's the real world.
- On top of that, everybody sees/processes color differently. I think the contrast is ever so slightly better after for the most part, but I also know that that is fairly specific to me.
- That Safari thing has ruined my day more than once. I think Firefox respects color management too, or at least is capable of it. Last time I checked, we can't do anything about it except in image files.
Let us not fall into the trap of the thing that is closest to literally painting a bikeshed. Designers approve, it was explored in the context of documenting our overall design language, and it's small. I could use a second eye in reviewing the patch and its effects, though :)
#13
@
10 years ago
@helen as we discussed on slack, I still need to do a new pass on the code to make sure all the values are correct. I can do that in a few days and then post a new patch.
#15
@
10 years ago
I attached a new patch with some revisions, and added the color fallbacks for rgba that @helen requested. I also took some time revising contrast following @DrewAPicture concerns. Please let me know if it's good!
This ticket was mentioned in Slack in #core by drew. View the logs.
10 years ago
#18
@
10 years ago
- Owner set to helen
- Resolution set to fixed
- Status changed from new to closed
In 31422:
This ticket was mentioned in Slack in #forums by otto42. View the logs.
10 years ago
#20
@
10 years ago
I really like these new colors. (Y) +1 @hugobaeta!
Suggestion: The # 191e23 can be a little more darker do provide better contrast on submenus.
#21
@
10 years ago
- Keywords needs-patch added; has-patch removed
- Resolution fixed deleted
- Status changed from closed to reopened
login.css
appears to need treatment.
This ticket was mentioned in Slack in #core by hugobaeta. View the logs.
10 years ago
@
10 years ago
Updated forgotten elements with new colors, including buttons, and SVG logo for login page, amongst others
#23
follow-up:
↓ 24
@
10 years ago
@hugobaeta hi :) was checking the last patch and noticed a couple of things, not arguing, but I'd really like to see this into 4.2
- current patch includes also changes in files inside /wp-admin/css/colors/ shouldn't they be handled with Sass?
- in
login.css
links miss the focus style, would be nice to be consistent and add the standard focus style for links
Also, a while ago I did a little research about insufficient color contrast in the admin and spotted a few places where the contrast should be improved, please let me know if you would like to handle that or maybe better to have a separate ticket for that. Thanks very much, ciao.
#24
in reply to:
↑ 23
;
follow-ups:
↓ 26
↓ 27
@
10 years ago
Replying to afercia:
- current patch includes also changes in files inside /wp-admin/css/colors/ shouldn't they be handled with Sass?
I did a global search and replace, I forgot to exclude those files, damn. @helen, what do you think about this? Is it something easy for you to exclude when merging?
- in
login.css
links miss the focus style, would be nice to be consistent and add the standard focus style for links
If they are missing it, they were already missing it before, you can create a separate ticket for it and I'm happy to help :)
Also, a while ago I did a little research about insufficient color contrast in the admin and spotted a few places where the contrast should be improved, please let me know if you would like to handle that or maybe better to have a separate ticket for that. Thanks very much, ciao.
Yeah, same thing. I think this belongs in a separate ticket and I'm happy to help fixing it!
Thanks for the notes! :)
#26
in reply to:
↑ 24
@
10 years ago
Replying to hugobaeta:
If they are missing it, they were already missing it before
Yup they were already missing, will create new tickets. Thanks :)
This ticket was mentioned in Slack in #core by drew. View the logs.
10 years ago
This ticket was mentioned in Slack in #core by drew. View the logs.
10 years ago
#33
in reply to:
↑ 8
@
10 years ago
Replying to DrewAPicture:
Maybe this is just me, but I like the existing version better. Cooling down the colors in the revised version actually seems to remove the contrast that makes it pop. I will, however, defer to the designers, who know an awful lot more about this than I do :-)
I agree with Drew here. No offense to anyone though.
Subtle, effective, and more coherent. A big +1 from me.