从设计开始保持易读
在真实文本块中预览这组颜色。
对比度
17.32:1
普通文字 AA
通过
普通文字 AAA
通过
大号文字 AA
通过
大号文字 AAA
通过
界面组件 AA
通过
从设计开始保持易读
在真实文本块中预览这组颜色。
对比度
17.32:1
普通文字 AA
通过
普通文字 AAA
通过
大号文字 AA
通过
大号文字 AAA
通过
界面组件 AA
通过
检查 WCAG 颜色对比度并在 HEX、RGB 和 HSL 之间转换颜色。
输入两种颜色,查看 WCAG 结果,然后复制转换值。
该比率使用 WCAG 对比度公式来比较前景色和背景色的相对亮度。比例从相同亮度的 1:1 到最大黑白差异的 21:1。计算使用输入的颜色值,因此它不会自动考虑透明度、渐变、背景图像、阴影、抗锯齿、显示条件或交互状态下显示的不同颜色。测试正常、悬停、焦点、活动、禁用和访问状态的实际渲染颜色(当它们不同时)。
对于普通文本,WCAG AA 使用最小比例 4.5:1,AAA 使用 7:1。大文本使用较低的阈值,因为较大、足够粗的字符更容易区分:AA 为 3:1,AAA 为 4.5:1。文本是否足够大取决于其渲染的大小和重量,而不仅仅是设计标签。因此,一对可以通过大标题,但不能通过正文。检查与实际排版和一致性目标相匹配的要求。
是的。文本对比度只是颜色可访问性的一部分。在 WCAG 非文本对比度指导下,识别用户界面控件、组件状态、图形对象和键盘焦点指示器所需的视觉信息通常需要与相邻颜色至少有 3:1 的对比度。装饰元素和非活动控件有不同的考虑因素。在上下文中测试边框、图标、图表、选定状态、验证消息和焦点轮廓。通过 AA 的文本对并不能证明同一屏幕上的每个交互或图形元素都是可访问的。
在文本或基本图形出现的位置输入有效的前景色和背景色。半透明图层与其背后的内容混合在一起,渐变或照片在同一元素上创建不同的对比度。对最弱的相关区域进行采样,然后测试其他可能的位置和响应作物。如果对比度取决于阴影、轮廓或叠加,请在手动检查中包括实际渲染的效果。当底层图像可能发生变化时,最好在重要文本后面有稳定的坚实背景。
不。对比度是一项可衡量的要求。无障碍设计还需要可读的类型、足够的间距、语义结构、标签、键盘操作、可见焦点、有意义的替代方案、可用的缩放和重排、受控运动以及不仅仅依赖于颜色的指令。颜色对可以在数学上通过,但在细字体、小尺寸、眩光、色觉差异或密集布局中仍然很困难。使用结果作为更广泛审查中的一项检查,并使用代表性内容和状态测试实际界面。