WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 5 months ago

Last modified 5 months 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:

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 5 months ago.
48128.diff (956 bytes) - added by adhitya03 5 months ago.
Patch
Screenshot_20.png (68.6 KB) - added by adhitya03 5 months ago.
After patch

Download all attachments as: .zip

Change History (14)

@adhitya03
5 months ago

Patch

@adhitya03
5 months ago

After patch

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


5 months ago

#2 @desrosj
5 months ago

  • Component changed from General to Administration

Related: #47153, #47477, #47498.

#3 @audrasjb
5 months 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
5 months 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
5 months 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
5 months 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.


5 months ago

#8 @afercia
5 months ago

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

#9 @afercia
5 months 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
5 months 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
5 months 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.