对比度
- AA 常规文字 4.5:1
- AA 大号文字 3:1
- AAA 常规文字 7:1
- AAA 大号文字 4.5:1
- 界面组件和图形 3:1
最接近的达标颜色
已保存的颜色
颜色对比度检查器
在发布设计之前，检查文字在背景上是否清晰可读。选择或输入文字颜色和背景颜色，检查器会显示 WCAG 2.x 对比度，并给出常规文字、大号文字和界面组件在 AA 与 AAA 级别下是否通过。实时预览、色盲模拟和修正建议帮助你找到合适的配色。 以 HEX、RGB 或 HSL 选择文字颜色和背景色。WCAG 对比度、AA 和 AAA 结果以及预览会随输入实时更新，并推荐最接近的达标颜色。所有内容都保存在此浏览器中。
它是如何运作的
- 选择文字颜色和背景颜色，或以 HEX、RGB、HSL 输入。如果文字半透明，请设置文字不透明度。
- 查看对比度以及常规文字、大号文字和界面组件的 AA 与 AAA 徽章，并检查实时预览。
- 如果未通过，应用推荐颜色；把好的配色保存到调色板，并把 CSS 复制到项目中。
给出修正，而不只是分数
当配色未通过时，检查器会在相同色相和饱和度下寻找最接近且能达到 AA 和 AAA 的文字颜色与背景颜色，一键即可应用。半透明文字会先与背景混合，与浏览器的绘制方式完全一致。
私密且可迁移
你的颜色和调色板只保存在此浏览器中。可将全部内容保存为 JSON 以备份或迁移到其他设备，也可将结果保存为 PDF 或图片。撤销和重做覆盖每一次修改。
常见问题
颜色对比度检查器免费吗？
是的。它完全免费，无需账户，可在任何现代浏览器中使用。
我需要多大的对比度？
WCAG AA 级要求常规文字至少 4.5:1，大号文字以及输入框边框、图标等界面组件至少 3:1。AAA 级要求常规文字 7:1，大号文字 4.5:1。
4.48 四舍五入是 4.5，为什么仍不通过？
WCAG 的阈值是精确的。4.48:1 低于 4.5:1，因此常规文字不通过 AA。检查器比较的是未经四舍五入的数值，所以徽章结果始终严格。
相关工具
颜色对比度检查器背后的故事
WCAG 对比度数值从何而来：4.5:1 与 7:1、基于 sRGB 的相对亮度、WCAG 2.1 为界面组件新增的 3:1 规则、色盲以及面向 WCAG 3 的 APCA。
调色板生成器
在浏览器中创建、锁定并打乱调色板。复制 HEX、CSS 变量或 JSON，导出 PNG 或 SVG，并从照片提取颜色。
色轮
在交互轮上选择一种颜色，生成互补色、类似色、三色色和其他调色板，并复制 HEX、RGB、HSL、HSV 或 CMYK。
渐变编辑器
在浏览器中制作线性和径向 CSS 渐变。拖动色标、设置角度，并复制 CSS、HEX、RGB、HSL、HSV 或 CMYK。
了解更多色彩知识
色彩在屏幕与印刷中如何工作：RGB、CMYK、HSL、十六进制、色轮、渐变、对比度，以及 PictorX 工具。
准备好尝试了吗？
在浏览器中打开 PictorX — 无需安装，无需信用卡即可启动。
前往编辑器