跳到主要内容

    我们使用Cookie

    我们使用Cookie来改善您的体验。继续浏览即表示您接受其使用。

    在我们的 Cookie 隐私

    WCAG分析器 逐一检测整套调色板的无障碍对比度合规性

    逐一分析调色板中各颜色组合的WCAG对比度,清晰标注AA、AAA达标情况,帮你全面把控整站配色的无障碍合规水平。

    待分析的调色板

    对比度矩阵

    Primary
    Secondary
    Background
    Text
    Muted
    Primary
    1.15
    Fail
    3.68
    AA-L
    3.98
    AA-L
    1.29
    Fail
    Secondary
    1.15
    Fail
    4.23
    AA-L
    3.45
    AA-L
    1.12
    Fail
    Background
    3.68
    AA-L
    4.23
    AA-L
    14.63
    AAA
    4.76
    AA
    Text
    3.98
    AA-L
    3.45
    AA-L
    14.63
    AAA
    3.07
    AA-L
    Muted
    1.29
    Fail
    1.12
    Fail
    4.76
    AA
    3.07
    AA-L

    WCAG 2.1 图例

    AAA

    AAA 级

    对比度 ≥ 7:1 - 优秀

    AA

    AA 级

    对比度 ≥ 4.5:1 - 标准

    AA-L

    AA 大字号

    对比度 ≥ 3:1 - 大字号

    不通过

    不通过

    对比度 < 3:1 - 不合规

    逐一分析调色板中各颜色组合的WCAG对比度,清晰标注AA、AAA达标情况,帮你全面把控整站配色的无障碍合规水平。

    WCAG分析器 逐一检测整套调色板的无障碍对比度合规性 只显示与其功能相关的控件和结果。可用选项会随工具和输入内容而变化。

    支持的格式

    Palette
    HEX
    CSS Variables
    JSON

    工作原理

    1

    步骤 1

    打开 WCAG分析器 逐一检测整套调色板的无障碍对比度合规性,准备界面要求的输入

    2

    步骤 2

    根据需要的结果调整可见控件

    3

    步骤 3

    在复制、导出或再次使用前检查结果

    要避免的常见错误

    • 如果某个格式或选项没有出现在界面中,不要默认该功能支持它。
    • 在品牌、界面或生产文件中使用前,请检查得到的数值。
    • 如果结果用于文字或 UI,也要检查对比度。

    专业技巧

    • 比较不同方案时保留源值和结果。
    • 使用工具实际显示的格式,不要自行估算转换结果。
    • 在手机和平板上允许文字和控件换行。

    数据处理

    数据处理方式取决于所使用的功能。网站的同意、分析和账户服务与颜色操作分开管理。

    这个工具能做什么

    逐一分析调色板中各颜色组合的WCAG对比度,清晰标注AA、AAA达标情况,帮你全面把控整站配色的无障碍合规水平。 WCAG分析器 逐一检测整套调色板的无障碍对比度合规性 专注于这项任务,不会默认界面中没有显示的功能。使用页面提供的控件获得需要的结果,并在把数值带到其他工具、样式表、设计文件或文档之前先进行检查。

    准备合适的输入

    从 WCAG分析器 逐一检测整套调色板的无障碍对比度合规性 要求的输入开始,根据页面可能是颜色、数值、图片或设置。本页列出的格式为 Palette, HEX, CSS Variables, JSON。如果某种格式或选项没有出现在界面中,不要把它视为这项具体功能已经支持的内容。

    读取并检查结果

    请在所执行操作的上下文中读取结果。把它与源值比较,并检查影响计算的设置。对于重要的视觉工作,不要只根据颜色代码判断,还应在最终要使用的真实界面中查看实际效果。

    在手机和平板上使用

    WCAG分析器 逐一检测整套调色板的无障碍对比度合规性 使用网站的响应式布局。在窄屏上,标题、说明、breadcrumbs 和控件可以自动换行,以避免较长翻译被截断。不过,最终仍应在实际要使用的设备和场景中检查显示效果。

    在项目中再次使用结果

    确认结果后,只使用 WCAG分析器 逐一检测整套调色板的无障碍对比度合规性 实际提供的操作,例如在界面存在时复制或导出。如果之后可能需要还原设置,请保留源值;对于 UI 颜色,也应记录颜色的用途以及需要满足的对比度要求。

    相关工具

    指南和教程

    通过详细指南学习如何使用我们的工具。

    常见问题

    逐一分析调色板中各颜色组合的WCAG对比度,清晰标注AA、AAA达标情况,帮你全面把控整站配色的无障碍合规水平。

    打开工具,提供界面要求的输入,调整可见控件,然后检查结果。

    本页列出的格式为 Palette, HEX, CSS Variables, JSON。准确的支持范围取决于 WCAG分析器 逐一检测整套调色板的无障碍对比度合规性 的功能和界面中实际显示的控件。

    可以。布局是响应式的,窄屏上文字和控件会换行,避免长内容被截断。

    检查源值、应用的设置和结果。如果用于文字或 UI,也要在实际场景中检查对比度。

    通过详细指南学习如何使用我们的工具。

    相关工具