PHPackages coliff/bootstrap-forced-colors-css - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. coliff/bootstrap-forced-colors-css ActiveLibrary[Utility & Helpers](/categories/utility) coliff/bootstrap-forced-colors-css ================================== Bootstrap 5 Forced Colors CSS for Windows High Contrast Themes v1.0.7(1y ago)69[2 issues](https://github.com/coliff/bootstrap-forced-colors-css/issues)MITHTMLCI passing Since Jul 4Pushed 1mo ago1 watchersCompare [ Source](https://github.com/coliff/bootstrap-forced-colors-css)[ Packagist](https://packagist.org/packages/coliff/bootstrap-forced-colors-css)[ Docs](https://github.com/coliff/bootstrap-forced-colors-css#readme)[ Fund](https://paypal.me/coliff)[ RSS](/packages/coliff-bootstrap-forced-colors-css/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (8)DependenciesVersions (24)Used By (0) [![Bootstrap 5 Forced Colors CSS](https://github.com/coliff/bootstrap-forced-colors-css/raw/main/.github/preview.png?raw=true)](https://github.com/coliff/bootstrap-forced-colors-css/blob/main/.github/preview.png?raw=true) ### Bootstrap Forced Colors CSS [](#bootstrap-forced-colors-css) [![LICENSE: MIT](https://camo.githubusercontent.com/891419a00e04aa0e311068fa8a04eec92cab4f7026c76278279bf2a1da50e578/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d6c69676874677265792e737667)](https://raw.githubusercontent.com/coliff/bootstrap-forced-colors-css/main/LICENSE)[![GitHub stars image](https://camo.githubusercontent.com/4f3bdeeed9ff954974d29fcf697b85daf753cb4507be64032b2ec849b79f3dd7/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f636f6c6966662f626f6f7473747261702d666f726365642d636f6c6f72732d6373732e7376673f6c6162656c3d4769744875622532305374617273)](https://github.com/coliff/bootstrap-forced-colors-css)[![npm Version](https://camo.githubusercontent.com/a7c73d6a093bff7ed0fae1b5f2e53989d8c1ba651f2b2d4d1eaefe86a2e14de5/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f626f6f7473747261702d666f726365642d636f6c6f72732d637373)](https://www.npmjs.com/package/bootstrap-forced-colors-css)[![npm Downloads](https://camo.githubusercontent.com/2afa2953292bc5f8447739d382d01764c7aeeb5bb86ebc077c8b5c9e7c928df6/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f626f6f7473747261702d666f726365642d636f6c6f72732d6373732e737667)](https://www.npmjs.com/package/bootstrap-forced-colors-css)[![jsdelivr](https://camo.githubusercontent.com/2e2c50eb88203ab194a6b8a651d7c4562dc1c79c58679cce5971ffd8db0afe67/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f626f6f7473747261702d666f726365642d636f6c6f72732d6373732f6261646765)](https://www.jsdelivr.com/package/npm/bootstrap-forced-colors-css) Enhances the accessibility of Bootstrap 5 when using with [Contrast themes in Windows](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/). This CSS file fixes many issues and adds enhancements to make Bootstrap 5 more accessible in Firefox, Chrome, Edge on Windows using the [`forced-colors: active` media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors). Quick start ----------- [](#quick-start) - Download the [latest release](https://github.com/coliff/bootstrap-forced-colors-css/releases/latest) - Clone the repository `git clone https://github.com/coliff/bootstrap-forced-colors-css.git` - Install with [npm](https://www.npmjs.com/package/bootstrap-forced-colors-css) `npm install bootstrap-forced-colors-css` - Install with [Yarn](https://classic.yarnpkg.com/en/package/bootstrap-forced-colors-css) `yarn add bootstrap-forced-colors-css` - Install with [Composer](https://packagist.org/packages/coliff/bootstrap-forced-colors-css) `composer require coliff/bootstrap-forced-colors-css` Usage ----- [](#usage) Add this in the `` which will load the CSS using a media query as follow: ``` ``` The CSS can be loaded via a CDN: ``` ``` Or you can import the CSS into your own CSS file: ``` @import bootstrap-forced-colors.min.css ``` Note bootstrap-forced-colors-css improves the accessibility of Bootstrap 5 for Windows users in forced colors mode, but you should still test your site to ensure it meets your accessibility requirements. FAQS ---- [](#faqs) ### What does this fix/improve? [](#what-does-this-fiximprove) - [Accordion](https://coliff.github.io/bootstrap-forced-colors-css/tests/#accordion) buttons have improved contrast in dark mode - [Badges](https://coliff.github.io/bootstrap-forced-colors-css/tests/#badge) within buttons have a 1px border to improve contrast - [Buttons](https://coliff.github.io/bootstrap-forced-colors-css/tests/#buttons) have improved focus state contrast (2px visible outline rather than 1px) - [Disabled buttons](https://coliff.github.io/bootstrap-forced-colors-css/tests/#buttons) display the correct color using the `GrayText` name - [Carousel](https://coliff.github.io/bootstrap-forced-colors-css/tests/#carousel) indicators have background-color issue resolved - [Close button](https://coliff.github.io/bootstrap-forced-colors-css/tests/#toasts) has improved contrast by reducing the opacity - [Dropdown](https://coliff.github.io/bootstrap-forced-colors-css/tests/#dropdowns) toggle arrows appear correctly (as triangles and not rectangles) - [List Group](https://coliff.github.io/bootstrap-forced-colors-css/tests/#list-group) disabled items display the correct color using the `GrayText` name - [Modal](https://coliff.github.io/bootstrap-forced-colors-css/tests/#modal) backdrop opacity changed from 0.5 to 0.8 - [Navbar](https://coliff.github.io/bootstrap-forced-colors-css/tests/#navbar) Menu (hamburger) toggle icons display correctly - [Navs](https://coliff.github.io/bootstrap-forced-colors-css/tests/#navs) Improves active and focus state contrast - [Pagination](https://coliff.github.io/bootstrap-forced-colors-css/tests/#pagination): Active page link has outline to indicate active page - [Pagination](https://coliff.github.io/bootstrap-forced-colors-css/tests/#pagination): Disabled page link display the correct color using the `GrayText` name - [Placeholder](https://coliff.github.io/bootstrap-forced-colors-css/tests/#placeholder): Fix for invisible placeholder boxes - [Popovers](https://coliff.github.io/bootstrap-forced-colors-css/tests/#popovers): Fixes invisible arrow issue - [Progress](https://coliff.github.io/bootstrap-forced-colors-css/tests/#progress): Is no longer invisible - [Progress](https://coliff.github.io/bootstrap-forced-colors-css/tests/#progress): Improved stacked progress bar contrast - [Spinners](https://coliff.github.io/bootstrap-forced-colors-css/tests/#spinners): Fixes animation - [Tables](https://coliff.github.io/bootstrap-forced-colors-css/tests/#tables): Have a 1px outline to improve contrast - [Toasts](https://coliff.github.io/bootstrap-forced-colors-css/tests/#toasts): Fixes invisible close/dismiss button - [Tooltips](https://coliff.github.io/bootstrap-forced-colors-css/tests/#tooltips): Fix for arrows appearing as rectangles - [Tooltips](https://coliff.github.io/bootstrap-forced-colors-css/tests/#tooltips): Add 1px border to tooltips content - [Vertical Rule](https://coliff.github.io/bootstrap-forced-colors-css/tests/#navbar): Fixes invisible vertical rule - [Horizontal Rule](https://coliff.github.io/bootstrap-forced-colors-css/tests/#navbar): Improves contrast by changing opacity from 0.25 to 0.5 ### Known Issues [](#known-issues) - Check the [open issues at GitHub](https://github.com/coliff/bootstrap-forced-colors-css/issues). Demo ---- [](#demo) See this in action at: Testing ------- [](#testing) Currently, only Windows 10 & 11 with Edge, Firefox, and Chrome support forced colors mode. To test, you can enable forced colors mode in: - Windows 10: Go to `Settings > Ease of Access > High contrast` and select a theme. - Windows 11: Go to `Settings > Accessibility > Contrast themes` and select a theme. You can also use the [Forced Colors Mode Emulation](https://developer.chrome.com/docs/devtools/rendering/emulate-css#emulate_css_media_feature_forced-colors) in Edge and Chrome on all platforms. Note By default, the Forced Colors Mode emulation is a dark mode theme, but you can switch to a light theme by forcing the `prefers-color-scheme` to light in the Dev Tools. Remember that the user can't use Bootstrap's light/dark mode theme toggle. The color scheme is set by the user at the OS level. Note that [CanIUse lists Safari as supporting forced colors mode](https://caniuse.com/mdn-css_at-rules_media_forced-colors), however macOS itself doesn't have a Forced Colors / High Contrast mode which means it's not possible to use this with Safari at all. ### Health Score 35 — LowBetter than 79% of packages Maintenance64 Regular maintenance activity Popularity10 Limited adoption so far Community11 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 70.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Total 8 Last Release 659d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a6068e9ba0ce8defec6b107f1cc3b99c2fd91f75298b48f71cc3dbfdc20870a8?d=identicon)[coliff](/maintainers/coliff) --- Top Contributors [![coliff](https://avatars.githubusercontent.com/u/1212885?v=4)](https://github.com/coliff "coliff (83 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (25 commits)")[![Codex](https://avatars.githubusercontent.com/in/2248422?v=4)](https://github.com/Codex "Codex (5 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (5 commits)") --- Tags cssbootstrapaccessibilitywindowshigh-contrast ### Embed Badge ![Health badge](/badges/coliff-bootstrap-forced-colors-css/health.svg) ``` [![Health](https://phpackages.com/badges/coliff-bootstrap-forced-colors-css/health.svg)](https://phpackages.com/packages/coliff-bootstrap-forced-colors-css) ``` ### Alternatives [wenzhixin/bootstrap-table An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation) 11.8k283.4k1](/packages/wenzhixin-bootstrap-table)[matthiasmullie/minify CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns. 2.0k30.5M331](/packages/matthiasmullie-minify)[onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu)[ttskch/select2-bootstrap4-theme Select2 v4 theme for Bootstrap4 43424.6k2](/packages/ttskch-select2-bootstrap4-theme)[phpstrap/phpstrap Bootstrap layout generator 1214.7k](/packages/phpstrap-phpstrap)[bostondv/bootstrap-ninja-forms Adds Bootstrap classes to Ninja Forms 222.2k](/packages/bostondv-bootstrap-ninja-forms) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)