合理设置文本与背景对比度可提升可读性和可访问性，WCAG建议普通文本对比度至少4.5:1，大文本3:1，推荐接近7:1；宜采用深色文字配浅背景或浅文字配深背景，避免亮度相近颜色组合，推荐使用工具验证对比度，并通过CSS媒体查询适配明暗模式，同时避免纯黑与纯白带来的视觉疲劳，改用深灰和浅灰以提升阅读舒适度，确保在不同环境下清晰可读，平衡美观与可读性。
文本颜色与背景的对比度直接影响内容的可读性和可访问性。合理设置 color 与背景色，能提升所有用户的阅读体验，尤其对视力障碍者至关重要。
理解对比度标准
根据 Web 内容可访问性指南（WCAG），文本与背景之间应满足最低对比度要求：
- 普通文本建议对比度至少达到 4.5:1
- 大号文本（18px以上粗体或24px以上常规）可接受 3:1
- 为最佳体验，推荐使用接近 7:1 的高对比度
选择合适的颜色组合
避免仅依赖亮度相近的颜色搭配，如浅灰文字配白色背景。推荐做法包括：
- 深色文字配浅色背景（例如 #333 on #FFF）
- 浅色文字配深色背景（例如 #EEE on #111）
- 使用工具验证对比度，如 Chrome 开发者工具中的“颜色拾取器”或在线检测工具（WebAIM Contrast Checker）
动态适配明暗模式
考虑用户偏好，使用 CSS 媒体查询自动切换配色方案：
立即学习“前端免费学习笔记（深入）”；
@media (prefers-color-scheme: dark) {body {
color: #f0f0f0;
background-color: #1a1a1a;
}
}
@media (prefers-color-scheme: light) {
body {
color: #333;
background-color: #fff;
}
}
避免纯黑与纯白的极端对比
虽然纯黑（#000）与纯白（#FFF）对比度高达 21:1，但长时间阅读可能造成视觉疲劳。优化建议：
- 正文文本使用深灰（如 #222 或 #333）替代纯黑
- 浅灰背景（如 #F8F8F8）比纯白更柔和
- 确保在不同设备和光照环境下仍保持清晰可读
