Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#35923 closed defect (bug) (fixed)

Color contrast: the toggle "handles"

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.5 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots color-contrast has-patch commit
Focuses: ui, accessibility Cc:

Description

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.

https://cldup.com/VxmTT4Wh_4.png

Attachments (1)

35923.patch (3.7 KB) - added by afercia 7 years ago.

Download all attachments as: .zip

Change History (7)

#1 @jorbin
7 years ago

  • Owner set to afercia
  • Status changed from new to assigned

@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
7 years ago

#2 @afercia
7 years ago

  • Keywords has-patch commit added; needs-patch removed

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:

https://cldup.com/00IBxPqayi.png

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


7 years ago

#4 follow-up: @hugobaeta
7 years ago

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! :)

#5 in reply to: ↑ 4 @afercia
7 years ago

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.

#6 @afercia
7 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 36959:

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

Fixes #35923.

Note: See TracTickets for help on using tickets.