The Vertical orientation button on the right side of the admin menu at large screen sizes (or at the bottom of the admin menu when the menu is already vertically oriented)

screenshot of color contrast test with #bebebe and #f5f5f5

has insufficient color contrast when it is not hovered or not focused. The SVG icon's color is set to #bebebe while the background-color is #f5f5f5

screenshot of the vertical orientation button in the vertical admin menu

When it IS hovered, the SVG icon's color is set to #787878 with the same background color #f5f5f5, which is better, and matches the other icons in the menu

screenshot of the vertical orientation button in the horizontal admin menu

I believe it is this way because this is the only icon in the menu without associated text ... So, the icons that DO have associated text don't have a color change on hover because instead the associated text gets underlined. This one, without associated text, needs a color change on hover to indicate focus/active.

The question is, if the SVG icon color starts at the darker #787878, then what does it transition to on hover/active/focus, as there isn't really an analogous situation as far as I can tell. This is also slightly complicated by the fact that the background color for this one section of the menu is #f5f5f5 rather than #ffffff in the rest of the admin menu, which makes it harder to achieve "good" color contrast with the same icon colors.

Again, the icons are SVGs with a fill attribute specified on their path elements, so that's likely where it should be changed:

core/misc/icons/787878/push-left.svg
core/misc/icons/bebebe/push-left.svg

which are then referenced in:

core/modules/toolbar/css/toolbar.icons.theme.css
core/themes/stable/css/toolbar/toolbar.icons.theme.css

CommentFileSizeAuthor
#28 Screen Shot 2023-02-12 at 5.14.22 PM.png160.78 KBsmustgrave
#27 Before Patch.png8.79 KBrinku jacob 13
#27 Afterpatch.png14.64 KBrinku jacob 13
#26 3047746-26.patch8.24 KBgauravvvv
#24 After_Patch.PNG4.33 KBgaurav-mathur
#24 Before_Patch.PNG4.12 KBgaurav-mathur
#16 3047746-16-comparison.png430 byteslanny heidbreder
#14 drupal-admin-menu-icon-contrast-3047746-14.patch3.84 KBlanny heidbreder
#2 Screen Shot 2019-04-12 at 10.18.50 AM.png1.09 MBbhogue
#2 Screen Shot 2019-04-12 at 10.41.23 AM.png42.57 KBbhogue
#2 Screen Shot 2019-04-12 at 10.41.11 AM.png14.34 KBbhogue

Comments

bhogue created an issue. See original summary.

bhogue’s picture

bhogue commented
Issue summary: View changes
StatusFileSize
new Screen Shot 2019-04-12 at 10.41.11 AM.png14.34 KB
new Screen Shot 2019-04-12 at 10.41.23 AM.png42.57 KB
new Screen Shot 2019-04-12 at 10.18.50 AM.png1.09 MB
bhogue’s picture

bhogue commented
Issue summary: View changes
bhogue’s picture

bhogue commented
Issue summary: View changes
bhogue’s picture

bhogue commented
Issue summary: View changes
bhogue’s picture

bhogue commented
Issue summary: View changes
bhogue’s picture

bhogue commented
Issue summary: View changes
bhogue’s picture

bhogue commented
Issue summary: View changes
bhogue’s picture

bhogue commented
Issue summary: View changes
mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +wcag21

This is a WCAG 2.1 issue. Good to fix, but just noting that.

bhogue’s picture

bhogue commented

Good call, thank you mgifford

andrewmacpherson’s picture

andrewmacpherson commented
Parent issue: » #2910102: Improve icon color contrast for WCAG 2.1

The relevant WCAG 2.1 criterion is "1.4.11 Non-text contrast".

It needs 3:1 contrast with the background.

What are the contrasts for the colours currently used?

Adding this to a parent issue.

dafink’s picture

dafink commented

Could we make this so that the default color is #787878 and have the hover b3 #666666? Or does this have to match a style guide?

lanny heidbreder’s picture

lanny heidbreder commented
StatusFileSize
new drupal-admin-menu-icon-contrast-3047746-14.patch3.84 KB

Patch attached. I chose two colors that already had icon folders: #787878 and #505050. Exactly 3:1 ratio would be #8e8e8e, and these are darker.

The #bebebe version of this icon is orphaned now, I believe; there aren't any other uses of it in Drupal Core that I'm aware of. I'm not sure whether it's a good idea to just delete a tiny asset that developers might have used who-knows-how. I can reroll with the deletions committed if others think that's best.

andrewmacpherson’s picture

andrewmacpherson commented
Issue tags: +Needs screenshots

Can we see screenshots please?

lanny heidbreder’s picture

lanny heidbreder commented
StatusFileSize
new 3047746-16-comparison.png430 bytes

Here's a comparison of the unhovered state. Top is before, bottom is after. The new hover state is darker than the new unhovered state.

lanny heidbreder’s picture

lanny heidbreder commented
Status: Needs work » Needs review
Issue tags: -Needs screenshots

Version: 8.6.14 » 8.6.x-dev

Core issues are now filed against the dev versions where changes will be made. Document the specific release you are using in your issue comment. More information about choosing a version.

Version: 8.6.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Branches prior to 8.8.x are not supported, and Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

gaurav-mathur’s picture

gaurav-mathur commented
Assigned: Unassigned » gaurav-mathur
gaurav-mathur’s picture

gaurav-mathur commented
Assigned: gaurav-mathur » Unassigned
StatusFileSize
new Before_Patch.PNG4.12 KB
new After_Patch.PNG4.33 KB

Patch #14 applied successfully on on Drupal 9.4.8.The looks good for me.
Refer to screenshots.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

gauravvvv’s picture

gauravvvv commented
Component: toolbar.module » Claro theme
StatusFileSize
new 3047746-26.patch8.24 KB

This icon comes from Claro theme. I feel so this issue is of Claro.
I have attached a path for same. Please review.

rinku jacob 13’s picture

rinku jacob 13 commented
StatusFileSize
new Afterpatch.png14.64 KB
new Before Patch.png8.79 KB

I have reviewed patch #26 for drupal version 10.1.x. Actually this icon is in both olivero and claro theme(i didn't checked in other themes).But for only claro it is happening.Adding Screenshots for the reference

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative
StatusFileSize
new Screen Shot 2023-02-12 at 5.14.22 PM.png160.78 KB

Tested it passes using https://www.tpgi.com/color-contrast-checker/

With the fix it is passing.

contrast

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Component: Claro theme » toolbar.module
Status: Reviewed & tested by the community » Needs work

While Claro is shipping some Toolbar CSS, the current Toolbar designs are not specific to Claro. I think this should be also fixed within the Toolbar module.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

quietone commented
Status: Needs work » Postponed

The Toolbar Module was approved for removal in #3476882: [Policy] Move Toolbar module to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3484850: [meta] Tasks to deprecate Toolbar module and the removal work in #3488828: [meta] Tasks to remove Toolbar module.

Toolbar will be moved to a contributed project before Drupal 12.0.0 is released.

quietone’s picture

quietone commented
Project: Drupal core » Toolbar
Version: main » 1.x-dev
Component: toolbar.module » Code
Status: Postponed » Needs work

Toolbar module has moved to contrib.

quietone’s picture

quietone commented
Parent issue: #2910102: Improve icon color contrast for WCAG 2.1 »
Related issues: +#2910102: Improve icon color contrast for WCAG 2.1