[wp-trac] [WordPress Trac] #62831: Bring in lighter background for admin

[WordPress Trac]

#62831: Bring in lighter background for admin
-----------------------------+----------------------------
 Reporter:  karmatosed       |       Owner:  audrasjb
     Type:  defect (bug)     |      Status:  closed
 Priority:  normal           |   Milestone:  6.8
Component:  Administration   |     Version:
 Severity:  normal           |  Resolution:  fixed
 Keywords:  has-patch early  |     Focuses:  accessibility
-----------------------------+----------------------------

Comment (by johnjamesjacoby):

 This change really highlights how much work the grey background was doing.
 😀

 Conceptually, `#fff` for body-background is fine, but... every admin
 screen looks objectively worse now, and is more difficult to scan for what
 is actionable & important.

 I don't think this can be step-1-of-unlimited across multiple releases.

 > I'm not opposed to change the admin background but it shouldn't be full
 white.

 To me, it looks like a bug – like the CSS of WordPress admin is broken
 because nothing in the wrap area has any color.

 (I just always assume a plugin of mine broke my admin styling, but found
 this change and ticket instead... 🤣)

 > Widgets, tables, and any element with a differing background color
 applied to it do loosing prominence, as previously their boundaries were
 much clearer (with the combined subtle background and border colors).

 Bingo. Especially relative to interactive form elements.

 Specifically:
 * Border color (for wrappers, boxes, sidebars, & fields) closely match
 text color (`#8c8f94` vs `#646970` and `#1d2327`)
 * Input/select/radio/check backgrounds match the body background (`#fff`)
 * Button backgrounds are so lightly grey they may as well be white
 (`#f0f0f1` vs `#fff`)
 * Disabled form elements have more visual emphasis than enabled ones
 (`#f0f0f1` vs `#fff`)
 * Privacy/Site Health are now white-top, white-tabs, white-body (`#fff`)
 * Even more oddly, every-other list-table row is emphasized for no real
 reason (`#f6f7f7`)
 * Currently active plugins really stand out now (blue: `#f0f6fc`)
 * Block widgets still have grey background (`#f0f0f0` – why not `#f0f0f1`
 😅)
 * Old-style H2 tabs still have grey backgrounds (Appearance > Menus,
 BuddyPress/bbPress, `#f0f0f1`)

 > If white background shouldn't be used at all, we should probably make a
 wider statement on the whole ecosystem rather than just avoiding it on WP
 Admin screens except for Gutenberg

 Obviously, there are times & places when bright, vivid, bold colors are
 the right choice. Most human eyes (mine included) crave contrasting
 background colors, because real-world things are uniquely colored and we
 use those differences to gauge base-level concepts like distance, depth,
 importance, relevance, etc...

 If all of WordPress admin body-background is going to be `#fff`, there are
 more than 50 other elements (by my very rough cursory scan of the admin
 area CSS) that should be targeted and made darker at the same time.

 > that's also the case on WordPress.org websites, on this Trac tool and on
 a lot of accessibility compliant websites

 All of these use shades-of-grey 👽 on background elements to provide a
 visual separation, provide emphasis, and draw attention to important
 sections, areas, and controls – and they all could be better, too.

 > Ok but theres a lot of places where full white is used as a background
 color in the WordPress admin. In the Editor(s) of course, but also in Site
 Health or Privacy screens

 Not trying to take a dig at anything or anyone, but the current designs of
 the Editor and Privacy/Site Health pages include many of their own visual
 compromises (and bugs) largely attributed to forcing multiple new & unique
 ideas into the old pages without also fully implementing around existing
 admin-area APIs (help tabs, list-tables, meta-boxes, etc...) so they are
 not helping your argument here I don't think 😅

 ----

 Tangentially, no intention to hi-jack, but I recently used `#fff` for the
 body and something close to `#eee` for the
 [https://bbpress.trac.wordpress.org bb's Tracs] headers & navigations.
 That's not perfect either, but I think it's an improvement and feedback
 has been positive... 🩶

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62831#comment:30>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform