Project: Reducing Colors in Core

The Design Team provides design for the WordPress project.

Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.

Figma Access

You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.

Hey folks! Over in #core-css, we’ve been trying to audit and simplify the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. used in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Part of that includes simplifying the colors used throughout wp-admin, and we could really use your guidance here.

We have an automated tool that will replace all the colors in WordPress’s CSS with the closest color in a given list – which will let us quickly standardize on a color palette. In fact, this demo reduced the number of unique colors from 201 to 100.

The main question we have: Is this color palette the correct set of colors to use (from @drw158 in Nov 2019)? I’ve also seen this g2 list, and I know there are some colors identified in the Figma.

Once we decide on a color list, we’ll also need some help checking over each screen to make sure the replacements look good and have sufficient color contrast. It would be great to get some volunteers working together from design, 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), and core-css. If you are interested in helping with this work, please leave a comment on this post, or drop a message in the #core-css channel in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

For reference, here are some before & after screenshots of a few wp-admin pages using the current colors, and the same pages using this reduced set of colors.

CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. with reduced colors

+make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//accessibility

ryelle 3:22 pm on September 18, 2020

+make.wordpress.org/accessibility/
Andrew Ozz 7:13 am on September 23, 2020

How would adopting reduced colors affect the existing admin color schemes, all nine of them?

Some of them have been “broken” since 5.3. (The worst “breakage” cases were fixed but there are still some pretty glaring inconsistencies and annoyances like a focused form field getting a red outline in “Midnight” which generally is interpreted as “error”, or the “Light” scheme having very dark borders only on some elements.)

Perhaps it would be good to look at reducing the number of the Admin Color Schemes and fixing/refreshing the rest while adopting reduced colors?
- ryelle 2:22 pm on September 23, 2020
  
  This stage of the project doesn’t touch color schemes, but the goal of #49999 is to fix/update color schemes so we can (probably) retire (or reimagine) the current schemes and make it easier to create better schemes, for example a proper dark mode scheme. (and yes, the current idea is to use CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. custom properties 🙂 )
  
  I didn’t want to get too technical on this post, so you can see more dev details in this comment.
Andrew Ozz 7:28 am on September 23, 2020

Another suggestion: could the colors be implemented with CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. custom properties a.k.a. “variables”, https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties. This would let plugins (or even users) easily add new or tweak existing color schemes.
Boy Witthaya 6:55 pm on September 23, 2020

From today’s design meeting, we have a consensus to go with Dave’s proposal (https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/) then iterate.

I’m happy to volunteer working together with the #coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-css team!

Comments are closed.

The Design Team provides design for the WordPress project.

More information

Share this:

Site resources