[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:  4.3
Component:  Customize                            |     Version:  3.8
 Severity:  normal                               |  Resolution:
 Keywords:  ui-feedback has-patch needs-testing  |     Focuses:  ui,
                                                 |  accessibility
-------------------------------------------------+-------------------------
Changes (by celloexpressions):

 * keywords:  needs-patch ui-feedback => ui-feedback has-patch needs-testing


Comment:

 [attachment:29158.borders.diff] takes another look at this, specifically
 focusing on improving visual focus styling for accessibility purposes
 (including better contrast for users with less-than-ideal screens).

 This patch introduces darker borders and slightly darkens the text color
 to accentuate the extremely slight difference in background color that is
 currently in place. Additionally, rather than adding an even darker
 border, colored box-shadow, or other more distracting focus indicator, it
 implements an icon change that makes it easy to distinguish the
 hovered/focused item fr om the others. In practice, playing around with
 the patch, I think it works, but I'm interested in other opinions on this.

 Leveraging borders as a means for improving contrast/distinction between
 elements is the broader proposed solution here, and would be the
 recommended way for developers to introduce hierarchy when color isn't
 enough in the Customizer. This allows us to keep the light UI without
 using too many different grays and while ensuring there is adequate
 contrast between elements of different hierarchies. I've audited the use
 of borders throughout the Customizer navigation for consistency in this
 patch as well.

 Once we've resolved this for the main navigation and general governing
 principles, we can address more specific issues like unifying widgets and
 menus and improving visual contrast and hierarchy there (in #32679).

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