无需登录 数据私有 本地保存

强制颜色模式模拟器 - Windows高对比度预览

11
0
0
0

强制颜色模式模拟器

Windows 高对比度预览 · 无障碍色彩测试 · forced-colors 模拟

系统状态： 检测中...
模拟主题：
实时预览 正常模式

欢迎访问示例页面

这是一个用于模拟高对比度模式效果的预览区域。切换上方的主题按钮即可查看不同 Windows 高对比度主题下的视觉效果。

这段文字在正常模式下是灰色的，在高对比度模式下将使用 GrayText 系统颜色。

信息卡片

卡片在高对比度模式下边框和背景会发生变化。

标签A 标签B
65%
35%
#产品名称状态操作
1示例产品 A可用编辑
2示例产品 B待审核查看
3示例产品 C已禁用—
系统颜色映射表 (当前主题)
系统颜色CSS 关键词映射色值色样
参考 forced-colors 媒体查询的系统颜色
外部页面预览
跨域页面无法注入模拟样式，建议使用内置预览或参考颜色映射表。同源页面可正常模拟。

常见问题与知识点

Windows 高对比度模式是一种辅助功能，旨在帮助视力障碍用户更清晰地查看屏幕内容。启用后，系统会强制替换网页和应用程序的颜色方案，使用高对比度的系统颜色（如黑底白字、白底黑字等）。在 CSS 中，这通过 forced-colors: active 媒体查询来检测。该模式会覆盖大部分 CSS 颜色声明，确保内容始终具有足够的对比度。

Windows 10/11：
  1. 打开 设置 → 辅助功能（或"轻松使用"）
  2. 选择 高对比度（Windows 11 中为"对比主题"）
  3. 从下拉菜单中选择一个预设主题（高对比度黑、高对比度白等）
  4. 开启开关即可应用
快捷键：左Alt + 左Shift + Print Screen 可快速切换。

@media (forced-colors: active) { ... } 是一个 CSS 媒体查询，当用户的系统启用了强制颜色模式（如 Windows 高对比度）时生效。开发者可以利用它来优化网站在高对比度下的表现，例如调整边框、使用系统颜色关键词（CanvasText、LinkText 等）来确保元素可见性。

  • color 和 background-color 被系统颜色强制替换
  • box-shadow 和 text-shadow 被移除
  • 背景图片可能被替换为纯色背景
  • 按钮和输入框使用 ButtonFace / ButtonText 系统颜色
  • 链接强制显示下划线并使用 LinkText 颜色
  • border-color 可能被调整为系统颜色

Canvas — 背景色
CanvasText — 文字色
LinkText — 链接色
GrayText — 禁用/次要文字色
Highlight — 选中背景色
HighlightText — 选中文字色
ButtonFace — 按钮背景色
ButtonText — 按钮文字色
Field — 输入框背景色
FieldText — 输入框文字色
ActiveText — 活动链接色
VisitedText — 已访问链接色

全球约有 2.2 亿人患有中度至重度视力障碍。高对比度模式是他们访问网页的重要辅助工具。如果网站在高对比度模式下出现元素消失、文字不可读、按钮无法识别等问题，将严重损害用户体验和网站的可访问性。此外，许多国家和地区（如欧盟 EN 301 549、美国 Section 508）对网页无障碍有明确的法律要求，支持 forced-colors 是合规的重要一环。

本模拟器通过 CSS 覆盖来近似高对比度效果，能够展示颜色映射和布局变化。但真实的 forced-colors 模式由操作系统层面驱动，还会影响：SVG 图标的 currentColor 行为、滚动条样式、系统原生控件（如 <select> 下拉菜单）等。建议在真实 Windows 高对比度环境中进行最终测试。您可以使用 window.matchMedia('(forced-colors: active)') 在 JavaScript 中检测真实状态。
🔧 相关工具