免费工具 颜色对比度检测：文字看不看得清，一测就知道
设计稿里好看的浅灰字、橙色按钮上的白字，放到手机上、太阳底下或老年用户眼里往往看不清。输入文字色和背景色，立刻得到对比度和 WCAG 2.2 各级是否达标；不达标时自动找出色相不变、离原色最近的达标色。下方还能按客服窗口的真实样式，检查一个品牌色在头部、按钮、链接上够不够清楚。
- WCAG 2.2 AA / AAA
- 自动给出达标色
- 浏览器本地计算
检查一组配色
支持 HEX、RGB、HSL、OKLCH 和 CSS 颜色名，也可以用取色器。边输入边出结果；分享链接会带上两种颜色，方便发给设计或开发。
要检查的文字、图标或边框的颜色。
文字下面的颜色。半透明背景按叠在白色上计算。
示例
对比度
4.54:1
#767676#FFFFFF
- AA · 普通文字需要 ≥ 4.5:1 · WCAG 1.4.3 达标
- AA · 大字需要 ≥ 3:1 · WCAG 1.4.3 达标
- AAA · 普通文字需要 ≥ 7:1 · WCAG 1.4.6 不达标
- AAA · 大字需要 ≥ 4.5:1 · WCAG 1.4.6 达标
- AA · 图标、边框、控件需要 ≥ 3:1 · WCAG 1.4.11 达标
实际效果
16 px 正文、24 px 大字、19 px 粗体，以及同一组颜色画出的按钮、输入框边框和图标。
订单 24 小时内发货。尺码拿不准？随时问我们。
7 天无理由退换
立即咨询客服
加入购物车 请输入手机号
最接近的达标色
只调整 OKLCH 明度，色相不变，改完还是「你的颜色」。点色块直接套用；一个方向做不到时试试另一个方向。
-
达到 7:1
背景不变，改文字色
文字不变，改背景色
只改明度达不到
分享这组输入：数值写在链接的 # 后面，不会发到服务器。
https://tapcub.com/zh/tools/color-contrast-checker
客服窗口和按钮配色
在线客服窗口会把品牌色铺在头部、悬浮按钮和访客自己发的消息上，上面一律是白字；客服消息里的链接则用品牌色写在白底上。下面的预览照 TapCub 客服组件的真实样式算出一个颜色会产生的所有组合。任何「白字按钮」都可以用同样的方法检查。
准备设为客服窗口主色的颜色。
| 窗口里的位置 | 颜色 | 对比度 | WCAG |
|---|---|---|---|
| 品牌色上的白字：头部、悬浮按钮、访客消息、新消息提示 | 2.80:1 | 不达标 < 4.5:1 | |
| 头部渐变深色端上的白字 | 4.71:1 | 达标 ≥ 4.5:1 | |
| 白色面板上的品牌色链接、按钮文字 | 2.80:1 | 不达标 < 4.5:1 | |
| 浅色底上的品牌色头像字和「AI」标签 | 2.33:1 | 不达标 < 4.5:1 | |
| 深色模式（#111827 面板）上的品牌色链接 | 6.32:1 | 达标 ≥ 4.5:1 | |
| 悬浮按钮和白色页面的对比（非文字，3:1） | 2.80:1 | 不达标 < 3:1 |
这个品牌色上的白字看不清。色相不变、最接近且达标的颜色是 #C35600（和白色 4.51:1）。改成它，白底上的品牌色链接也会一起达标——对比度是双向的。
组件会从你的颜色再算出两种颜色：渐变深色端 #BB5611（加深 25%）和浅色底 #FEE6D5（向白色靠近 82%）。
版本 v1.0更新于 更新记录
对比度和 5 项判定的含义
对比度从 1:1（同一种颜色）到 21:1（白底黑字）。WCAG 按字号和等级给出门槛。
AA · 普通文字（4.5:1）
各国法规、政府和大企业采购最常引用的一级。正文、表单标签、链接、输入框提示文字、按钮上的字都算。只能满足一级的话，先满足这一级。
大字（AA 3:1）
「大字」指至少 18 磅（约 24 CSS 像素）常规字重，或 14 磅（约 18.66 像素）粗体。16 像素的粗体按钮字不算大字，仍要 4.5:1。
AAA（7:1，大字 4.5:1）
增强级，主要照顾低视力读者。WCAG 并不要求整站都做到 AAA，但长文阅读、帮助中心、面向老年用户的页面值得做到。
非文字（3:1）
有含义的图标、输入框边框、焦点框、图表线条、按钮外轮廓，都要和相邻颜色达到 3:1（1.4.11）。白色表单上的浅灰边框是最常见的漏网之鱼。
对比度只截断到两位小数、不四舍五入：4.499:1 显示为 4.49:1 并判为不达标，这是 W3C 对 1.4.3 的说明里要求的。
三步
直接用 CSS 或设计稿（Figma、MasterGo、蓝湖）里的色值。
-
1
输入两种颜色
从样式表或设计稿复制色值，或者用取色器。半透明颜色会先按浏览器的画法叠好再算。
-
2
看 5 项判定
先判断适用哪一项：正文看「AA · 普通文字」；大标题可以只看「AA · 大字」；图标和边框看「非文字」。
-
3
套用建议色并分享
点建议色直接套用，再复制分享链接发给设计或开发。要上线客服窗口的，在下方检查一下品牌色。
WCAG 的对比度怎么算
对比度是两种颜色「相对亮度」之比：先把颜色换算成人眼感受的线性亮度，再相除。
- 每个 8 位通道除以 255 后线性化：c ≤ 0.04045 时 c ÷ 12.92，否则 ((c + 0.055) ÷ 1.055)^2.4
- 相对亮度 L = 0.2126 R + 0.7152 G + 0.0722 B；绿色权重最大，因为人眼对绿光最敏感
- 对比度 =（较亮颜色的 L + 0.05）÷（较暗颜色的 L + 0.05）；0.05 用来模拟屏幕反光
- 建议色保持 OKLCH 的色相和色度，只搜索明度，所以改完的颜色看起来还是同一种颜色
| 成功标准 | 等级 | 普通文字 | 大字 | 非文字 |
|---|---|---|---|---|
| 1.4.3 对比度（最低） | AA | 4.5:1 | 3:1 | — |
| 1.4.6 对比度（增强） | AAA | 7:1 | 4.5:1 | — |
| 1.4.11 非文字对比度 | AA | — | — | 3:1 |
| 上海适老化规范 4.1.3 | 一级 | 4.5:1 | 3:1（大于 18 pt） | 图标 4.5:1 |
为什么设计师都记得 #767676
白底灰字，一步步手算。结果和 WebAIM 对比度检查器一致。
| 步骤 | 数值 | 说明 |
|---|---|---|
| 通道值 | 0x76 = 118 → 118 ÷ 255 = 0.4627 | 灰色三个通道相同 |
| 线性化 | ((0.4627 + 0.055) ÷ 1.055)^2.4 = 0.1812 | 大于 0.04045，用幂函数那一段 |
| 相对亮度 | 0.1812（白色 = 1.0） | 灰色的 L 就等于线性值 |
| 对比度 | (1.0 + 0.05) ÷ (0.1812 + 0.05) = 4.54:1 | 普通文字 AA 达标，AAA 不达标 |
| 再浅一档 | #777777 → 4.47:1 | AA 不达标；#767676 是白底上能达标的最浅灰色 |
白底要做到 AAA，灰色得加深到 #595959（7.00:1）——建议色面板对这组颜色给出的就是它。
对比度最常在这些地方翻车
出问题的往往不是正文，而是状态和细节。
亮色品牌色上放白字
橙色、黄色、浅绿、天蓝和白字很难达到 4.5:1。按钮和客服窗口头部用深一档的颜色，鲜亮的颜色留给大面积色块。
输入框提示字和禁用状态
提示字也是文字，#b0b0b0 这类浅灰只有 2:1 左右。禁用的控件可以豁免，提示字不行。
边框和焦点框
白底上 #e5e7eb 的输入框边框只有约 1.2:1，看不清的人根本找不到输入框在哪。用来识别控件的边框需要 3:1。
图片上直接压字
一张照片没法用一个对比度描述。把字放在纯色或半透明色块上，再检查色块的颜色。
你的品牌色，用在客服窗口里
TapCub 在线客服只要一个品牌色，就能生成头部、悬浮按钮和各处按钮。
颜色对比度多少才算合格？
普通文字 4.5:1 以上达到 WCAG 2.2 的 AA 级，7:1 以上达到 AAA 级；大字（约 24 像素常规或 18.66 像素粗体）AA 要 3:1、AAA 要 4.5:1；图标、输入框边框等非文字元素要 3:1。
颜色对比度怎么检测？
在上面输入文字色和背景色即可。工具先算出两种颜色的相对亮度，用（亮的 + 0.05）÷（暗的 + 0.05）得到对比度，再和 WCAG 各级门槛比较。也可以用取色器直接选色。
橙色、黄色按钮上的白字为什么不达标？
这类颜色本身很亮，和白色的亮度差太小。比如 #f97316 和白色只有 2.80:1。要么把按钮颜色加深（工具会给出色相不变的最近达标色），要么改用深色文字。
4.48:1 能四舍五入算 4.5:1 吗？
不能。W3C 对 1.4.3 的说明写明门槛是硬性下限，差一点也算不达标。本工具显示两位小数时只截断、不进位，看到的数字不会比实际好看。
国内有对比度的要求吗？
有。适老化和无障碍改造的规范普遍沿用这套数字，例如上海市经信委 2021 年发布的《上海市互联网应用适老化和无障碍设计规范（试行）》4.1.3 要求文本、图标的对比度至少 4.5:1，大于 18 pt 的文字至少 3:1。
和颜色转换工具有什么区别？
颜色转换把一个颜色换成 HEX、RGB、HSL、OKLCH、CMYK 等写法；本页只管「看不看得清」：两种颜色、WCAG 各级判定、两个方向的修改建议和客服窗口配色预览。
APCA、WCAG 3 要不要管？
APCA 是为 WCAG 3 提出的新对比度算法，WCAG 3 目前还是工作草案。现行法规和验收都按 WCAG 2.x 的比值，所以本工具用的是 2.2 的算法；这里达标不代表 APCA 也达标。