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

prefers-contrast 模拟器 - 强制增加/减少对比度

CSS 开发工具 prefers-contrast 模拟
6
0
0
0

prefers-contrast 模拟器

模拟 CSS prefers-contrast 媒体特性，预览网页在不同对比度偏好下的视觉效果。辅助无障碍设计与 WCAG 合规测试。

您的系统当前设置： 检测中...
对比度模式
0.3（极低） 1.0（正常） 2.5（极高）
对比度强度
低 正常 高
实时预览
默认模式

示例页面标题

这是一段副标题文字，用于展示对比度变化对次要文本的影响。

这段正文演示了 高对比度 与 低对比度文本 在不同模式下的表现。 当启用 prefers-contrast: more 时，所有文字应更清晰易读； 而 prefers-contrast: less 会柔化整体视觉。

⚠️ 这段浅色文字在低对比度模式下可能难以阅读（模拟不合规文本）

信息卡片
警告卡片
成功卡片
文本/背景 vs AA ✓
浅文/背景 vs AA ✗
预览区使用 CSS filter: contrast() 模拟对比度变化。实际浏览器行为可能因系统而异。
CSS 使用示例
/* 增强对比度模式 */ @media (prefers-contrast: more) { body { --text-color: #000000; --bg-color: #ffffff; --border-width: 2px; } .subtle-text { color: #333; /* 加深浅色文字 */ } } /* 降低对比度模式 */ @media (prefers-contrast: less) { body { --text-color: #555; --border-color: #ddd; } }

使用 CSS 自定义属性可优雅地管理不同对比度模式下的颜色方案。

WCAG 对比度速查
级别 普通文本 大文本(≥18px粗体)
AA ≥ 4.5:1 ≥ 3:1
AAA ≥ 7:1 ≥ 4.5:1

使用 prefers-contrast: more 可帮助满足 WCAG AAA 标准。

常见问题 (FAQ)
什么是 prefers-contrast？

prefers-contrast 是一个 CSS 媒体特性，用于检测用户是否在操作系统或浏览器中设置了对比度偏好。它帮助开发者根据用户的辅助功能需求调整页面样式，提升无障碍体验。该特性属于 CSS Media Queries Level 5 规范。

prefers-contrast 支持哪些值？

支持四个值：no-preference（默认无偏好）、more（偏好更高对比度）、less（偏好更低对比度）、custom（用户自定义了对比度方案，如 Windows 高对比度主题或 Firefox 的自定义颜色设置）。

哪些浏览器支持 prefers-contrast？

主流浏览器已广泛支持：Chrome 96+、Firefox 101+、Safari 15+、Edge 96+。在移动端，iOS Safari 15+ 和 Android Chrome 也提供了完整支持。截至2025年，全球覆盖率已超过93%。

如何在实际项目中测试 prefers-contrast？

您可以使用本工具实时预览效果；在 Chrome DevTools 中，通过 Rendering → Emulate CSS media feature prefers-contrast 进行模拟；也可在系统设置中开启高对比度模式（macOS：辅助功能 → 显示 → 增加对比度；Windows：设置 → 辅助功能 → 对比度主题）。

prefers-contrast 与 forced-colors 有什么区别？

prefers-contrast 表示用户的对比度偏好，开发者可据此调整样式；而 forced-colors（如 Windows 高对比度模式）会强制覆盖页面颜色为系统定义的调色板，开发者控制能力更有限。两者常结合使用以实现最佳无障碍体验。

使用 prefers-contrast 对 SEO 有帮助吗？

是的。良好的无障碍实践（包括响应对比度偏好）可提升用户体验指标（如停留时间、跳出率），间接有利于 SEO。Google 也将无障碍性作为排名参考因素之一。同时，满足 WCAG 标准有助于规避法律合规风险。

🔧 相关工具