[wp-trac] [WordPress Trac] #44606: Color contrast: input fields, textareas, select elements etc.

[WordPress Trac]

#44606: Color contrast: input fields, textareas, select elements etc.
------------------------------+--------------------------------------------
 Reporter:  afercia           |      Owner:  (none)
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:  Awaiting Review
Component:  Administration    |    Version:
 Severity:  normal            |   Keywords:  color-contrast has-screenshots
  Focuses:  ui,               |
  accessibility               |
------------------------------+--------------------------------------------
 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:

 [[Image(http://cldup.com/QUR295AzGJ.png)]]

 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/44606>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform