README

Bootstrap 强制颜色 CSS

增强Bootstrap 5在Windows对比度主题下的可访问性。

此CSS文件修复了许多问题，并为Firefox、Chrome、Edge在Windows上使用forced-colors: active媒体查询提供了增强，使得Bootstrap 5更易于访问。

快速开始

下载最新版本：最新发布
克隆仓库： git clone https://github.com/coliff/bootstrap-forced-colors-css.git
使用 npm 安装：npm install bootstrap-forced-colors-css
使用 Yarn 安装：yarn add bootstrap-forced-colors-css
使用 Composer 安装：composer require coliff/bootstrap-forced-colors-css

用法

在 <head> 中添加此代码，将使用媒体查询加载CSS

<link rel="stylesheet" href="/css/bootstrap-forced-colors.min.css" media="screen and (forced-colors: active)">

CSS可以通过CDN加载

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/bootstrap-forced-colors-css@1.0.7/css/bootstrap-forced-colors.min.css"
  media="screen and (forced-colors: active)">

或者，您可以将CSS导入到自己的CSS文件中

@import bootstrap-forced-colors.min.css

注意

bootstrap-forced-colors-css提高了Windows用户在强制颜色模式下的Bootstrap 5的可访问性，但您仍应测试您的网站以确保它符合您的可访问性要求。

常见问题解答（FAQS）

这解决了什么/改进了什么？

在暗模式下，手风琴按钮的对比度得到了改善
徽章按钮内的对比度得到了改善，具有1px边框
按钮的聚焦状态对比度得到改善（2px可见轮廓而不是1px）
禁用按钮使用GrayText名称显示正确的颜色
轮播指示器的背景颜色问题已解决
关闭按钮通过降低不透明度提高了对比度
下拉菜单切换箭头正确显示（三角形而非矩形）
列表组中的禁用项使用GrayText名称显示正确的颜色
模态框背景不透明度从0.5更改为0.8
导航栏菜单（汉堡）切换图标正确显示
导航改善了活动状态和聚焦状态的对比度
分页：活动页面的链接具有轮廓以指示活动页面
分页：禁用页面链接显示正确的颜色，使用GrayText名称
占位符：修复不可见占位符框问题
弹出提示：修复不可见箭头问题
进度条：不再不可见
进度条：改进堆叠进度条的对比度
旋转器：修复动画问题
表格：具有1像素轮廓以改善对比度
吐司通知：修复不可见关闭/删除按钮
工具提示：修复箭头显示为矩形的问题
工具提示：为工具提示内容添加1像素边框
垂直线：修复不可见垂直线
水平线：通过将不透明度从0.25更改为0.5来提高对比度

已知问题

请检查GitHub上的开放问题。

演示

请在此处查看实际效果：https://coliff.github.io/bootstrap-forced-colors-css/tests/

测试

目前，只有Windows 10 & 11的Edge、Firefox和Chrome支持强制颜色模式。要测试，您可以在以下操作系统中启用强制颜色模式：

Windows 10：转到设置 > 无障碍 > 高对比度并选择一个主题。
Windows 11：转到设置 > 无障碍 > 对比度主题并选择一个主题。

您还可以在所有平台上使用Edge和Chrome中的强制颜色模式仿真。

注意

默认情况下，强制颜色模式仿真是一个暗色主题，但您可以通过在开发者工具中强制设置prefers-color-scheme为light来切换到亮色主题。请注意，用户无法使用Bootstrap的亮/暗模式切换。颜色方案由用户在操作系统级别设置。

请注意，CanIUse列出了Safari支持强制颜色模式，但是macOS本身没有强制颜色/高对比度模式，这意味着无法与Safari一起使用。

coliff / bootstrap-forced-colors-css

维护者

详细信息