WordPress.org

Make WordPress Core

Opened 8 weeks ago

Closed 7 weeks ago

Last modified 7 weeks ago

#48128 closed task (blessed) (fixed)

Insufficient contrast on select's background-color.

Reported by: adhitya03 Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.3
Component: Administration Keywords: has-patch has-screenshots 5-3-admin-css-changes
Focuses: ui, accessibility, administration Cc:
PR Number:

Description

Insufficient contrast between select's background and wp-admin body's background.
wp-admin body's background-color :: #f1f1f1
wp-admin select's background-color :: #f7f7f7

Recommended Code
wp-admin select's background-color :: #fff
just like an other input and textarea.

Attachments (3)

Screenshot_19.png (70.8 KB) - added by adhitya03 8 weeks ago.
48128.diff (956 bytes) - added by adhitya03 8 weeks ago.
Patch
Screenshot_20.png (68.6 KB) - added by adhitya03 8 weeks ago.
After patch

Download all attachments as: .zip

Change History (14)

@adhitya03
8 weeks ago

Patch

@adhitya03
8 weeks ago

After patch

This ticket was mentioned in Slack in #accessibility by desrosj. View the logs.


8 weeks ago

#2 @desrosj
8 weeks ago

  • Component changed from General to Administration

Related: #47153, #47477, #47498.

#3 @audrasjb
8 weeks ago

  • Keywords reporter-feedback added
  • Owner set to audrasjb
  • Status changed from new to reviewing

Hi and thanks for opening this ticket on WordPress Core Trac!

This ticket was quickly discussed in Accessibility team slack channel, and I have few things about this proposal:

  • I think the dark borders around selects should help to distinguish them from the background color. In my opinion, there is enough color contrast ratio between border and background colors.
  • I may be wrong, but I'm afraid having white background on selects would make them less distinguishable from text inputs.

Any feedback welcome on these concerns :-)

Cheers,
Jb

#4 @afercia
8 weeks ago

  • Milestone changed from Awaiting Review to 5.3

On the other hand, worth considering the current select elements in WP 5.2 do have a white background. Both on pages with the gray background (e.g. the settings pages) and other UI parts where the UI background is white, e.g. the media modal.

WordPress 5.2 selects white background:

http://cldup.com/n2jWmKvsro.png

WordPress current 5.3 trunk, changing selects background from #f7f7f7 to white:

http://cldup.com/1Pdjai5FWu.png

While the #f7f7f7 background is technically compliant seems to me the white background works better and of course it's better for accessibility.

I'd like to propose to explore a lighter background. White or maybe a middle ground between #f7f7f7 and white could work better than the current gray.

#5 @youknowriad
8 weeks ago

I agree the white background is a bit better as it helps to distinguish between dropdowns and default buttons. There's still a potential of confusion but it feels better to me.

#6 @melchoyce
8 weeks ago

I also think white works much better for the select backgrounds. I tend to think of selects, text inputs, textareas, checkboxes, radios, etc. as "inside" elements, and buttons as "outside" elements. They're something you click into to make a change, while buttons exist on a higher plane above them.

This ticket was mentioned in Slack in #design by kjell. View the logs.


8 weeks ago

#8 @afercia
7 weeks ago

  • Keywords 5-3-admin-css-changes added
  • Type changed from defect (bug) to task (blessed)

#9 @afercia
7 weeks ago

  • Keywords reporter-feedback removed

Note: The design and accessibility team discussed this proposed change during the last accessibility team meeting on Slack and agreed to use a white background for the select elements.

#10 @afercia
7 weeks ago

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

In 46337:

Accessibility: Improve and modernize user interface controls. Make the select elements background white.

Props adhitya03.
See #47477.
Fixes #48128.

#11 @afercia
7 weeks ago

In 46340:

Accessibility: After [46337]: make the select elements background white also on hover, active, and focus states.

See #47477.
See #48128.

Note: See TracTickets for help on using tickets.