Bootstrap Forced Colors CSS for Windows High Contrast Themes

[coliff]

I've created a stylesheet by using the forced-colors: active media query which enhances the accessibility of Bootstrap 5 when using with Hight Contrast themes in Windows.

• 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)">

How to test with Forced Colors Mode Emulation in Chrome / Edge

Interesting links about Windows High Contrast Mode:

• Smashing Magazine article
• CanIUse Support (Note that currently it's Windows-only)
• WHCM and System Colors

[julien-deramond]

Hey @coliff!
Sounds really cool and interesting, good job! 🎉
You've already mentioned it in this GitHub issue comment 👌, so we'll definitely consider it while developing the high contrast mode (hopefully for v6).

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.

I'll add that to my to-do list. Maybe some of the changes you've made can be integrated into v5 already.