Windows High Contrast Mode / forced color adaptations
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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