颜色对比度检查
测试颜色组合的 WCAG 无障碍合规性
前景色
背景色
预览
大号文本示例
正常文本示例。The quick brown fox jumps over the lazy dog.
结果
--
对比度比率
AA 正常文本
--
AA 大号文本
--
AAA 正常文本
--
AAA 大号文本
--
Foreground L: --, Background L: --
颜色对比度检查器可以算出任意两种颜色之间的对比度，并直接告诉你这个组合能不能通过 WCAG 的 AA 或 AAA 无障碍标准。适合想要界面易读又不想凭感觉猜的设计师和开发者——选好前景色和背景色，马上得到明确的通过/不通过结论。
如何使用
- 选择颜色： 输入 HEX 色值，或用取色器分别选定文字色和背景色。
- 查看比值： 工具会即时算出对比度，范围从 1:1 到 21:1。
- 核对标准： 查看该组合在普通文本和大文本下是否通过 AA、AAA。
- 调整重试： 加深文字色或调亮背景色，直到比值达标。
功能特性
- 支持 3 位或 6 位 HEX 色值，带不带 # 都可以
- 按 WCAG 2.1 公式精确计算对比度
- 普通文本和大文本分别给出 AA、AAA 判定
- 配色效果实时预览
- 全程在浏览器本地运行
为什么对比度很重要
大约每 12 名男性中就有 1 人存在某种程度的色觉障碍，女性约为两百分之一；而更多人在强光下看屏幕、或随着年龄增长视力下降。低对比度的文字——比如经典的浅灰配白底——对谁来说都费劲，对很多人则根本看不清。对比度不是边缘需求，而是可读性的底线。
WCAG 的公式是按人眼感知设计的：它先按人眼的非线性响应曲线把 sRGB 色值换算成相对亮度，再比较两个亮度的比值。所以结果经常会出乎意料——黑底白字能拿到满分 21:1，而 #777777 配 #999999 这种设计师眼里”明显不同”的两个颜色，对比度只有 2:1 左右，远远不达标。
使用场景
- UI 设计师： 校验按钮、标签、正文颜色在品牌底色上是否达标。
- 前端开发： 在无障碍审计找上门之前，先把不合格的配色揪出来。
- 内容团队： 检查 CMS 主题里的链接色和说明文字色。
- 无障碍测试： 在合规报告中记录精确的对比度数值。
相关工具
常见问题
什么是WCAG颜色对比度？
WCAG（Web内容无障碍指南）规定了文本与背景颜色之间的最低对比度，以确保有视觉障碍的用户可以阅读。对比度范围从1:1（无对比度）到21:1（最大对比度，黑底白字）。
要达到AA合规性，需要多少对比度？
普通文本（小于18pt）至少需要4.5:1。大文本（18pt及以上，或14pt及以上加粗）至少需要3:1。对于AAA合规性，这些要求分别提高到7:1和4.5:1。
对比度是如何计算的？
根据WCAG 2.1：(L1 + 0.05) / (L2 + 0.05)，其中L1是较亮颜色的相对亮度，L2是较暗颜色的相对亮度。相对亮度使用sRGB值的线性化公式计算得出。