Default Admin Color Scheme Update

Earlier in the 4.2 cycle, I opened a ticket proposing changes to the default color scheme for wp-admin. After much consideration and a few changes, it is being brought into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. I’d like to explain the changes made, and the reason for them in this post!

This started as part of an exercise to document the colors used by core for the Design Handbook (work in progress). My instinct to iterate on the colors and try to make them more harmonious kicked in, and so I ran an experiment that resulted in this:

color-changes-chart

Here’s a breakdown of HEX color changes:

Grays
Old New
#111111 #191e23
#222222 #23282d
#333333 #32373c
#4b4b4b #464b50
#888888 #82878c
#aaaaaa #a0a5aa
#bbbbbb #b4b9be
Blues
Old New
#0074a2 #0073aa
#2ea2cc #00a0d2
#45bbe6 #00b9eb

In essence, the grays were given a slight blue hue, and the for the blues I removed the red channel almost completely, for a purer blue. In both cases, I attempted to keep the value of the colors (lightness/darkness), so the change would be as seamless as possible, while giving the admin a new sense of refinement and identity.

@iammattthomas commented on the ticket, summarizing this change quite eloquently:

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.

 

And here’s a side-by-side comparison of the old (left) and new (right) colors in use on the admin:

color-wpadmin

I believe this updated color scheme can still be iterated upon, specially regarding concerns of contrast and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) (that weren’t addressed in this round, but are certainly a priority for the next release cycle).

I’d love to hear your thoughts!

#4-2, #colors