{"id":16412479,"url":"https://github.com/coliff/bootstrap-forced-colors-css","last_synced_at":"2025-02-24T06:14:54.014Z","repository":{"id":246834400,"uuid":"823921455","full_name":"coliff/bootstrap-forced-colors-css","owner":"coliff","description":"Improves the accessibility of Bootstrap 5 for Windows users using High Contrast themes","archived":false,"fork":false,"pushed_at":"2025-02-01T09:08:41.000Z","size":335,"stargazers_count":5,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T06:33:59.233Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://coliff.github.io/bootstrap-forced-colors-css/tests/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coliff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"coliff","ko_fi":"coliff","custom":"https://paypal.me/coliff"}},"created_at":"2024-07-04T02:38:53.000Z","updated_at":"2025-01-01T09:42:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"f0855f6d-5df1-449e-9bf9-32ea1da90ca5","html_url":"https://github.com/coliff/bootstrap-forced-colors-css","commit_stats":null,"previous_names":["coliff/bootstrap-forced-colors-css"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-forced-colors-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-forced-colors-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-forced-colors-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-forced-colors-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coliff","download_url":"https://codeload.github.com/coliff/bootstrap-forced-colors-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240427265,"owners_count":19799470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T06:49:05.817Z","updated_at":"2025-02-24T06:14:53.888Z","avatar_url":"https://github.com/coliff.png","language":"HTML","funding_links":["https://github.com/sponsors/coliff","https://ko-fi.com/coliff","https://paypal.me/coliff"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/coliff/bootstrap-forced-colors-css/blob/main/.github/preview.png?raw=true\" width=\"500\" alt=\"Bootstrap 5 Forced Colors CSS\"\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eBootstrap Forced Colors CSS\u003c/h3\u003e\n\n[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/bootstrap-forced-colors-css/main/LICENSE)\n[![GitHub stars image](https://img.shields.io/github/stars/coliff/bootstrap-forced-colors-css.svg?label=GitHub%20Stars)](https://github.com/coliff/bootstrap-forced-colors-css)\n[![npm Version](https://img.shields.io/npm/v/bootstrap-forced-colors-css)](https://www.npmjs.com/package/bootstrap-forced-colors-css)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/bootstrap-forced-colors-css/badge)](https://www.jsdelivr.com/package/npm/bootstrap-forced-colors-css)\n[![npm Downloads](https://img.shields.io/npm/dt/bootstrap-forced-colors-css.svg)](https://www.npmjs.com/package/bootstrap-forced-colors-css)\n\nEnhances 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/).\n\nThis 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).\n\n## Quick start\n\n- Download the [latest release](https://github.com/coliff/bootstrap-forced-colors-css/releases/latest)\n- Clone the repository `git clone https://github.com/coliff/bootstrap-forced-colors-css.git`\n- Install with [npm](https://www.npmjs.com/package/bootstrap-forced-colors-css) `npm install bootstrap-forced-colors-css`\n- Install with [Yarn](https://classic.yarnpkg.com/en/package/bootstrap-forced-colors-css) `yarn add bootstrap-forced-colors-css`\n- Install with [Composer](https://packagist.org/packages/coliff/bootstrap-forced-colors-css) `composer require coliff/bootstrap-forced-colors-css`\n\n## Usage\n\nAdd this in the `\u003chead\u003e` which will load the CSS using a media query as follow:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/css/bootstrap-forced-colors.min.css\" media=\"screen and (forced-colors: active)\"\u003e\n```\n\nThe CSS can be loaded via a CDN:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/bootstrap-forced-colors-css@1.0.7/css/bootstrap-forced-colors.min.css\"\n  media=\"screen and (forced-colors: active)\"\u003e\n```\n\nOr you can import the CSS into your own CSS file:\n\n```scss\n@import bootstrap-forced-colors.min.css\n```\n\n\u003e [!NOTE]\n\u003e 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.\n\n## FAQS\n\n### What does this fix/improve?\n\n- [Accordion](https://coliff.github.io/bootstrap-forced-colors-css/tests/#accordion) buttons have improved contrast in dark mode\n- [Badges](https://coliff.github.io/bootstrap-forced-colors-css/tests/#badge) within buttons have a 1px border to improve contrast\n- [Buttons](https://coliff.github.io/bootstrap-forced-colors-css/tests/#buttons) have improved focus state contrast (2px visible outline rather than 1px)\n- [Disabled buttons](https://coliff.github.io/bootstrap-forced-colors-css/tests/#buttons) display the correct color using the `GrayText` name\n- [Carousel](https://coliff.github.io/bootstrap-forced-colors-css/tests/#carousel) indicators have background-color issue resolved\n- [Close button](https://coliff.github.io/bootstrap-forced-colors-css/tests/#toasts) has improved contrast by reducing the opacity\n- [Dropdown](https://coliff.github.io/bootstrap-forced-colors-css/tests/#dropdowns) toggle arrows appear correctly (as triangles and not rectangles)\n- [List Group](https://coliff.github.io/bootstrap-forced-colors-css/tests/#list-group) disabled items display the correct color using the `GrayText` name\n- [Modal](https://coliff.github.io/bootstrap-forced-colors-css/tests/#modal) backdrop opacity changed from 0.5 to 0.8\n- [Navbar](https://coliff.github.io/bootstrap-forced-colors-css/tests/#navbar) Menu (hamburger) toggle icons display correctly\n- [Navs](https://coliff.github.io/bootstrap-forced-colors-css/tests/#navs) Improves active and focus state contrast\n- [Pagination](https://coliff.github.io/bootstrap-forced-colors-css/tests/#pagination): Active page link has outline to indicate active page\n- [Pagination](https://coliff.github.io/bootstrap-forced-colors-css/tests/#pagination): Disabled page link display the correct color using the `GrayText` name\n- [Placeholder](https://coliff.github.io/bootstrap-forced-colors-css/tests/#placeholder): Fix for invisible placeholder boxes\n- [Popovers](https://coliff.github.io/bootstrap-forced-colors-css/tests/#popovers): Fixes invisible arrow issue\n- [Progress](https://coliff.github.io/bootstrap-forced-colors-css/tests/#progress): Is no longer invisible\n- [Progress](https://coliff.github.io/bootstrap-forced-colors-css/tests/#progress): Improved stacked progress bar contrast\n- [Spinners](https://coliff.github.io/bootstrap-forced-colors-css/tests/#spinners): Fixes animation\n- [Tables](https://coliff.github.io/bootstrap-forced-colors-css/tests/#tables): Have a 1px outline to improve contrast\n- [Toasts](https://coliff.github.io/bootstrap-forced-colors-css/tests/#toasts): Fixes invisible close/dismiss button\n- [Tooltips](https://coliff.github.io/bootstrap-forced-colors-css/tests/#tooltips): Fix for arrows appearing as rectangles\n- [Tooltips](https://coliff.github.io/bootstrap-forced-colors-css/tests/#tooltips): Add 1px border to tooltips content\n- [Vertical Rule](https://coliff.github.io/bootstrap-forced-colors-css/tests/#navbar): Fixes invisible vertical rule\n- [Horizontal Rule](https://coliff.github.io/bootstrap-forced-colors-css/tests/#navbar): Improves contrast by changing opacity from 0.25 to 0.5\n\n### Known Issues\n\n- Check the [open issues at GitHub](https://github.com/coliff/bootstrap-forced-colors-css/issues).\n\n## Demo\n\nSee this in action at: [https://coliff.github.io/bootstrap-forced-colors-css/tests/](https://coliff.github.io/bootstrap-forced-colors-css/tests/)\n\n## Testing\n\nCurrently, only Windows 10 \u0026 11 with Edge, Firefox, and Chrome support forced colors mode. To test, you can enable forced colors mode in:\n\n- Windows 10: Go to `Settings \u003e Ease of Access \u003e High contrast` and select a theme.\n- Windows 11: Go to `Settings \u003e Accessibility \u003e Contrast themes` and select a theme.\n\nYou 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.\n\n\u003e [!NOTE]\n\u003e 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.\n\nNote 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fbootstrap-forced-colors-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoliff%2Fbootstrap-forced-colors-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fbootstrap-forced-colors-css/lists"}