Insufficient contrast on select's background-color.

[adhitya03]

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.

[adhitya03]

Patch

[adhitya03]

After patch

[desrosj]

Related: #47153, #47477, #47498.

[audrasjb]

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

[afercia]

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.

[youknowriad]

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.

[melchoyce]

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.

[afercia]

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.

[afercia]

In 46337:

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

Props adhitya03.
See #47477.
Fixes #48128.

[afercia]

In 46340:

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

See #47477.
See #48128.