Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#35660 closed defect (bug) (fixed)

Color contrast: the list table views count and all the #999 grays

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


See related #31713.

The list tables display the "views" count number within round brackets using a light #999 gray on a #f1f1f1 background, resulting in a contrast ratio of just 2.52:1. See screenshot below:

I'd propose to use tne new #555d66 dark medium gray which gives a contrast of 5.91:1.

Thinking at the new gray, for consistency all the occurrences of #555 when used for text should probably be replaced with #555d66.

Attachments (3)

35660.patch (8.9 KB) - added by afercia 8 years ago.
35660.2.patch (9.0 KB) - added by afercia 8 years ago.
35660.3.patch (7.4 KB) - added by afercia 8 years ago.

Download all attachments as: .zip

Change History (10)

#1 @afercia
8 years ago

  • Owner set to afercia
  • Status changed from new to assigned

#2 @afercia
8 years ago

  • Summary changed from Color contrast: the list table views count to Color contrast: the list table views count and all the #999 grays

Actually, the light #999 gray for text is used in many other places, both on white backgrounds and gray backgrounds like the #f1f1f1 initially mentioned in this ticket. Going to handle all the #999 text here, new patch incoming.

8 years ago

#3 @afercia
8 years ago

  • Keywords has-patch added; needs-patch removed

The proposed patch should fix all the #999 text with insufficient contrast ratio. Will add a screenshot as soon as possible, with a couple of the most important places where the color should change.

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

8 years ago

8 years ago

#5 @afercia
8 years ago

Refreshed patch. A couple of things:

About the color picker placeholder, will open a separate, generic, ticket for all the input placeholders in the admin. Having read #22689 I think the placeholder issue should be finally addressed but for now, in this ticket, I'd say to just change the color.
Worth noting the specific placeholder for the color picker needs some adjustments, the text doesn't fit and gets cut off, not to mention that string is usually longer in languages other than English

I'd appreciate some feedback about the icon colors fall back, see array( 'base' => '#82878c', 'focus' => '#00a0d2', 'current' => '#fff' )

Screenshot with some examples of the places where the #999 gray is currently used:

8 years ago

#6 @afercia
8 years ago

Refreshed patch, stripping out anything related to input placeholders that have now their separate ticket, see #35777.

#7 @afercia
8 years ago

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

In 36587:

Accessibility: Improve color contrast updating any #999 gray used for text or icons to a darker gray.

Fixes #35660.

Note: See TracTickets for help on using tickets.