Color contrast: the toggle "handles"

[afercia]

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.

[jorbin]

@afercia we should try to get this in soon. Do you want to post a patch and some screenshots for the rest of team Grey ( @melchoyce @hugobaeta et al ) to confirm?

[afercia]

The proposed patch changes the "handle" arrows color using #72777c in most of the cases. A few exceptions for the Widgets screen (where the background is #fafafa and the list tables "toggle-row" when in responsive mode where a slightly darker grey is necessary.

Worth noting in the Customizer, the Widgets .widget-top element inherits the #fafafa background from widgets.css. This is a bit inconsistent with other parts of the Customizer and I'd propose to simply change it in white. See screenshot below, current on the left, new normal state and hover state on the right:

[hugobaeta]

The center screenshot (the after) seems much better. The widget bar feels way less muddled and much clearer. I'd even say that the border could use a little more contrast (not as much as the hover, obviously), but otherwise thumbs-up! :)

[afercia]

Replying to hugobaeta:

The center screenshot (the after) seems much better. The widget bar feels way less muddled and much clearer. I'd even say that the border could use a little more contrast (not as much as the hover, obviously), but otherwise thumbs-up! :)

Thanks @hugobaeta. Yeah, the border color consistency across the admin is something very similar to the excessive amount of grey shades used for text and controls we're currently trying to improve. Would need some serious reconsideration, and probably a new ticket.

[afercia]

In 36959:

Accessibility: Improve the color contrast ratio of the expandable panel "handles".

Fixes #35923.