High contrast mode not working with diagram SVG

[robertfoobar]

Describe the Bug

Visually impaired users, who use e.g. Windows high contrast mode, cannot properly perceive diagram representations in the browser.

Steps to Reproduce

1. Create a diagram using bpmn.io inside the browser
2. Activate Windows high contrast mode

Expected Behavior

Colors of the diagrams SVG elements (arrows, outlines of elements, text) should be inverted. They also should respect the user selected high contrast color scheme. Instead what you observe is that the diagram remains in it's default colors.

Default contrast settings: Expected high contrast look with black high contrast color scheme: Actual high contrast look with black high contrast color scheme:

Environment

• Browser: Chrome 99, Firefox 91.7.1
• OS: Windows 10
• Library version: diagram-js@6.8.2 coming with bpmn-js@7.4.0

[robertfoobar]

As a workaround for the black high contrast mode we've added a css media query:

@media (forced-colors: active) {
  g.viewport {
    filter: invert(1);
  }
}

However, for other color schemes, I don't know how this can be worked around. Maybe using currentColor for stroke and fill, see https://melanie-richards.com/blog/currentcolor-svg-hcm/

[smbea]

cc @andreasgeier @currandwyer @christian-konrad

[nikku]

@smbea Let us investigate if this is a quick fix we can adopt, and if so, adopt it.

[nikku]

Marked as a spring cleaning topic.

[smbea]

On Mac, there is a "high-contrast" and "invert colours" mode. With the later, the desired behaviour is achieved:

Keep in mind, this also inverts the color, so the blue fill would become orange, which I believe would be the outcome of what you implemented with forced-colors: active.

[smbea]

I believe we can use your suggestion to make this better for Windows users, so I'm moving this to backlog for now.