WordPress.org

Make WordPress Core

Opened 14 months ago

Last modified 5 weeks ago

#44606 new defect (bug)

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

Reported by: afercia Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: color-contrast has-screenshots form-controls
Focuses: ui, accessibility Cc:

Description

See #35596.

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

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:

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

Change History (3)

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


12 months ago

#2 @afercia
8 months ago

  • Keywords form-controls added
  • Milestone changed from Awaiting Review to Future Release

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

#3 @audrasjb
5 weeks ago

Related: #47153

Note: See TracTickets for help on using tickets.