Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 4 years ago

#44606 closed defect (bug) (duplicate)

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

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


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:

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 and

Change History (5)

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

6 years ago

#2 @afercia
5 years 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 years ago

Related: #47153

#4 @afercia
5 years 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.

#5 @SergeyBiryukov
4 years ago

  • Resolution changed from fixed to duplicate

Duplicate of #47153.

Note: See TracTickets for help on using tickets.