Update wp-admin default colors

[hugobaeta]

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:

Here's a comparison of the wp-admin, before and after:

[melchoyce]

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

[iammattthomas]

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]

Patch with css updates

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

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

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

[hugobaeta]

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.

[iammattthomas]

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

[samuelsidler]

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.

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

[DrewAPicture]

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.

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

[hugobaeta]

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.

[helen]

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

[hugobaeta]

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

[hugobaeta]

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:

And the new color palette isolated:

[DrewAPicture]

Before/after w/ .2:

[helen]

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.

[mrahmadawais]

I really like these new colors. (Y) +1 @hugobaeta!
Suggestion: The # 191e23 can be a little more darker do provide better contrast on submenus.

[helen]

login.css appears to need treatment.

[hugobaeta]

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

[afercia]

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

[hugobaeta]

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

[afercia]

Replying to hugobaeta:

If they are missing it, they were already missing it before

Yup they were already missing, will create new tickets. Thanks :)

[afercia]

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

[jlambe]

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

[DrewAPicture]

@hugobaeta: What's left here for 4.2?

[helen]

In 32051:

Update more instances of default admin blues and grays.

props hugobaeta.
fixes #31234.

[johnstonphilip]

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.