Support for Windows High Contrast Mode and Forced Colors Mode
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Fix Released
|
Medium
|
Unassigned | ||
3.12 |
Fix Released
|
Medium
|
Unassigned |
Bug Description
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:/
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.
Changed in evergreen: | |
milestone: | none → 3.13-beta |
Changed in evergreen: | |
status: | New → Confirmed |
Changed in evergreen: | |
importance: | Wishlist → Medium |
Changed in evergreen: | |
milestone: | 3.13-beta → 3.13-rc |
tags: | added: signedoff |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
Here's a branch that adds basic support for forced colors mode: /git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/user/ sleary/ lp2049657- forced- colors- support
https:/
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=accessibilit y: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.