Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#45280 closed defect (bug) (fixed)

Events and News dashboard widget: improve the color contrast

Reported by: afercia's profile afercia Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots good-first-bug has-patch
Focuses: ui, accessibility Cc:

Description

In the Events and News dashboard widget, all the gray text in the area highlighted in the screenshot below is currently #72777c on a very light gray background #fafafa.

http://cldup.com/6XaDm94L4K.png

This colors combination has a contrast ratio of 4.33:1 while it should be at least 4.5:1, see
https://jdlsn.com/color/?type=hex&color=72777c&color2=fafafa

The text should use a slightly darker gray. Among the grays in the current official color palette, the one to use is "DARK GRAY 400" #606A73.

WordPress color palette references:

See also #40633

Attachments (2)

45280.diff (379 bytes) - added by boemedia 6 years ago.
45280.2.diff (370 bytes) - added by lucagrandicelli 6 years ago.
Actually, i think a darker gray is way better. The original colour (#72777c) is the same of the rapid draft input placeholders, which obviously have not the same relevance of an event date. I suggest Dark Gray 800: #23282d

Download all attachments as: .zip

Change History (11)

#1 @afercia
6 years ago

  • Keywords good-first-bug added

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


6 years ago

This ticket was mentioned in Slack in #core by boemedia. View the logs.


6 years ago

#4 @boemedia
6 years ago

I've made the changes in the corresponding css-file. However, at the moment I'm lost in the magical mystical world of how to create a patch. Once I've figured it out, I'll upload the patch to this ticket.

@boemedia
6 years ago

#5 @boemedia
6 years ago

  • Keywords has-patch needs-testing added

It seems like I finally managed to create a working patch. It's my first one, so if anyone is willing to test it, I'd be really happy :)

@lucagrandicelli
6 years ago

Actually, i think a darker gray is way better. The original colour (#72777c) is the same of the rapid draft input placeholders, which obviously have not the same relevance of an event date. I suggest Dark Gray 800: #23282d

This ticket was mentioned in Slack in #core by sergey. View the logs.


6 years ago

#7 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 5.1
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#8 @afercia
6 years ago

  • Keywords needs-testing removed

Let's go for something in between: #32373c is the "base gray", already used for text in several other cases.

#9 @afercia
6 years ago

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

In 44549:

Accessibility: Improve color contrast ratio in the Events and News dashboard widget.

Props boemedia, lucagrandicelli.
Fixes #45280.

Note: See TracTickets for help on using tickets.