[wp-trac] [WordPress Trac] #47153: Field boundaries have insufficient color contrast

[WordPress Trac]

#47153: Field boundaries have insufficient color contrast
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  audrasjb
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  minor                                |  Resolution:
 Keywords:  has-screenshots wpcampus-report      |     Focuses:  ui,
  color-contrast form-controls has-patch needs-  |  accessibility
  testing needs-design-feedback                  |
-------------------------------------------------+-------------------------

Comment (by kjellr):

 ''(Whoops... I originally posted this over in #47150. Sorry about that.)''

 ----

 👋 Thanks for the patch and screenshots, @audrasjb. I've updated the patch
 to include the same color used in #47150 (`#7e8993` instead of `#8d96a0`).

 First, a small note: While this adopts the border color from Gutenberg, it
 doesn't entirely adopt the entire treatment: Focused fields in Gutenberg
 have a thicker border. I think we should probably tie that into this patch
 too so that things are consistent:

 [[Image(https://cldup.com/i4XHxpyXzh.png)]]

 On, then on to the larger notes:

 In general, the interface in WP-Admin is very light and low-contrast. It's
 made up of ''lots'' of light grays. We do need to change the field border
 color to a darker one, but in an interface as light as this, adding such a
 dark color creates a visual hierarchy shift in a few areas. Before we move
 forward, I'd like for us to at least have a plan in mind for balancing
 that out.


 Here's a before and after screenshot of the Categories page for example:

 ''Before''
 [[Image(https://cldup.com/XVgt_6YCiR.png)]]

 ''After''
 [[Image(https://cldup.com/gNiniheJ6z.png)]]

 A couple specific things to point out: In the before screenshot, the table
 comes forward as the main focal point, while the "Add a new category"
 sidebar on the left recedes into the background. In the after screenshot,
 the sidebar is overwhelmingly prominent — it's definitely the first thing
 that draws the eye. The new dark borders of the "Bulk Actions" dropdown
 also add a heaviness that outweighs the table.

 This new imbalance is especially obvious when focusing in on the
 relationship between the `select` components and their action buttons:

 ''Before''
 [[Image(https://cldup.com/FHyGDliQLC.png)]]

 ''After''
 [[Image(https://cldup.com/AJA3RPWRs3.png)]]

 In the before screenshot, the button is (rightly, I'd say) more prominent
 than the `select`. That hierarchy is flipped in the new screenshot. (Since
 Gutenberg uses the same styles that are in this new screenshot, I wonder
 if this should be udpated there too. 🤔)

 ---

 Anyway, I took a really quick stab at evening out some of these
 imbalances, to create a hierarchy that's more similar to what we have
 today:

 [[Image(https://cldup.com/5WgHZIzrSY.png)]]

 In this new example, I've:

 - Darkened the borders of our default buttons so that they're more on par
 with the hierarchy of the form fields.
 - Darkened the checkbox borders to match the form field borders.
 - Darkened the borders and dividers inside of the table on the right, to
 try returning a bit more visual weight to it.

 It's not a fully-thought out solution, but it could be a start. Since this
 is a substantial change, I'd love to get some other designers to weigh in
 on all this too.

 cc @melchoyce, @jasmussen and @davewhitley — I think you'll all be
 interested in this discussion.

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