[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:  assigned
 Priority:  normal                               |   Milestone:  Future
Component:  Customize                            |  Release
 Severity:  normal                               |     Version:  3.8
 Keywords:  ui-feedback has-patch needs-testing  |  Resolution:
                                                 |     Focuses:  ui,
                                                 |  accessibility
-------------------------------------------------+-------------------------
Description changed by rianrietveld:

Old description:

> WordPress 3.8 (and the mp6 project) introduced a new design language for
> the WordPress admin, including a flatened design, higher contrast, more
> color, an icon font, and more. While it reskinned the Customizer, further
> work on the Customizer UI has proven difficult because the Customizer
> still lacks enough contrast for proper focus/hover/active styling.
>
> Implementing things like Widgets, Menus, and Panels into the Customizer,
> has shown that most background colors need to be between #fff (the
> section heading color) and #eee. This makes it extremely difficult to
> create visual hierarchy between UI elements using color.
>
> Customizer controls themselves are on a white background, not the off-
> white that is now used in wp-admin, making input elements stand out less
> and generally making something about the Customizer UI not feel very
> "WordPress". While the other accordion in the admin (in Menus) also uses
> this convention, it doesn't fit well in the Customizer since the
> Customizer accordion contains the primary actions.
>
> The goal of this ticket is to introduce more breathing room for stronger
> visual hierarchy in new development with the Customizer, and to resolve
> the lack of contrast for focus/hover and active (open/current-section)
> states. Additionally, we should address concerns that the Customizer
> doesn't really match wp-admin (or the front-end toolbar, for that matter,
> which it should be more similar to given the front-end context) in the
> process.
>
> MP6 did experiment with a considerably different design for the
> Customizer at one point, but it was pulled because the dark styling,
> which was keyed to color schemes, was too heavy, and felt more
> appropriate for a menu than for tools. However, one potential option for
> addressing this ticket is to re-explore color scheme integration, since
> color schemes are under-utilized in the Customizer. This is one approach
> I'm proposing, but not the only possible solution here. Many options have
> been explored, and I like this the best, but this is design so not
> everyone will. I'm open to anything that addresses the issues above.
>
> The coming patch uses admin menu colors (keyed to colorschemes) for the
> navigation components of the Customizer, but uses wp-admin body styling
> (the off-white background and light UI) for the functional tools/controls
> regions of the Customizer. Not perfect, but an interesting proof-of-
> concept at the very least, and does address some of the issues with this
> approach in mp6.

New description:

 WordPress 3.8 (and the mp6 project) introduced a new design language for
 the WordPress admin, including a flatened design, higher contrast, more
 color, an icon font, and more. While it reskinned the Customizer, further
 work on the Customizer UI has proven difficult because the Customizer
 still lacks enough contrast for proper focus/hover/active styling.

 Implementing things like Widgets, Menus, and Panels into the Customizer,
 has shown that most background colors need to be between #fff (the section
 heading color) and #eee. This makes it extremely difficult to create
 visual hierarchy between UI elements using color.

 Customizer controls themselves are on a white background, not the off-
 white that is now used in wp-admin, making input elements stand out less
 and generally making something about the Customizer UI not feel very
 "WordPress". While the other accordion in the admin (in Menus) also uses
 this convention, it doesn't fit well in the Customizer since the
 Customizer accordion contains the primary actions.

 The goal of this ticket is to introduce more breathing room for stronger
 visual hierarchy in new development with the Customizer, and to resolve
 the lack of contrast for focus/hover and active (open/current-section)
 states. Additionally, we should address concerns that the Customizer
 doesn't really match wp-admin (or the front-end toolbar, for that matter,
 which it should be more similar to given the front-end context) in the
 process.

 MP6 did experiment with a considerably different design for the Customizer
 at one point, but it was pulled because the dark styling, which was keyed
 to color schemes, was too heavy, and felt more appropriate for a menu than
 for tools. However, one potential option for addressing this ticket is to
 re-explore color scheme integration, since color schemes are under-
 utilized in the Customizer. This is one approach I'm proposing, but not
 the only possible solution here. Many options have been explored, and I
 like this the best, but this is design so not everyone will. I'm open to
 anything that addresses the issues above.

 The coming patch uses admin menu colors (keyed to colorschemes) for the
 navigation components of the Customizer, but uses wp-admin body styling
 (the off-white background and light UI) for the functional tools/controls
 regions of the Customizer. Not perfect, but an interesting proof-of-
 concept at the very least, and does address some of the issues with this
 approach in mp6.

 Tracking label: #a11y-color

--

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