WordPress.org

Make WordPress Core

#35660 closed defect (bug) (fixed)

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

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

Description

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:

https://cldup.com/NWduagxmgp.png

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 20 months ago.
35660.2.patch (9.0 KB) - added by afercia 20 months ago.
35660.3.patch (7.4 KB) - added by afercia 19 months ago.

Download all attachments as: .zip

Change History (10)

#1 @afercia
20 months ago

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

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

@afercia
20 months ago

#3 @afercia
20 months 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.


20 months ago

@afercia
20 months ago

#5 @afercia
20 months 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:

https://cldup.com/gh8rMg7PBv.png

@afercia
19 months ago

#6 @afercia
19 months ago

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

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