Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#35777 closed defect (bug) (fixed)

Color contrast: the input placeholder

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


In a few places in the admin screens WordPress uses placeholder attributes for some input fields. Sooner or later the placeholder usage should be reviewed from an accessibility perspective but for now, this ticket aims to focus on a single aspect: color contrast.

Looking back at some history, I'd agree with Helen's comment on #22689: targeting internal browser CSS can be hard, especially in terms of maintenance. On the other hand, if WordPress is going to use placeholders, then I'd say we should make sure there's a sufficient color contrast ratio between the placeholder text and the input background.

Worth noting the style introduced in [22986] doesn't work any more since Firefox 19. Firefox now uses a pseudo element selector ::-moz-placeholder.

Also, the placeholder in the "toolbar" search field (appears only when logged in on the front end), was removed a few years ago in [19518] see ticket #19370, but both admin-bar.css and _admin.scss still use over qualified selectors to target it.

About the color picker placeholder: I don't see the reason why the cursor should be centered. Also, not all browsers support text-align on input fields. Removing the centered alignment would also allow to remove the transparent color used on focus, see [20936].

As a best practice I'd recommend to don't try to alter native browsers controls. Placeholders are supposed to work in a certain way, they shouldn't disappear on focus. If there are concerns about user being potentially confused by placeholders, then maybe they shouldn't be used in the first place.

Worth noting the placeholder text in the color pickers used in the Customizer doesn't fit the input field and gets cut off. Languages other than English may have longer translations too. Probably worth a separate ticket.

Here's some of the places where placeholders are currently used:

  • media modal
  • themes search
  • plugins search
  • Customizer, in several places
  • get_search_form()
  • color picker
  • Press This
  • file system credentials form
  • the new wplink inline toolbar, see #33301

Attachments (2)

35777.patch (3.5 KB) - added by afercia 8 years ago.
35777.2.patch (4.1 KB) - added by afercia 8 years ago.

Download all attachments as: .zip

Change History (10)

8 years ago

#1 @afercia
8 years ago

  • Keywords has-patch color-contrast added
  • Owner set to afercia
  • Status changed from new to assigned

First pass.

#2 @afercia
8 years ago

  • Keywords has-screenshots added

A quick example, before and after the patch (latest Chrome):

The patch doesn't touch placeholders used in Press This, they should be reviewed too.

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

8 years ago

#4 @afercia
8 years ago

About Press This, it uses a "real" placeholder in a few places and a "fake" one in the Title field. The real ones should have a contrast ratio of at least 4.5:1 and the "fake" one a contrast ratio of at least 3.0:1 (because the font size is bigger than 24px).

8 years ago

#5 @afercia
8 years ago

Refreshed patch to take care of the Press This placeholders. Screenshot with the patch applied:

cc @michaelarestad

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

8 years ago

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

8 years ago

#8 @afercia
8 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 36619:

Accessibility: Improve the color contrast ratio for the input placeholders.

Also, cleans up a bit the CSS removing rules for elements that don't use
placeholders any more.

Fixes #35777.

Note: See TracTickets for help on using tickets.