🎨 前景 / 背景颜色

前景文字色

支持 #hex（3/4/6/8 位）、rgb/rgba、hsl/hsla、命名色。

背景颜色

常用配色（点击填入前景色）

大号文字 24px Bold

这是正文文字的实时预览（14px Regular）。调整前景与背景颜色，这里会立即变化，可直观判断文字是否清晰可读。The quick brown fox jumps over the lazy dog. 0123456789

对比度比值

—: 1

输入颜色后开始计算

AA · 正文文字

普通字号（< 18pt / 14pt 粗体），要求 ≥ 4.5 : 1

—

AA · 大号文字

≥ 18pt 粗体或 ≥ 24pt 常规，要求 ≥ 3 : 1

—

AAA · 正文文字

增强级正文，要求 ≥ 7 : 1

—

AAA · 大号文字

增强级大号文字，要求 ≥ 4.5 : 1

—

UI 控件 / 图形

按钮边框、图标、输入框等非文字元素，建议 ≥ 3 : 1

—

前景相对亮度 —

背景相对亮度 —

最高等级 —

📖 WCAG 2.1 对比度等级速查

无障碍网页内容指南规定的最低对比度要求。

等级	适用对象	最低对比度	说明
AA（必须达标）	正文 / 普通文字	4.5 : 1	小于 18pt（约 24px）常规，或小于 14pt（约 18.66px）粗体
AA（必须达标）	大号文字	3 : 1	≥ 18pt（24px）常规，或 ≥ 14pt（18.66px）粗体
AAA（推荐增强）	正文 / 普通文字	7 : 1	视力较弱用户、长文本阅读场景建议达到
AAA（推荐增强）	大号文字	4.5 : 1	大号文字的增强级要求
非文字控件	按钮边框、图标、输入框、焦点指示	3 : 1	WCAG 1.4.11，确保控件轮廓可被识别
极值参考	纯黑 `#000` 对纯白 `#fff`	21 : 1	理论最大对比度；同色为 1 : 1
例外情况	禁用态文字、装饰图、Logo	无强制要求	纯装饰、品牌 Logo 及不可交互的禁用元素不做要求

⚠️ 使用注意

正确理解对比度结果。

问题	说明
支持哪些颜色写法	`#fff`、`#ffffff`、`#ffffff80`（8 位带透明度）等十六进制；`rgb()`、`rgba()`（逗号或空格分隔、百分比）；`hsl()`、`hsla()`；以及 white、black、red、navy 等常见命名色，大小写与首尾空格均可。
半透明颜色怎么算	WCAG 对比度只定义在不透明颜色之间。本工具对带 alpha 的颜色按标准 alpha 合成规则处理：半透明前景先与背景合成，半透明背景再压到白底，然后计算，结果反映「实际呈现」在白底下的对比度；若背景是图片或彩色容器，请以实际叠加后的颜色重新输入。
取色器与手动输入的关系	左侧色块点击弹出系统取色器（仅能选纯色），手动输入框支持 rgb/hsl 等全部写法，两者实时同步；输入了无法解析的颜色时输入框会标红，结果保持上一次有效值不变。
大号文字怎么界定	WCAG 的大号文字指 ≥ 18pt（约 24px CSS 像素）常规字重，或 ≥ 14pt（约 18.66px）粗体。中文笔画较密，设计中文界面时即使满足 3:1 也建议适当提高余量。
对比度高就一定好看吗	不是。对比度只衡量可辨识性，不代表美观与舒适：纯白对纯黑虽然是 21:1，但长时间阅读可能刺眼，深色模式常用近黑配近白（如 `#1f2329` 对 `#f7f8fa`）兼顾可读性与舒适度。

⚠️ 计算在浏览器本地完成，不上传任何颜色数据。
结果依据 WCAG 2.1 相对亮度公式与等级阈值计算，可作为设计与自查参考。对比度达标是无障碍要求之一，但不代表整体体验无障碍；正式合规请结合完整的 WCAG 审计（字号、焦点、语义结构等）。

🎨

颜色对比度在线检测工具（WCAG AA / AAA）

设计 / 开发完全免费 🌙 支持黑夜模式 🔒 本地运行不上传 📐 WCAG 2.1 标准 🔤 HEX/RGB/HSL 全支持 🖥️ 实时文字预览

浅灰文字配白底到底能不能看清？按钮边框颜色是否符合无障碍要求？靠眼睛估很容易踩坑。
这个工具按 WCAG 2.1 标准给出量化答案：
① 输入前景文字色与背景色（#hex、rgb/rgba、hsl/hsla、命名色均可，支持透明度）；
② 实时计算对比度比值（1:1 ～ 21:1）与两色的相对亮度；
③ 自动判定 AA 正文 4.5:1、AA 大字 3:1、AAA 正文 7:1、AAA 大字 4.5:1 及非文字 UI 控件 3:1 是否通过，给出当前配色能达到的最高等级；
④ 内置真实文字预览、取色器、常用配色快选与前后景色交换，方便快速试色。
适合前端开发、UI 设计、品牌落地页自查与无障碍合规改造。

