Increase the color contrast of the toggle button border

The caret facing to the left is more or less invisible to most users I would think. It is too easy to miss as it isn't where folks are looking for this kind of a link.

This isn't a Gin issue specifically.

I think the menu module is the right place to do this.

I don't know if this should be just for folks who have configured their browsers correctly, but we can start with them:

@media (prefers-contrast: more), (forced-colors: active) {

  .admin-toolbar__expand-button {
    forced-color-adjust: none;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 4px solid ButtonText !important;
    box-shadow: none !important;
  }

  .admin-toolbar__expand-button:hover,
  .admin-toolbar__expand-button:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    border-color: HighlightText !important;
    outline: 4px solid Highlight !important;
    outline-offset: 2px;
  }

  /* Make SVG chevron icon visible */
  .admin-toolbar__expand-button-chevron {
    fill: ButtonText !important;
    stroke: none !important;
  }
}

It would be interesting to see how that button features in user research. Certainly unsure how it would do with users who are using screen magnifiers.

that button is strictly speaking in the navigation module. i posted it in the gin queue as well due to the fact that there is a dark and light mode and navigation in core only has a light mode so far. that was the reasoning behind opening an issue in gin as well.

I can move this to the navigation module.

Is there a duplicate issue for this, or are you suggesting there should be another issue opened up?

In Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies → . Thanks

Hi,
I checked and compared the colors of both carets. The right caret has a color of #4F5661, which gives a contrast ratio of 7.4:1, while the left caret uses #8590A3, resulting in a lower contrast ratio of 3.22:1.

Just to confirm — would you like me to update the left caret to use the same color as the right (#4F5661) for consistency and better contrast? Please confirm so I can proceed accordingly.

I used the WebAIM Contrast Checker to verify the ratios.

Yes. That sounds right to me. Using the same color would make it easier to identify. Thanks.

Cool. Thanks for confirming. I am working on it.

I have change the color of the arrow of toggle button to increase the contrast.

Hi, I've applied MR!12375 and verfied the changes and they are working as expected.

Testing Steps:
1. Enabled Navigation Module
2. Check the Toggle button color in left drawer
3. Observe the changes there.

Testing Result:
The color of both the toggles look same and the color contrast also got increases. Attaching screenshots fore reference. Can move this to RTBC+1

Status : PASS

The slight color change in the arrow is OK on a visual perspective.

nod_ → closed merge request !12735

Committed and pushed d6f8e99c4cd to 11.x and 9271a55faa8 to 11.2.x. Thanks!