Proposal: a new color palette for WordPress

Just like my previous posts on type scale and spacing, a standardized approach to color enforces consistency and simplifies decision making for UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. design. It can also make it easier to adhere to web accessibility guidelines. This post aims to point out the opportunities we have today, propose a new color palette, and suggest how to implement it.

Continue reading

#colors, #style-guide

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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. cycle).

I’d love to hear your thoughts!

#4-2, #colors