twinejs icon indicating copy to clipboard operation
twinejs copied to clipboard

Windows app: colours are removed by Electron if Windows is in a High Contrast theme

Open webbedspace opened this issue 3 years ago • 3 comments

image image

As you may or may not know, recent versions of Windows Chrome (hence Electron) detect whether Windows is in "High Contrast" mode, and, if so, removes colours from HTML elements (but not SVG images) in the web page. This is something of a problem for Twine, because a lot of colour-related cues (such as passage tags) are now missing. It's not even clear whether any of the passages are selected in the story map.

This can be disabled by simply adding html { forced-color-adjust: none; } to the CSS. Although you should ideally attach forced-color-adjust: none to just the colourful elements of the Twine UI (such as most of the story map elements and the CodeMirror panels), for now it'd be fine to just apply a global fix (so that the UI is actually functional again) before deliberating on the most correct way to do this.

Twine version number

2.4

Does this problem occur with the web version of Twine or the desktop app?

Desktop app

What operating system does this problem occur on?

Windows

If this problem is occurring with the web version of Twine, what browser does it occur on?

No response

Presubmission checklist

  • [ ] I am interested in working on code that would fix this bug. (This is not required to submit a bug report.)
  • [X] I have done a search and believe that an issue does not already exist for this bug in the GitHub repository.
  • [X] I have read and agree to abide by this project's Code of Conduct.

webbedspace avatar Jul 20 '22 12:07 webbedspace

I don't think disabling high-contrast mode, even on a temporary basis is a good idea as it's disabling assistive technology. (But I'm not an accessiblity expert, and if the conventional wisdom runs opposite, I'm open to reconsidering.) The concept to me is akin to saying, Twine doesn't support right-to-left locales (which I don't think it does fully) so force users into LTR mode. I think the right move is to properly support high-contrast mode, which is a worthwhile task but definitely a significant amount of work.

klembot avatar Jul 20 '22 21:07 klembot

Based on this Chrome Platform Status report there are two new Forced Colours related CSS features: a forced-colors media feature, which can be used to detect if the end-user has enabled a forced colours mode; and the previously mentioned forced-color-adjust property, that can be used to opt-out specific elements.

greyelf avatar Jul 20 '22 21:07 greyelf

Had more time to think this through, and I think I was wrong in my initial comment. Having low-contrast but functional UI is better than unusable UI, so the band-aid @webbedspace proposed initially seems like the right move for now. But I think building an actual high-contrast mode is a good idea.

klembot avatar Jul 21 '22 20:07 klembot