WordPress.org

Make WordPress Core

#44209 closed defect (bug) (fixed)

Admin Menu SVG Icon colour wrong in Default colour scheme

Reported by: swift Owned by: swift
Milestone: 5.1 Priority: normal
Severity: normal Version: 4.5
Component: Administration Keywords: has-screenshots good-first-bug
Focuses: ui, administration Cc:
PR Number:

Description

When using a SVG as an icon for an admin menu, the default color scheme shows the svg icons as a different colour (#82878c) than font icons (#a0a5aa). Other colour schemes seem to render svg icons correctly. Seems like it's related to /wp-includes/general-template.php line 3886 (WP 4.9.5), and possibly /wp-admin/includes/misc.php line 713. Changing 'base' => '#82878c' to 'base' => '#a0a5aa' fixes the issue for me.

Attachments (2)

Screen Shot 2018-05-23 at 8.00.32 PM.JPG (14.7 KB) - added by swift 21 months ago.
SVG Admin Icon colour wrong in default colour scheme (eg. Conference vs. Comments)
#44209.diff (907 bytes) - added by swift 17 months ago.
patch for this bug

Download all attachments as: .zip

Change History (13)

@swift
21 months ago

SVG Admin Icon colour wrong in default colour scheme (eg. Conference vs. Comments)

#1 @desrosj
17 months ago

  • Keywords needs-patch has-screenshots good-first-bug added

@swift
17 months ago

patch for this bug

#2 @swift
17 months ago

  • Keywords has-patch added; needs-patch removed

I've made a patch for this - it's my first ever so hopefully it's correct.

#3 @dschalk
17 months ago

  • Resolution set to worksforme
  • Status changed from new to closed

I have tested this and can confirm that it works :)

#4 @dschalk
17 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

#5 @desrosj
17 months ago

  • Keywords commit added
  • Milestone changed from Awaiting Review to 4.9.9
  • Owner set to swift
  • Status changed from reopened to assigned
  • Version set to 4.5

Assigning to mark good-first-bug claimed. Thanks for the patch, @swift, and thank you for testing @dschalk!

It looks like this color was changed in [36587]. The goal there was to improve color contrast for a11y. This change makes the colors consistent while maintaining a proper level of contrast.

I was able to reproduce the issue with several plugins that use SVG icons, and #44209.diff fixed them all for me.

#6 @pento
16 months ago

  • Milestone changed from 4.9.9 to 5.0.1

#7 @pento
14 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#8 @pento
14 months ago

  • Milestone changed from 5.0.2 to 5.0.3

#9 @desrosj
13 months ago

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

In 44353:

Administration: Update default fallback color for SVG icons.

Currently, when an SVG is used as a menu icon, the color is inconsistent with the other, default dashicons and the contrast ratio does not meet the minimum requirement for accessibility.

This updates the base color for the default fresh color scheme to ensure consistency and proper contrast.

Props swift, dschalk.
Fixes #44209.

#10 @desrosj
13 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport consideration.

#11 @desrosj
13 months ago

  • Keywords has-patch commit removed
  • Milestone changed from 5.0.3 to 5.1
  • Resolution set to fixed
  • Status changed from reopened to closed

Since 5.0.3 is for block editor improvements, regressions, and major bug fixes, let's leave this in 5.1.

Note: See TracTickets for help on using tickets.