颜色对比度用于衡量文本与背景的亮度差异，确保可读性。根据WCAG 2.1标准，正常文本需至少4.5:1（AA级）或7:1（AAA级），大文本为3:1或4.5:1。对比度通过相对亮度计算，公式为(L1+0.05)/(L2+0.05)，其中L由sRGB值转换并加权得出。实际中推荐使用浏览器工具、在线检测工具（如WebAIM）、设计软件插件或自动化测试辅助验证。建议避免低对比配色，图片文字加遮罩或描边，深色模式也需检测，并支持系统高对比度设置，以提升可访问性。
颜色对比度的计算是为了确保文本与背景之间有足够的差异，让包括视力障碍者在内的所有用户都能清晰阅读内容。这在网页设计、UI 设计中尤为重要，符合 WCAG（Web Content Accessibility Guidelines） 可访问性标准。
1. 什么是颜色对比度？
颜色对比度是指前景色（如文字）与背景色之间的亮度差异，用数值比例表示，范围通常为 1:1 到 21:1。数值越高，对比越强，可读性越好。
根据 WCAG 2.1 标准：
- AA 级标准：正常文本至少需要 4.5:1 的对比度，大文本（18pt以上或粗体14pt以上）需达到 3:1
- AAA 级标准：正常文本需达到 7:1，大文本需达到 4.5:1
2. 如何计算对比度？
对比度是基于两种颜色的相对亮度来计算的。公式如下：
对比度 = (L1 + 0.05) / (L2 + 0.05)其中：
- L1 是较亮颜色的相对亮度（值在 0 到 1 之间）
- L2 是较暗颜色的相对亮度
相对亮度计算方法（以 sRGB 颜色为例）：
对每个颜色通道（R, G, B），先将其归一化到 0–1 范围，然后按以下规则转换：
- 如果 R/G/B 值 ≤ 0.03928，则：值 = 原值 ÷ 12.92
- 否则：值 = ((原值 + 0.055) ÷ 1.055)^2.4
然后使用加权公式：
L = R × 0.2126 + G × 0.7152 + B × 0.07223. 实际操作建议
虽然可以手动计算，但实际开发中推荐使用工具快速验证：
- 浏览器开发者工具：Chrome 和 Edge 的审查元素中可直接查看颜色对比度是否达标
- 在线工具：如 WebAIM Contrast Checker、Contrast Ratio、Snook 检查器，输入颜色代码即可得到对比度和合规提示
- 设计软件插件：Figma、Sketch 中有可访问性插件帮助实时检测
- CSS 开发辅助：结合自动化测试工具（如 axe-core）在代码层面检查对比度问题
4. 提高可访问性的实用技巧
- 避免使用纯灰文字配白底，即使看起来“高级”，也可能不达标
- 图片上的文字应加半透明遮罩或描边，确保动态背景下仍满足对比度
- 深色模式下同样要检查对比度，不能假设“深底浅字”就一定安全
- 考虑用户自定义样式，不要禁用系统级高对比度模式
基本上就这些。只要在设计和开发过程中持续关注对比度，使用工具辅助验证，就能有效提升内容的可访问性，让更多人顺畅获取信息。
