颜色对比度检测

输入文字颜色和背景颜色,按 WCAG 2.x 标准检查可读性。不达标时,工具会在保持色相的前提下给出最接近的合格颜色。

文字颜色
背景颜色

    大号标题文字

    这是一段正文示例,用来检查在当前配色下长时间阅读是否吃力。

    这是一段 13px 的小字注释。

    界面按钮

    使用步骤

    1. 分别设置文字色和背景色,可以用“交换”快速对调。
    2. 查看五项检测结果:绿色为通过,红色为不通过。
    3. 不通过时,点击建议色即可替换文字色。

    常见问题

    对比度标准是多少?
    WCAG 2.x 规定:正文 AA 级至少 4.5:1,AAA 级至少 7:1;大号文字(约 24px 常规或 18.5px 粗体以上)AA 级至少 3:1,AAA 级至少 4.5:1;图标、输入框边框等界面元素至少 3:1。
    对比度是怎么计算的?
    先算出两种颜色的相对亮度 L1(较亮)和 L2(较暗),对比度 = (L1 + 0.05) / (L2 + 0.05),范围从 1:1 到 21:1。
    建议色是怎么来的?
    工具在 OKLCH 空间里保持色相和彩度,只调整明度,找到刚好达标且改动最小的颜色,所以建议色和原色看起来是同一种颜色。