WordPress.org

Make WordPress Core

#35777 closed defect (bug) (fixed)

Color contrast: the input placeholder

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

Description

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 20 months ago.
35777.2.patch (4.1 KB) - added by afercia 19 months ago.

Download all attachments as: .zip

Change History (10)

@afercia
20 months ago

#1 @afercia
20 months ago

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

First pass.

#2 @afercia
20 months ago

  • Keywords has-screenshots added

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

https://cldup.com/TvBJUz3DJN.png

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.


20 months ago

#4 @afercia
19 months 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).

https://cldup.com/fXC21kZByR.png

@afercia
19 months ago

#5 @afercia
19 months ago

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

https://cldup.com/iuRu3hJ63G.png

cc @michaelarestad

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


19 months ago

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


19 months ago

#8 @afercia
19 months 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.