High contrast mode needs some more refinement

Created on 4 April 2024, over 1 year ago

Problem/Motivation

Before ๐Ÿ› Icons are invisible in high contrast mode Active got fixed icons were invisible in the high contrast now. They are visible now but problem is they are only barely visible and still really hard to recognize. I've tested on the latest version of 1.x-dev with edge on macos (enable automatic dark mode ticked, forced colors active and preer contrast set to more) .

  • the icons as well as the carets are only barely visible
  • the right border of the border is invisible, that way it is impossible to distinguish between drawer and background of the main content area
  • the caret inside the expand and collapse button at the bottom of the sidebar is also close to invisible

  • with the sidebar expanded and the focus on configuration in this case, hovering the mouse cursor over appearance the outline is also hardly noticeable

  • with the sidebar collapsed hovering over a top level item without sub menu items a dark badge is shown in the none high contrast mode. with the high contrast mode on, the dark background of that badge fusions into one with the dark background of the main content area and the sidebar.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

๐Ÿ› Bug report
Status

Active

Version

1.0

Component
Navigationย  โ†’

Last updated about 1 hour ago

No maintainer
Created by

๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @rkoller
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    forgot the mobile viewport. made a few additions to the issue summary

  • ๐Ÿ‡ท๐Ÿ‡บRussia kostyashupenko Omsk

    mmm, i can't reproduce it @rkoller

    so you said:

    enable automatic dark mode ticked, forced colors active and preer contrast set to more

    In the system OS settings on Mac OS i have enabled dark mode
    in MS Edge browser i have enabled forced-colors: active
    and this preer contrast set to more i think you were talking about system OS settings again? I see range bar in the settings to increase contrast (or this setting somehow i can apply inside of MS Edge)?

  • ๐Ÿ‡ช๐Ÿ‡ธSpain ckrina Barcelona
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    no all those three settings were set within ms edge (@mherchel provided the instructions for this handy feature testing high contrast mode a while ago on slack if i remember correctly). you have to add the render tab either to the quick view or move it to the activity bar on top in the ms edge devtools:

    and i then only set and adjust those three settings highlighted:

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States katannshaw Kansas

    Added WCAG 2.2 success criteria and moved steps to reproduce into its own section for easier readability.

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany
  • ๐Ÿ‡ช๐Ÿ‡ธSpain ckrina Barcelona
  • ๐Ÿ‡ช๐Ÿ‡ธSpain ckrina Barcelona
  • ๐Ÿ‡ท๐Ÿ‡บRussia kostyashupenko Omsk

    I can't find solution for this, maybe some hints?

    Maybe we can replace CSS mask-image with embedded svg icons ? Or to use iconic font and content css property (but embedded technology is better)

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia gauravvvv Delhi, India

    I have updated the latest screenshot in the issue summary

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia gauravvvv Delhi, India
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada mgifford Ottawa, Ontario

    For folks testing in high contrast, here is a guide.
    https://www.lambdatest.com/blog/windows-high-contrast-mode/

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada m4olivei Grimsby, ON

    We recently landed ๐Ÿ“Œ Navigation leverage icon core API Needs work , which had a positive impact on Windows High Contrast mode. I'll be doing some testing on the latest 11.x with the goal of updating the issue description to reflect the outstanding issues.

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada m4olivei Grimsby, ON
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada m4olivei Grimsby, ON
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada m4olivei Grimsby, ON

    Added a few more issues that I noticed.

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada m4olivei Grimsby, ON
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia rinku jacob 13 Kerala
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States kentr Durango, CO

    I believe #4 in the IS (regarding the outline of the hovered menu entry) is caused by automatic dark mode. I can't reproduce it in basic forced colors emulation or MacOS Edge with Page Colors.

    I suggest removing that item. @rkoller, does this sound right, and do you agree that item can be removed?

    Is #6 in the IS referring to the hamburger icon that #8 refers to?

    I'm also adding Page Colors to the IS for seeing forced-colors mode. It's a little nicer DX than forced-colors emulation in DevTools.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States kentr Durango, CO

    For IS #9 (gap in menu right border) I'm only seeing the issue in Firefox (Mac).

    Also noticed another issue: The icon next to the username at top is hard to see. It may not be a UX / accessibility problem, though.

    Screenshot attached from Chromium.

    Tweaking the STR a little more.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States kentr Durango, CO

    I retract my previous comment about the interrupted menu right border. I now see it in Edge with Page Colors.

    Suggestion for the remaining hard-to-see inline SVG icons:

    • For the color issue, use currentColor in some form.
    • For the chevrons, give them a stroke with a larger width.

    Here's POC CSS:

    @media (forced-colors: active) {
        svg[class*="toolbar"] path[stroke] {
            stroke: currentColor
        }
        
        svg[class*="toolbar"] path[fill] {
            fill: currentColor
        }
    
        :is(
            .toolbar-button__chevron, 
            .admin-toolbar__expand-button-chevron
        ) path {
            stroke-width: 5%;
            stroke: currentColor;
        }
    }

    Screenshot:

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    thanks for getting some momentum back into this issue @kentr!

    re #21 ๐Ÿ› High contrast mode needs some more refinement Active yep in regard to point 4 i agree, good catch. just retested without the automatic dark mode and the hover looks totally fine and clearly visible to me. on the other hand the active menu item for the current site is close to invisible, but that has already an issue for the none forced color mode ( ๐Ÿ“Œ Make the active menu item visually stand out more Needs work ). so i wonder about two things, should the forced color mode with the active menu item be fixed in the aforementioned issue or within the scope of this issue? and in regard to updating the issue summary, instead of removing point 4 i wonder would it be the better choice to strike it through and leave a note. that way the references of the others points after the current point 4 wouldnt have to be updated throughout the comments?

    in regard to point 6 in the issue summary. i have to admit writing up that issue was a while ago and the issue summary also got updated by other people. not sure i did point 8 back then, that was probably added afterwards by someone else? in regard to point 6, that screenshot was taken with the automatic dark mode checkbox ticked and as outlined it was about the barely visible hamburger icon AND the missing top bar border. you were unable to distinguish what is the page and what is the top bar. but looking at the site without the automatic forced color mode active the issue about distinguishing the top bar due to a not visible border is not an issue without the automatic forced color mode. or wait i was too hasty. the missing top bar border is still an issue for desktop viewports! there it is missing while it is visible for the mobile view port. maybe point 6 should be rescoped to the not visible bottom border in desktop view port and point 8 should be solely about the hamburger. that way the two images used are more appropriate? if you agree i can update both points in a follow up comment.

    re #22 ๐Ÿ› High contrast mode needs some more refinement Active yep i've noticed that as well now. in your example you are referring to the icon in the top bar on a user profile page but the invisible icon also applies to node edit forms. they are using the same image there as well. and the gap i am also still experiencing for the mobile view port in edge.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States kentr Durango, CO

    @rkoller

    in regard to updating the issue summary, instead of removing point 4 i wonder would it be the better choice to strike it through and leave a note

    ๐Ÿ‘ Good idea.

    on the other hand the active menu item for the current site is close to invisible, but that has already an issue for the none forced color mode (#3426468: Make the active menu item visually stand out more). so i wonder about two things, should the forced color mode with the active menu item be fixed in the aforementioned issue or within the scope of this issue?

    I don't know. It may need more than a system-color change.

    I tested ActiveText in all Edge Page Colors themes and using the emulation in Chromium DevTools. The color is indistinguishable from LinkText. Shouldn't ActiveText be a distinct color?

    There was a Chromium bug related to this.

    Here's a screenshot in Page Colors Dusk theme. The "Appearance" item is current and has the following CSS.

    @media (forced-colors: active) {
        .toolbar-button.current {
            color: ActiveText;
        }
    }

    Firefox uses a distinct color for ActiveText.

    maybe point 6 should be rescoped to the not visible bottom border in desktop view port and point 8 should be solely about the hamburger. that way the two images used are more appropriate? if you agree i can update both points in a follow up comment.

    ๐Ÿ‘ Sounds good.

    Adding a new issue: More actions button should have a border (related Slack discussion).

    This may be fixed by ๐Ÿ“Œ Improve visibility of More actions menu button Active , but does the menu "Close" icon also need a border?

Production build 0.71.5 2024