答案：WCAG规定普通文本对比度至少4.5:1，大文本至少3:1，需用工具验证，避免仅凭视觉判断，推荐使用深灰#333与白色背景等安全组合，并通过CSS变量和prefers-contrast支持高对比模式以提升可访问性。
要满足可访问性要求，CSS颜色对比度必须确保文本与背景之间有足够的明暗差异，让视力障碍或色盲用户也能清晰阅读内容。根据 WCAG（Web Content Accessibility Guidelines） 标准，不同场景下的对比度有明确要求。
了解WCAG对比度标准
WCAG 2.1 定义了文本颜色与背景色之间所需的最低对比度比值：
- 普通文本：至少达到 4.5:1 的对比度
- 大号文本（18pt以上，或粗体14pt以上）：至少达到 3:1
- 装饰性或非交互文本：可低于标准，但不应影响信息获取
这些数值基于人眼对亮度的感知计算，不是简单的RGB差值。使用专业工具才能准确判断。
如何在CSS中确保合规
编写样式时，不要仅凭肉眼判断颜色搭配是否清晰。应主动验证对比度：
立即学习“前端免费学习笔记（深入）”；
- 使用 在线对比度检测工具，如 WebAIM Contrast Checker、Contrast Ratio 或 Chrome 开发者工具中的“Color Picker”功能
- 在设计系统或UI组件中预设符合标准的颜色组合
- 避免在图片或渐变背景上放浅色/深色文字，除非叠加遮罩层保证对比度
示例：一个深灰色文本搭配白色背景通常更安全
.text {
color: #333; /* 深灰 - 对白底可达 12:1 */
background-color: #fff;
}
动态主题与高对比模式支持
现代网站常提供暗黑模式或允许用户自定义主题。此时需特别注意切换后仍满足对比度要求：
- 使用 CSS 自定义属性（变量）统一管理配色方案
- 通过 @media (prefers-contrast) 检测用户系统偏好
- 为关键元素（如按钮、链接）设置备用高对比样式
例如：
@media (prefers-contrast: high) {
body {
color: black;
background: white;
}
}
基本上就这些。只要从设计阶段开始关注对比度，并借助工具持续验证，就能有效提升网页可访问性。别等到验收才发现问题。
