[wp-trac] [WordPress Trac] #29158: Customizer UI Design lacks contrast for visual hierarchy and does not match wp-admin
WordPress Trac
noreply at wordpress.org
Mon Aug 17 11:47:56 UTC 2015
#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
More information about the wp-trac
mailing list