设置背景色
输入 3 或 6 位十六进制色值，可省略 #，例如 #FFF 或 #1E3A8A。仅支持 sRGB 纯色。
大号文字指常规字重至少 24 CSS px，或粗体至少 18⅔ CSS px。大号文字预览使用 24 px。
推荐文字颜色
生成配色后，即可查看适合该背景的文字颜色。
从黑、白、灰阶和彩色的固定色板中筛选，仅显示符合要求的颜色，并未涵盖所有 RGB 颜色。提高要求可能减少结果。修改背景或对比度要求会清除之前的结果。
显示的对比度四舍五入到小数点后两位。使用 WCAG 2 的 sRGB 公式，判断是否达标时不四舍五入。结果仅评估这组纯色的文字对比度；字体、透明度、图片、渐变及页面其他部分仍需单独检查。
如何查找易读的文字配色
- 输入纯色背景的 HEX 色值，或使用取色器。
- 选择普通文字 AA（4.5:1）、普通文字 AAA（7:1）或大号文字 AA（3:1），然后生成配色。
- 输入需要预览的文字，比较推荐颜色与对比度，然后复制 HEX 色值或文字和背景的 CSS 声明。
网站设计配色示例
- 以 #FFFFFF 为背景，选择适合企业网站或结账表单的深色文字。
- 以 #1E3A8A 为背景，查找导航栏或仪表板标题区的浅色文字。
- 尝试 #777777 和 7:1 要求，了解为什么部分中间色调背景无法达到普通文字 AAA 对比度。
常见问题
与颜色对比度检查器有什么不同？
这个生成器只需要一个背景色，就会推荐符合所选要求的文字颜色。对比度检查器则用于检查你已选好的文字和背景色组合。
为什么 AAA 可能没有结果？
部分中间色调背景搭配任何文字颜色，都无法达到 7:1。黑色和白色是最暗和最亮的端点，如果两者都不符合，就没有不透明 sRGB 文字颜色能达到该要求。可以尝试更换背景。
普通正文可以使用 3:1 吗？
不可以。普通文字的 AA 要求是 4.5:1。3:1 适用于大号文字，即常规字重至少 18 pt（24 CSS px），或粗体至少 14 pt（18⅔ CSS px）。
配色通过是否代表整个网站符合无障碍规范？
不是。此计算仅涵盖不透明 sRGB 纯色组合的文字对比度。仍需单独检查实际字体、焦点状态、内容、键盘操作、图片和其他无障碍要求。
颜色或预览文字会被上传吗？
计算和预览均在浏览器标签页内进行。此工具不会保存你的颜色或预览文字，也不会将其加入分析事件。复制功能只将你请求的 HEX 或 CSS 写入剪贴板。
背景色、预览文字和结果均保留在此浏览器标签页中。工具不会保存这些数据，也不会将其加入分析事件。如需保留，请复制 HEX 色值或 CSS。
觉得好用？分享给同事或朋友。
点击 表示支持，或点击 提供反馈。