Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#48128 closed task (blessed) (fixed)

Insufficient contrast on select's background-color.

Reported by: adhitya03's profile adhitya03 Owned by: audrasjb's profile 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:


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

Download all attachments as: .zip

Change History (14)

5 years ago


5 years ago

After patch

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

5 years ago

#2 @desrosj
5 years ago

  • Component changed from General to Administration

Related: #47153, #47477, #47498.

#3 @audrasjb
5 years 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 :-)


#4 @afercia
5 years 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:

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

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

#8 @afercia
5 years ago

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

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