WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 7 weeks ago

#46935 closed enhancement (fixed)

Dashboard icons don't pass color contrast

Reported by: melchoyce Owned by: SergeyBiryukov
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch
Focuses: ui, accessibility Cc:

Description (last modified by melchoyce)

The Dashboard icons are mostly #82878c, which is a little too light (3.62 on white, 3.47 on #fafafa).

We could change them all to #606A73, which passes AA on both white and #fafafa, or we could do #606A73 on #fafafa and #6C7781 on white.

Attachments (5)

Dashboard icons - before.png (586.7 KB) - added by melchoyce 5 months ago.
Dashboard icons - 606A73.png (587.9 KB) - added by melchoyce 5 months ago.
Dashboard icons - 6C7781.png (587.8 KB) - added by melchoyce 5 months ago.
46935.diff (569 bytes) - added by chetan200891 5 months ago.
Created patch to change dashboard icons color.
46935.1.diff (569 bytes) - added by chetan200891 2 months ago.
Updated patch.

Download all attachments as: .zip

Change History (17)

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


5 months ago

#2 @melchoyce
5 months ago

  • Description modified (diff)

#3 @desrosj
5 months ago

  • Keywords has-screenshots added
  • Milestone changed from Awaiting Review to Future Release

@chetan200891
5 months ago

Created patch to change dashboard icons color.

#4 @chetan200891
5 months ago

  • Keywords has-patch added

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


3 months ago

#6 @SergeyBiryukov
3 months ago

  • Milestone changed from Future Release to 5.3
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

This ticket was mentioned in Slack in #design by hareesh-pillai. View the logs.


2 months ago

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


2 months ago

#9 @kjellr
2 months ago

  • Keywords needs-design-feedback removed

We could change them all to #606A73, which passes AA on both white and #fafafa, or we could do #606A73 on #fafafa and #6C7781 on white.

We discussed this in Design triage on slack today:
https://wordpress.slack.com/archives/C02S78ZAL/p1563209628387100

This seems like a great change, but I'd suggest we use Mel's first suggestion here — just the single #606A73 color. The two proposed grays are generally close to each other, so it makes sense to just use one and keep things a little more consistent.

@chetan200891 would you mind updating your patch to use #606A73 in both places?

Thank you!

@chetan200891
2 months ago

Updated patch.

#10 @chetan200891
2 months ago

@kjellr I have updated patch.

#11 @kjellr
2 months ago

This looks great! Thanks for the fix, @chetan200891! I think this is ready to go.

Before:

https://cldup.com/saqf3NlhOo-2000x2000.png

After:

https://cldup.com/vHjPrxJSuW-2000x2000.png

#12 @karmatosed
7 weeks ago

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

In 45700:

Admin: Improve Dashboard icon contrast.

The icons used across the dashboard had too low contrast to pass AA WCAG guidelines. They’re now slightly darker for better contrast.

Props @melchoyce, @SergeyBiryukov, @chetan200891 , @kjellr
Fixes #46935

Note: See TracTickets for help on using tickets.