开发调试
深色正文配浅色底，怎样核对文字对比度
极捷工具编辑 · 更新于
给说明页面选正文颜色时，肉眼看着清楚还不够。用两种不透明 HEX 颜色核对 WCAG 2.2 数值阈值，再回到实际页面检查普通文字、标题与交互状态。
打开文字颜色对比度检查 →操作步骤
- 打开文字颜色对比度检查，保留默认文字色 #334155 和背景色 #FFFFFF。也可在文本框输入自己的 #RGB 或 #RRGGBB 颜色，或用取色控件选择。
- 阅读计算结果：默认组合按 sRGB 公式约为 10.35:1。检查“普通文字 AA”4.5:1 和“普通文字 AAA”7:1 是否都显示“达到”；标题阈值另列。
- 在预览区分别看 16px 普通文字和 24px 大号文字，再点击“交换颜色”，确认同一对颜色互换后比值不变，但真实页面的阅读体验仍要人工查看。
- 试着把文字色改成 #FFFFFF，使文字与白底一致。结果应为 1.00:1，四项阈值都显示“未达到”；这是输入与计算链路的简单核对。
- 恢复示例后点击“复制 CSS”，粘贴到自己的样式草稿。最终在真实页面分别核对字号、字重、背景和悬停、聚焦等状态。
跟着示例试一次
说明页拟用 color: #334155 和 background-color: #FFFFFF。工具应显示约 10.35:1，普通文字 AA 与 AAA 都达到；把文字也设为白色后变为 1.00:1，不达到任何列出的阈值。
color: #334155;
background-color: #FFFFFF;怎样确认结果正确
#334155 对 #FFFFFF 的完整计算结果高于 7:1；#FFFFFF 对 #FFFFFF 必须精确为 1:1。页面显示两位小数，但达标判断按未四舍五入的比值完成。
常见问题与边界
本工具只计算一对不透明 sRGB HEX 颜色，不支持透明度、渐变、图片背景，也不扫描整个网站。WCAG 2.2 普通文字 AA 阈值为 4.5:1、大号文字为 3:1；AAA 分别是 7:1 和 4.5:1。大号文字有具体字号与字重定义，不能只凭预览标题判断实际元素符合条件。 颜色数值达标不是整页无障碍合格证明。禁用状态、悬停、聚焦、图标、图片上的文字和用户缩放都需在真实界面另行检查。计算在当前浏览器进行，不上传输入；复制 CSS 后仍需自行检查粘贴结果。参考：https://www.w3.org/TR/WCAG22/#contrast-minimum 。