Support for Windows High Contrast Mode and Forced Colors Mode

[Stephanie Leary]

As we clean up our CSS colors, we should evaluate our styles to better support Windows High Contrast Mode and Forced Colors Mode. These are OS-level color modes used by people with low vision or color-dependent sensory issues; see https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/ for a longer explanation.

Border styles are often troublesome in high contrast modes, especially anything with a transparent border, since that will be forced into one of the high contrast colors unless we say otherwise in a media query. We will also need to check anything with a background color to make sure that a text color is also specified and that they work together in high contrast mode.

These modes are not the same as a user-toggled dark/light mode (bug #174052), although support for these OS modes would get us halfway there.

We need to have CSS color variables (bug #2023449) in place before we try to tackle this.

[Stephanie Leary (stephanieleary)]

Here's a branch that adds basic support for forced colors mode:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp2049657-forced-colors-support

Note that this includes a change to the Evergreen logo file paths used in both the staff client and the OPAC, as noted in the docs file commit. I have changed from PNG to SVG formats for better viewing on dark backgrounds. As a bonus, this vastly improves the clarity of the tiny footer logo in the OPAC.

To test this, you can either turn on forced colors mode in your OS settings or use a high contrast browser extension: https://wiki.evergreen-ils.org/doku.php?id=accessibility:common_issues:color#testing_forced_colors_high_contrast

With high contrast turned on, visit the following pages:

1. The OPAC home page
2. The staff splash page
3. The staff catalog search

In addition to the clearer logos, you should see less intrusive borders in the nav bar and facet boxes than you would without the patch.

[Jane Sandberg (sandbergja)]

Thanks, Stephanie! It looks great with both browser extensions and Windows High Contrast Themes. We reviewed this in today's code review. Pushed with signoffs from Steven and me to rel_3_12 and above.