[wp-trac] [WordPress Trac] #35923: Color contrast: the toggle "handles"

[WordPress Trac]

#35923: Color contrast: the toggle "handles"
-------------------------+-------------------------------------------------
 Reporter:  afercia      |      Owner:
     Type:  defect       |     Status:  new
  (bug)                  |  Milestone:  4.5
 Priority:  normal       |    Version:
Component:               |   Keywords:  has-screenshots needs-patch color-
  Administration         |  contrast
 Severity:  normal       |
  Focuses:  ui,          |
  accessibility          |
-------------------------+-------------------------------------------------
 Toggle panels and accordions in the admin often use a small "arrow" to
 indicate they're interactive elements and at the same time to indicate
 their collapsed/expanded status.

 Since they're actionable UI controls, they should have a sufficient color
 contrast ratio with their background to be clearly perceived by users.

 In most of the cases I was able to check, the handles color is `#a0a5aa`
 on a white background, with a contrast ratio of just 2.48:1. It should be
 at least 4.5:1.

 Also, the Customizer uses the same color for the accordion handles and for
 some more "arrows". See in the screenshot below.

 About the "Screen Options" and "Help" tabs, they have some text so the
 arrows color maybe is not required to have a sufficient color contrast,
 but I'd propose to fix it anyways for consistency.

 When the handles are on a white background, I'd propose to use the new
 gray `#72777c`. Of course, this change would require to darken a bit the
 color used for hover/focus too.

 Please notice sometimes the arrows are on a darker background (see the
 "Format" active accordion in the Customizer), so matching the hover/focus
 states with the "active" one would probably be the best option.

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

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35923>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform