Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#31234 closed task (blessed) (fixed)

Update wp-admin default colors

Reported by: hugobaeta's profile hugobaeta Owned by: helen's profile 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.

Here's a comparison of the colors:
http://f.cl.ly/items/3C2s2E133t1u0r202r0U/WordPress-colors-breforeafter.png

Here's a comparison of the wp-admin, before and after:
http://cl.ly/image/1n1q0T0N2L2n/WordPress-wpadmin-colors-breforeafter.png

Attachments (3)

#31234-update-wpadmin-colors.diff (18.9 KB) - added by hugobaeta 10 years ago.
Patch with css updates
#31234-update-wpadmin-colors.2.diff (20.6 KB) - added by hugobaeta 10 years ago.
update-admincolors-forgottenelements.diff (23.5 KB) - added by hugobaeta 10 years ago.
Updated forgotten elements with new colors, including buttons, and SVG logo for login page, amongst others

Download all attachments as: .zip

Change History (37)

#1 @melchoyce
10 years ago

Subtle, effective, and more coherent. A big +1 from me.

#2 @iammattthomas
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

@hugobaeta
10 years ago

Patch with css updates

#3 follow-ups: @samuelsidler
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: @melchoyce
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.

http://stackoverflow.com/questions/6237455/chrome-renders-colours-differently-from-safari-and-firefox

Also see: https://code.google.com/p/chromium/issues/detail?id=44872

Last edited 10 years ago by melchoyce (previous) (diff)

#5 in reply to: ↑ 3 @hugobaeta
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:

http://cl.ly/image/3Y3X2P0h0k35/Screen%20Shot%202015-02-04%20at%202.09.38%20PM.png

Running color meter over them, Safari does show a different RGB value. But on the safari inspector, the Hex value is the same as the other browsers.

I'm viewing this on my Thunderbolt Display, connected to my Retina MacbookPro.

Version 0, edited 10 years ago by hugobaeta (next)

#6 in reply to: ↑ 3 @iammattthomas
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 @samuelsidler
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: @DrewAPicture
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 @DrewAPicture
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: @iammattthomas
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 @hugobaeta
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.

http://cl.ly/image/1T1c3g0O2C1e/WordPress-colors-blues.png

http://cl.ly/image/1g0W0b0e3r3t/WordPress-colors-grays.png

#12 @helen
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 @hugobaeta
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.

#14 @DrewAPicture
10 years ago

  • Type changed from enhancement to task (blessed)

#15 @hugobaeta
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!

For reference, here's a comparison of all the colors I touched:

http://cl.ly/image/2Z1M283T0p1T/oldnew-comparisson-swatches.png

And the new color palette isolated:

http://cl.ly/image/443D1T1A221b/newcolors-swatches.png

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

#16 @DrewAPicture
10 years ago

Before/after w/ .2:

http://f.cl.ly/items/2N191m411b2j2J3b271D/31234.2.before_after.jpg

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


10 years ago

#18 @helen
10 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 31422:

Update the default admin color scheme for more unity and refinement.

This removes the red channel from blues and cools the grays a bit for a more cohesive and purposeful color scheme.

props hugobaeta.
fixes #31234.

This ticket was mentioned in Slack in #forums by otto42. View the logs.


10 years ago

#20 @mrahmadawais
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.

Last edited 10 years ago by mrahmadawais (previous) (diff)

#21 @helen
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

@hugobaeta
10 years ago

Updated forgotten elements with new colors, including buttons, and SVG logo for login page, amongst others

#23 follow-up: @afercia
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: @hugobaeta
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! :)

#25 @DrewAPicture
10 years ago

  • Keywords has-patch added; needs-patch removed

#26 in reply to: ↑ 24 @afercia
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 :)

#27 in reply to: ↑ 24 @afercia
10 years ago

Replying to hugobaeta:
(About color contrast ratio)

Yeah, same thing. I think this belongs in a separate ticket and I'm happy to help fixing

You're welcome on #31713 :) not urgent, since it will be for 4.3 (hopefully).

#28 @jlambe
10 years ago

Nothing to add except that this update will be greatly appreciated. Good job ;)

#29 @DrewAPicture
10 years ago

@hugobaeta: What's left here for 4.2?

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

#32 @helen
10 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 32051:

Update more instances of default admin blues and grays.

props hugobaeta.
fixes #31234.

#33 in reply to: ↑ 8 @johnstonphilip
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.

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


9 years ago

Note: See TracTickets for help on using tickets.