元素必须满足最低色彩对比度阈值
规则 ID:
color-contrast
规则集:
axe-core 4.11
用户影响:
严重
指南:
WCAG 2.1 (AA), WCAG 2.0 (AA), WCAG 2.2 (AA), Trusted Tester, EN 301 549, RGAA
Need accessibility training?
Deque University offers an extensive curriculum of self-paced online courses for every skill profile and experience level.
Compliance Data & Impact
Disabilities Affected
- 低视力
- 色盲
Standard(s)
- WCAG 2.1 (AA)
- WCAG 2.0 (AA)
- WCAG 2.2 (AA)
- Trusted Tester
- EN 301 549
- RGAA
WCAG 成功标准 [WCAG 2.1 (AA)]
- 1.4.3: Contrast (Minimum)
WCAG 成功标准 [WCAG 2.0 (AA)]
- 1.4.3: Contrast (Minimum)
WCAG 成功标准 [WCAG 2.2 (AA)]
- 1.4.3: Contrast (Minimum)
Trusted Tester 指南
- 13.C: The visual presentation of text and images of text have sufficient contrast.
RGAA
- 3.2.1: On Focus
如何解决问题
确保所有文本元素的前景文本和其后面的背景颜色之间具有足够的颜色对比度。
成功标准：确保小文本的颜色对比度至少为 4.5:1，大文本的颜色对比度至少为 3:1，即使文本是图像的一部分。 大文本在要求中定义为 18pt（24 CSS 像素）或 14pt 粗体（19 CSS 像素）。 注意：如果发现元素比例为 1:1，则认为 "不完整" ，需要人工审核。
使用下面的颜色对比度分析器来查找符合指南的颜色。
颜色对比度分析工具：以下是可根据指南分析颜色对比度的工具链接：
- axe DevTools 浏览器扩展 — Deque的企业级产品，axe DevTools HTML 使开发团队能够将可访问性测试集成到现有的自动化测试流程中，并被客户与Deque的 axe Monitor 可访问性监控和报告产品结合使用。 除了提供与多种编程语言集成的代码库外，axe DevTools 还包含针对 Google Chrome 和 Mozilla Firefox 的网页可访问性分析扩展，使企业前端开发人员可以随时运行快速可访问性测试。 分析工具返回有关可访问性违规的详细信息和解决问题的说明，包括更深入知识的链接。
- axe-core — axe 可访问性引擎是一个开源 JavaScript 可访问性规则库，它速度快，不会返回误报错误或重复结果，并且可以作为 GitHub 存储库、浏览器插件或框架集成使用。
为什么重要
有些视力低下的人会遇到对比度低的情况，这意味着明亮或黑暗的区域并不多。 所有物体都倾向于呈现出相同的亮度，这使得很难区分轮廓、边界、边缘和细节。 亮度与背景太接近的文本可能难以阅读。
视力低下的人数几乎是完全失明的人数的三倍。 每十二个人中就有一人无法看见全部颜色光谱——在美国，约有 8% 的男性和 0.4% 的女性。 视力低下或色盲的人无法在对比度不够的情况下区分背景中的文字。
在背景中考虑到了颜色的透明度和不透明度。
前景中的颜色透明度和不透明度更难考虑和处理，因为：
- 前景和背景的颜色相同。
- CSS 背景渐变。
- CSS 伪元素中的背景颜色。
- 使用 CSS 边框创建的背景颜色。
- 与前景中的另一个元素重叠 - 有时这会因为棘手的定位而出现。
- 元素通过 CSS 移出视口。
规则描述
所有文本元素的文本和其背后的背景颜色之间都必须符合 WCAG 2 AA 对比度阈值。
算法（简单来说）
检查所有文本元素，确保前景文本和背景颜色之间的对比度符合 WCAG 2 AA 对比度阈值。
注意：
此规则不会报告具有 background-image某种属性、被其他元素遮挡或为文本图像的文本元素。
这还会检查禁用按钮的子元素，以便可以忽略它们以避免出现错误值。
资源
请参阅 axe 4.11 规则的完整列表。
这个信息对您有帮助吗？
您已经给出反馈，谢谢。.
您的回复如下：
这个信息对您有帮助吗？
提交反馈的日期/时间：
提交反馈的日期/时间：