twbs / twbs/bootstrap

Windows High Contrast Mode / forced color adaptations

Open
#35,941 6 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility feature v6
Dominant language
MDX
Stars
175k
Forks
78.6k
Avg merge
7h 19m
Merged PRs (30d)
35

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the proposal and the related pull request #29490, then inspect the component styles that rely on backgrounds, borders, or shadows. Identify a narrowly scoped set of forced-colors adaptations and verify that affected components remain discernible in Windows High Contrast Mode without broad restyling.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.