Opened 7 years ago
Closed 7 years ago
#35923 closed defect (bug) (fixed)
Color contrast: the toggle "handles"
Reported by: |
|
Owned by: |
|
---|---|---|---|
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.
Attachments (1)
Change History (7)
#2
@
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:
This ticket was mentioned in Slack in #core by chriscct7. View the logs.
7 years ago
#4
follow-up:
↓ 5
@
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
@
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.
@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?