Problem/Motivation

The WebAIM contrast checker says the sidebar close button contrast is 1.95:1. The button is #55565B and the background is #2A2A2D.

I think it should be at least 3:1 per WCAG SC 1.4.11 Non-text Contrast (Level AA)

Not sure why Axe and Accessibility Insights aren't picking this up. Possibly because it's an inline SVG.

I didn't check against Gin.

Steps to reproduce

  1. Log in as admin.
  2. Go to /admin/appearance.
  3. Set Default Admin as the admin theme.
  4. If it's not already appearing in dark mode, go to /admin/appearance/settings/default_admin, change "Appearance" to "Dark", and submit the form.
  5. Narrow the viewport until Navigation sidebar collapses and the "Expand sidebar" button is visible (< 1024px wide).
  6. Click the the "Expand sidebar" button.
Expected

The sidebar close button has sufficient contrast.

Actual

It has low contrast.

screenshot

Proposed resolution

Make it the same color as the menu buttons in the sidebar (var(--toolbar-button-color)?) or the theme's other close buttons for consistency.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#9 Screenshot 2026-09-14 at 8.36.12 PM.png141.83 KBsmustgrave
#5 3621244-2.patch1.09 KBrupeshghar
#5 after-full.png34.54 KBrupeshghar
#5 before-full.png34.47 KBrupeshghar
navigation-mobile-sidebar-close-button-dark-mode-low-contrast.png103.81 KBkentr

Issue fork drupal-3621244

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

kentr created an issue. See original summary.

kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Issue summary: View changes
rupeshghar’s picture

rupeshghar commented
Status: Active » Needs review
StatusFileSize
new before-full.png34.47 KB
new after-full.png34.54 KB
new 3621244-2.patch1.09 KB

The close button's icon (cross.svg) had its color hardcoded to #55565B instead of using currentColor like all the other sidebar icons do. Because it was hardcoded, it never changed with dark mode. Changed the icon to use currentColor instead of the hardcoded color, so it now matches the other buttons in the sidebar and adjusts properly for dark mode.Please review attached patch

AI-Generated: Yes (Used Claude to help generate the patch and reviewed/tested the output before submitting).
I had not read the policy and had reviewed the output but missed out on disclosure - will ensure to share this info from next time.

kentr’s picture

kentr commented
Status: Needs review » Needs work
Issue tags: +Needs merge request

@rupeshghar thanks for your contribution.

Patches aren't used anymore. It needs to be in a merge request.

rupeshghar opened merge request !17033

rupeshghar’s picture

rupeshghar commented
Status: Needs work » Needs review

@kentr I have updated the previous comment and mention the usage of the AI but also have done the human review. the disclosure was missing which I will take care from next time.
I've also created an MR for this. Thanks

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs merge request
StatusFileSize
new Screenshot 2026-09-14 at 8.36.12 PM.png141.83 KB

Tested with a color contrast tool

pass

And passes, LGTM.

amateescu’s picture

amateescu commented
Status: Reviewed & tested by the community » Needs review

Posted a question on the MR, feel free to self-rtbc once it's addressed or answered.

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

Made the change and verified in darkmode that the mobile hamburger works still.

  • amateescu committed 2f4325e8 on 11.x 
    fix: #3621244 Navigation mobile sidebar close button in dark mode has...

  • amateescu committed 263b7b80 on main 
    fix: #3621244 Navigation mobile sidebar close button in dark mode has...
amateescu’s picture

amateescu commented
Version: main » 11.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 263b7b802ce to main and 2f4325e8e02 to 11.x. Thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

smustgrave’s picture

smustgrave commented

Thanks!