类别设计工具 / 无障碍

输入前景色 + 背景色（HEX/RGB/HSL）

输出对比度比值与 AA/AAA 判定

依据标准WCAG 2.1（相对亮度公式）

核心特性

WCAG 对比度比值

AA / AAA 达标判定

大号 / 正文分级

UI 控件 3:1 检查

HEX/RGB/RGBA/HSL

透明度 alpha 合成

实时文字效果预览

取色器与配色快选

关于这个工具

计算严格遵循 WCAG 2.1 定义：
① 先把颜色转换为 0–255 的线性通道：对每个通道做 gamma 解码——c ≤ 0.03928 时 c/12.92，否则 ((c+0.055)/1.055)^2.4；
② 相对亮度 L = 0.2126·R + 0.7152·G + 0.0722·B（绿色权重最高，符合人眼对绿色最敏感的特性）；
③ 对比度 (L1 + 0.05) / (L2 + 0.05)，取较亮色作分子，结果落在 1:1 到 21:1 之间；
④ HSL 输入先按标准色相环算法转为 RGB，再走同一流程，保证与设计软件结果一致；
⑤ 带透明度的颜色按 alpha compositing 合成到不透明底再计算，符合「用户实际看到的颜色」这一判断原则。

怎么用

第 1 步
在「前景文字色」输入文字颜色：可直接输入色值，也可点左侧色块用取色器选择，或点常用配色快选。
第 2 步
在「背景颜色」设置底色；点「⇅ 交换前景与背景」可一键反转（例如检查深色模式）。
第 3 步
结果区实时显示对比度比值、AA/AAA 五项通过状态与可达到的最高等级，输入即算，无需点按钮。
第 4 步
通过左侧实时预览确认大号标题与正文在该配色下的实际观感。
第 5 步
对照下方「WCAG 等级速查」确认字号与等级要求，将合格配色用于设计稿或 CSS 变量。

更新记录

v1.0 2026-10-11 工具正式上线：支持 WCAG 2.1 颜色对比度检测。兼容 3/4/6/8 位十六进制、rgb/rgba（逗号与空格语法、百分比）、hsl/hsla 及常用命名色；按相对亮度公式实时计算 1:1～21:1 对比度，判定 AA 正文（4.5:1）、AA 大字（3:1）、AAA 正文（7:1）、AAA 大字（4.5:1）与非文字 UI 控件（3:1）达标状态；半透明颜色按 alpha 合成到白底计算；提供系统取色器、12 色常用配色快选、前后景交换与大号/正文实时预览，非法输入标红提示。纯浏览器本地运行，适配黑夜模式。

常见问题

对比度 4.5:1 到底是谁和谁比？

是「文字颜色相对亮度 + 0.05」与「背景颜色相对亮度 + 0.05」的比值，较亮的一方作分子，所以结果永远 ≥ 1。4.5:1 是 WCAG AA 级对普通正文的最低要求，常见的正牌灰 #767676 对白底约为 4.54:1，恰好过线。

为什么我在深色模式里的结果和设计软件不一样？

通常有两种原因：① 设计软件里背景不是纯色（有渐变、透明度叠加），WCAG 对比度只能计算不透明纯色，请取实际叠加后的颜色；② 颜色带透明度，本工具默认把半透明层合成到白底再算，如果你的深色模式背景是 #1f2329 这样的近黑色，请直接把它作为背景输入，得到的才是深色模式下的真实比值。

大标题用 3:1 就够了，具体怎么算大号文字？

WCAG 规定：≥ 18pt（约 24px CSS 像素）常规字重，或 ≥ 14pt（约 18.66px）粗体，算大号文字，AA 只需 3:1、AAA 需 4.5:1。但中文笔画密集、小字号多，做中文界面时建议不要卡着最低线，正文尽量留一些余量。

禁用（disabled）状态的灰字也要达标吗？

WCAG 明确把「禁用的 UI 组件」与纯装饰、品牌 Logo 列为例外，不强制对比度要求。但要注意：一旦该元素仍可交互或承载必要信息（比如占位符提示），仍建议尽量达到 3:1 以上，避免用户完全看不到。

支持输入 rgba / hsla 半透明色吗？

支持。由于 WCAG 公式只针对不透明颜色，工具会先把半透明前景与背景做标准 alpha 合成，若背景本身也带透明度则再压到白底，然后给出「实际呈现效果」的对比度；8 位 hex（如 #00000080）与 4 位简写（如 #0008）同样可用。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！