Loading...
Loading...
前景/背景配色 WCAG 2.2 AA & AAA 合规检查
选定前景与背景色,立即看到对比度数值以及对 WCAG 2.2 AA / AAA 标准的合规情况。为关心无障碍设计的设计师与前端工程师而做。
WCAG 定四档线:AA 要求正文 4.5:1、大字 3:1;AAA 拉到 7:1 与 4.5:1。这是基于相对亮度的数学计算(不是感知),两个视觉看着接近的颜色对比度可能差很远。
配色立刻应用到示例文本
AA 与 AAA 分别针对正文/大字给出通过/不通过
一键切换前后景
直接粘进样式表,不用手敲 HEX
系统取色器或直接输入 HEX 值
全在浏览器内完成
正文至少达到 AA 标准。AAA 是金线但会限制设计,按需选择。
设置前景(文字)颜色
设置背景色
查看对比度与 WCAG 判定
调整直到通过 AA(条件允许就争取 AAA)
上线前校验配色是否合规
前端确认实现颜色与无障碍规范一致
检查品牌色在常见背景下能否达到 AA
保证数据色与图表背景对比足够
为用户自定义主题挑无障碍默认色
为无障碍审计留下记录