Windows High Contrast Mode / forced color adaptations

[patrickhlauke]

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.

[davidscotson]

Hi @patrickhlauke, are you aware of a shared gist or other source that gathers together the forced-color adaptions that aren't yet accepted into upstream Bootstrap? I'm looking at adding them to a Bootstrap 4(.6) project and if one doesn't exist I might create it as it seems generally useful and shareable, rather than project specific.

[patrickhlauke]

i don't think there's a single collated list at the moment. would suggest, if you can find the time, going through the docs pages and trying to identify all the different places where currently forced colors/WHCM is not ideal (in terms of borders, outlines, etc not showing up)

[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

[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)

[robfentress]

Another thing I didn't see in previous comments is the fact that you can't see the checked state of the checkboxes when viewed in certain themes, such as High Contrast White in Windows 10 and Desert High Contrast in Windows 11. You can find an explanation of the issues I found with this control and my proposed solutions in this CodePen: Fixing Accessibility of Bootstrap's Checkbox Styling

Here is a gist of the same, basically: Contrast tweaks for checkbox in Bootstrap

This is easy to miss, because it doesn't show up when checking with darker themes, which is all most people test with.

I'm not sure, but I think I remember there being similar issues with the radio buttons.

[coliff]

I spent a lot of time going through the components and have created a forced-colors: active stylesheet which fixes just about all issues I could find in both dark and light high contrast themes. Tested with Edge on Windows 11.

• GitHub repo: https://github.com/coliff/bootstrap-forced-colors-css
• npm: https://www.npmjs.com/package/bootstrap-forced-colors-css
• Demo: https://coliff.github.io/bootstrap-forced-colors-css/tests/

Some fixes made are a bit opinionated, e.g. increasing border width from 1px to 2px on form inputs to counter the fact that there is no box-shadow. It'd be great to see some/most of these fixes be made to Bootstrap in the future. For now though, users can use this stylesheet to improve things for Windows users with High Contrast themes.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-forced-colors-css@1/css/bootstrap-forced-colors.min.css" 
  media="screen and (forced-colors: active)">

Testing with Forced Colors Mode Emulation in Chrome / Edge