[wp-trac] [WordPress Trac] #29158: Customizer UI Design lacks contrast for visual hierarchy and does not match wp-admin

[WordPress Trac]

#29158: Customizer UI Design lacks contrast for visual hierarchy and does not match
wp-admin
-----------------------------------+------------------------------
 Reporter:  celloexpressions       |       Owner:
     Type:  enhancement            |      Status:  new
 Priority:  normal                 |   Milestone:  Awaiting Review
Component:  Customize              |     Version:  3.8
 Severity:  normal                 |  Resolution:
 Keywords:  has-patch ui-feedback  |     Focuses:  ui
-----------------------------------+------------------------------

Comment (by celloexpressions):

 Replying to [comment:4 folletto]:
 > This is an accordion issue, which surely could be reduced by a different
 color scheme, but in the end it will still be the issue of using
 accordions. If we switch to sliders for every block we will solve this
 issue once and for all. ;)
 I think our best approach is to do both - utilizing a broader range of
 colors to achieve adequate visual contrast, and doing a better job at
 organizing section and panel hierarchy appropriately.

 I tried exploring some options for side-sliding accordion sections
 (screenshots above), and we're actually going to run into the same colors
 issue if we try to implement it in the current scheme (we either have
 input elements blending into the background (which the admin addresses
 with the global `#f1f1f1` background) or a bunch of slightly different
 grays competing for attention). By leveraging a broader range of colors
 ''and'' removing the accordion behavior, we can achieve a visual and
 organizational distinction between navigation and content.

 For example, when no section is open, everything is dark, but we can use
 bright (colorful) hover/focus states. Once a section is open, most of the
 visible space is on a light background, but the navigation controls at the
 top and bottom remain dark to provide a clear UI hierarchy. I think we
 should try using something like `#000` for the hover/focus-states of the
 back/close buttons instead of the color there, to avoid making it
 distracting (since we removed the blue hover states from the light theme).

 Changing the accordion behavior depends on #28709, but we may be able to
 do this for 4.1 depending on the timing. Also, one note: we should make
 #customize-info, and the panel-description sections retain the accordion
 behavior, since making those side-slide would be pretty inefficient.

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