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.

[patrickhlauke]

Taking https://getbootstrap.com/docs/5.2/examples/cheatsheet/ for a quick spin in high contrast (Windows 10 WHCM, Chrome):

Forms

Overview

• checked checkbox, selected radio button, shows no focus indication

• switch checkbox input: when not checked, only shows outline border; when focused, shows faint off switch; when checked, has no focus indicator

• example range totally invisible

Floating labels

• floating label doesn’t hide placeholder text; when focused, shows awkward focus outline

Validation

• “Agree…” checkbox shows no focus indication

Components

• Accordion shows no focus indication

Alerts

• No visible X close control, no focus indication for it

Badge

• Shows no outline/border

Carousel

• Dots look awkward/wrong

Dropdowns

• Down arrow looks wrong
• Focus indication on active dropdown item not shown

Modal

• No visible X close control, no focus indication for it

Navs

• doesn’t show active one

Navbar

• First example, logo doesn’t show

Pagination

• Current active one not shown

Popovers

• Arrow looks awkward/wrong

Progress

• Bar is totally invisible

Spinners

• Completely static circles

Toasts

• No visible X close control, no focus indication for it

Tooltips

• Arrow looks awkward/wrong

Other

A few other examples not covered in the cheatsheet:

• toggle buttons https://getbootstrap.com/docs/5.2/components/buttons/#toggle-states don’t visually differentiate active one

• checkbox/radio button group https://getbootstrap.com/docs/5.2/components/button-group/#checkbox-and-radio-button-groups don’t differentiate checked/unchecked

• as already seen in the alert and modal above, close button https://getbootstrap.com/docs/5.2/components/close-button/ doesn’t show at all (except for its white variant)

[davidscotson]

I’ve started a gist here, I’ll try to remember to update it as I test and find issues:

https://gist.github.com/davidscotson/446f5a637715af9d1db832f60640e705