颜色对比度

检查前背景色对比是否符合的可访问性标准

返回工具列表

工具面板

本地处理
正在加载工具...
关于颜色对比度

按 WCAG 公式计算对比度，并逐条标出 AA / AAA 在普通字号与大字号下是否达标。

  • 1

    按 WCAG 的定义算比值：相对亮度用 sRGB 加权系数（0.2126 / 0.7152 / 0.0722）换算后取 `(亮 + 0.05) / (暗 + 0.05)`，理论最大值是纯黑对纯白的 21:1。

  • 2

    一次给出四档判定：正文 AA 4.5、大字号 AA 3.0、正文 AAA 7.0、大字号 AAA 4.5。默认这组配色是 17.74:1，范例性通过。

  • 3

    色块与文本框双向同步，接受 3 位与 6 位 hex（大小写不限）；带透明度的 8 位 hex 不接受——对比度定义本身要求先把半透明色合成到背景上。

相关工具

查看全部
设计工具

颜色选择器

选择并提取 HEX、RGB、HSL 颜色值

设计工具
颜色选择器
设计工具

渐变色生成器

可视化创建漂亮的 CSS 线性或径向渐变

设计工具
渐变色生成器
设计工具

CSS 阴影生成器

可视化调节并复制 box-shadow 代码

设计工具
CSS 阴影生成器
设计工具

单位换算

各领域物理单位的精准换算

设计工具
单位换算
设计工具

字节转换

在 B, KB, MB, GB, TB 间进行转换

设计工具
字节转换
设计工具

CSS 圆角生成器

可视化调节四角圆角并复制 border-radius 代码

设计工具
CSS 圆角生成器
设计工具

CSS 裁剪路径生成器

拖动顶点调整形状，复制 clip-path: polygon() 代码

设计工具
CSS 裁剪路径生成器
设计工具

CSS 缓动函数生成器

拖动控制点编辑 cubic-bezier 曲线，复制缓动代码

设计工具
CSS 缓动函数生成器