Color contrast: input fields, textareas, select elements etc.

[afercia]

See #35596.

Ideally, all form elements should have at least a contrast ratio of 3:1 with the adjacent background. Reference:

• ​https://www.w3.org/TR/WCAG21/#non-text-contrast
• ​https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Of course, this applies to the controls themselves (e.g. their borders). Text still needs a contrast ratio of 4.5:1.

In some pages in core, for example in the settings ones, the page background is gray. Though not conforming, that helps users in identifying input fields:

However, the input field border should be darker and have a luminosity contrast ratio with the gray background of at least 3:1.

This applies to all the form elements: selects, textareas, etc. (checkboxes and radio buttons are addressed in #35596).

In other pages the background is white (for example the Quick/Bulk edit forms, the Customizer, etc.) but still the border color is too light to have a sufficient contrast ratio.

I'd propose to explore a global solution for all for elements in core and to establish solid conventions about:

• which background colors should be used (for example the Customizer uses a different gray background in some parts of its UI compared to the gray used in other admin pages)
• which color should be used for all the form elements in order to always have a sufficient contrast ratio
• these conventions should be adopted for everything in core, including tools that have been historically considered, in a way, a separated UI like the Customizer

AboutGutenberg, see ​https://github.com/WordPress/gutenberg/issues/7053 and ​https://github.com/WordPress/gutenberg/pull/8037

[afercia]

There are a few tickets now asking for form controls redesign, see #44749, #38150, and #35596.

[audrasjb]

Related: #47153

[afercia]

Closing in favor of #47153 (5.3 blessed task): on current trunk form controls have now new styles for better contrast and focus indication.

[SergeyBiryukov]

Duplicate of #47153.