WordPress.org

Make WordPress Core

Opened 17 months ago

Closed 2 months ago

#44606 closed defect (bug) (fixed)

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

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

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 (4)

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


15 months ago

#2 @afercia
11 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.

#4 @afercia
2 months ago

  • Milestone Future Release deleted
  • Resolution set to fixed
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.