ToolMochi

对比度检测

检查前景色与背景色的对比度,并按 WCAG AA / AAA 标准判断普通文本和大字号是否达标。

对比度

17.74: 1
普通文本 4.5:1 · 达标大字号 3:1 · 达标
AAA 普通文本 7:1 · 达标AAA 大字号 4.5:1 · 达标
效果预览

清晰的标题示例

这是一段正文示例,用来检查实际阅读时的对比效果。

小字示例:辅助说明与版权信息。

本工具完全在浏览器本地运行,输入内容不会被上传。

如何使用

  1. 1分别选择前景文字色和背景色
  2. 2查看实时计算的对比度数值
  3. 3参考 AA / AAA 标识,判断普通文本和大字号是否达标

常见问题

AA 和 AAA 的区别是什么?

WCAG AA 要求普通文本对比度至少 4.5:1、大字号至少 3:1;AAA 更严格,分别是 7:1 和 4.5:1。

大字号如何定义?

通常指 18pt(约 24px)以上,或 14pt(约 18.66px)加粗的文本。

对比度是怎么计算的?

按 WCAG 相对亮度公式计算两种颜色的亮度,再用 (较亮 + 0.05) / (较暗 + 0.05) 得到比值。

相关工具

颜色格式转换

在 HEX、RGB、HSL 和 HSV 之间转换颜色,支持取色器实时预览。

调色板生成器

基于一个主色生成明暗色阶、互补色、邻近色和三角配色,快速搭建完整配色方案。

渐变生成器

可视化生成线性或径向 CSS 渐变,调整颜色、角度和位置,一键复制 CSS 代码。

阴影生成器

可视化调整偏移、模糊、扩散、颜色和透明度,生成 CSS box-shadow 代码。