Windows High Contrast Mode / forced color adaptations
Proposal
Adding a few surgical, very specific general styles to Bootstrap using the (forced-colors)
media query, to make sure that some of our components that aren't properly discernible in Windows High Contrast Mode stand a slightly better chance at having at least minimal styles applied even in WHCM.
Motivation and context
Splitting the idea out of https://github.com/twbs/bootstrap/pull/29490
A lot of the standard Bootstrap styles rely on background colours, borders and shadows (e.g. to make buttons/pills/etc look "button-like"). These styles usually get completely overridden by Windows High Contrast Mode (WHCM), which explicitly ignores things like background and forces specific user-defined colours for things.
Until recently, there was no clean standardised way of approaching this issue (even with proprietary things like -ms-high-contrast
- see https://www.tpgi.com/windows-high-contrast-mode-the-limited-utility-of-ms-high-contrast/)
However, the relatively new (forced-colors)
media query offers a relatively stable way of approaching this issue now, adding very targeted adaptations/tweaks for cases where WHCM is enabled.
I have recently been playing with it on a project (not directly using Bootstrap, but the concept is obviously the same) to force an outline (rather than a border, so it doesn't affect element dimensions), a la
@media (forced-colors) {
button {
outline: 1px solid LinkText !important;
}
}
Trying to do further/more intense styling is probably counterproductive (i.e. not doing a whole exercise like dark mode or anything), but just some basics like this would immediately make BS more WHCM-friendly for very little extra effort.