对比度(最低):
理解符合性准则 (SC) 1.4.3
此成功标准的意图
此符合性准则的意图是提供文本与其背景之间足够的对比度,以便中度低视力的人(不使用对比度增强辅助技术的人)能够阅读。对于没有色觉缺陷的人,色调和饱和度对阅读表现评估的可读性影响最小或没有影响(Knoblauch 等人,1991)。色觉缺陷会在一定程度上影响亮度对比度。因此,在建议中,对比度的计算方式使得颜色不是关键因素,以便有色觉缺陷的人在文本和背景之间也能有足够的对比度。
装饰性且不传达任何信息的文本被排除在外。例如,如果随机单词用于创建背景,并且可以重新排列或替换这些单词而不改变含义,那么它就是装饰性的,不需要满足此准则。
较大且字符笔画较宽的文本在较低对比度下更容易阅读。因此,大文本的对比度要求较低。这允许作者为大文本使用更广泛的颜色选择,这对于页面设计(特别是标题)很有帮助。18 点文本或 14 点粗体文本被认为足够大,需要较低的对比度。(参见资源下的美国盲人印刷协会大字印刷准则和国会图书馆大字印刷准则)。“18 点”和“粗体”在不同字体中可能有不同的含义,但除了非常细或不常见的字体外,它们应该是足够的。由于有这么多不同的字体,使用了通用的衡量标准,并包含了一个关于花式或细字体的注释。
注意 1:评估此符合性准则时,应从用户代理处获取点数大小,或以用户代理计算字体指标的方式计算。点数大小基于 CSS3 Values 中定义的 CSS pt 大小。点数与 CSS 像素之间的比率为 1pt = 1.333px,因此 14pt 和 18pt 分别相当于大约 18.5px 和 24px。
注意 2:因为不同的图像编辑应用程序默认使用不同的像素密度(e.g.72 PPI 或 96 PPI),在图像编辑应用程序中指定字体的点数大小时,在以特定大小呈现文本方面可能不可靠。创建大尺度文本图像时,作者应确保所得图像中的文本大致相当于正文文本默认大小的 1.2 和 1.5 em,或 120% 或 150%。例如,对于 72 PPI 的图像,作者需要使用大约 19 pt 和 24 pt 的字体大小,以便成功向用户呈现大尺度文本图像。
前述文本的对比度要求也适用于文本图像(已渲染为像素并存储在图像格式中的文本),如符合性准则 1.4.3 所述。
此要求适用于文本图像被理解为文本的情况。偶然出现的文本,例如照片中恰好包含的路标,不包括在内。为了某种原因设计成对所有观众都不可见的文本也不包括在内。程式化的文本,如公司标志中的文本,应根据其在页面上的功能来处理,这可能或可能不保证将该内容包含在文本替代中。logo 和标识之外的公司视觉指南不包含在例外范围内。
本条款中有一个例外,读作“作为包含大量其他视觉内容的图片的一部分”。此例外旨在将包含文本的图片与为替换文本以获得特定外观而制作的文本图像区分开来。
注意:文本图像的缩放效果不如文本,因为它们容易像素化。此外,更改文本图像的前景和背景对比度及颜色组合也更难,这对某些用户来说是必要的。因此,我们建议尽可能使用文本,如果不使用,请考虑提供更高分辨率的图像。
最低对比度符合性准则 (1.4.3) 适用于页面上的文本,包括占位符文本以及指针悬停在对象上或对象具有键盘焦点时显示的文本。如果页面中使用了这些,文本需要提供足够的对比度。
虽然此符合性准则仅适用于文本,但类似的问题也出现在图表、图形、示意图和其他非文本信息中呈现的内容。以这种方式呈现的内容也应具有良好的对比度,以确保更多的用户可以访问该信息。
另请参见 了解成功准则 1.4.6 对比度(增强)。
所选比率的理由
较大且字符笔画较宽的文本在较低对比度下更容易阅读。因此,大文本的对比度要求较低。这允许作者为大文本使用更广泛的颜色选择,这对于页面设计(特别是标题)很有帮助。18 点文本或 14 点粗体文本被认为足够大,需要较低的对比度。(参见资源下的美国盲人印刷协会大字印刷准则和国会图书馆大字印刷准则)。“18 点”和“粗体”在不同字体中可能有不同的含义,但除了非常细或不常见的字体外,它们应该是足够的。由于有这么多不同的字体,使用了通用的衡量标准,并包含了一个关于花式或细字体的注释。
注意 1:评估此符合性准则时,应从用户代理处获取点数大小,或以用户代理计算字体指标的方式计算。点数大小基于 CSS3 Values 中定义的 CSS pt 大小。点数与 CSS 像素之间的比率为 1pt = 1.333px,因此 14pt 和 18pt 分别相当于大约 18.5px 和 24px。
注意 2:因为不同的图像编辑应用程序默认使用不同的像素密度(e.g.72 PPI 或 96 PPI),在图像编辑应用程序中指定字体的点数大小时,在以特定大小呈现文本方面可能不可靠。创建大尺度文本图像时,作者应确保所得图像中的文本大致相当于浏览器渲染的正文文本默认大小的 1.2 和 1.5 em,或 120% 或 150%。
不同的色觉缺陷(先天或后天)会导致用户对色调的感知不同,从而产生与正常视力用户不同的颜色和相对亮度对比。因此,这类人群的有效对比度和可读性也不同。然而,色觉缺陷种类繁多,基于定量数据为其规定通用的有效配色(用于对比)并不可行。通过要求良好的亮度对比度来解决该问题,因为亮度对比度不依赖于颜色感知。幸运的是,大部分亮度贡献来源于中波段和长波段感受器,它们的光谱响应高度重叠。结果是,除对主要使用长波长颜色且背景为更暗颜色(通常呈黑色)的原色盲(如红绿色盲)外,通常可以在不考虑具体色觉缺陷的情况下计算有效的亮度对比度(我们提供了一项建议技术,避免在这种情况下使用红色配黑色)。更多信息请参阅 [ARDITI-KNOBLAUCH]、[ARDITI-KNOBLAUCH-1996]、[ARDITI]。
注意:一些有认知障碍的人需要低对比度的颜色组合或色调,因此我们允许并鼓励作者提供调整内容前景和背景颜色的机制。所选的一些组合的对比度级别可能低于符合性准则中发现的那些。只要有恢复到符合性准则中设定的默认值的机制,这就不违反此符合性准则。
3:1 的对比度比例是 [ISO-9241-3] 与 [ANSI-HFES-100-1988] 为标准文本和视力推荐的最低水平。本文使用 4.5:1 的比例,是为了弥补中等视力下降、先天或后天色觉缺陷,或随年龄增长而常见的对比敏感度下降所导致的对比度损失。
其依据为:a)ANSI 标准采用 3:1 作为正常观察者的最低可接受对比度;b)实证研究发现,视力为 20/40 的人群其对比敏感度约损失 1.5 倍 [ARDITI-FAYE]。因此,视力为 20/40 的用户需要的对比度比例约为 3 × 1.5 = 4.5:1。依据类似的实证结果与相同逻辑,视力为 20/80 的用户则需要约 7:1 的对比度。
4.5:1 的对比度比例在 AA 级别中被采纳,因为它能够补偿通常由约 20/40 视力损失所导致的对比敏感度下降。(20/40 大致相当于 4.5:1。)20/40 常被报告为大约 80 岁老人典型的视力水平。 [GITTINGS-FOZARD]
选择 7:1 的对比度作为 AAA 级,是因为它补偿了视力损失相当于大约 20/80 的用户通常经历的对比度敏感度损失。视力损失超过此程度的人通常使用辅助技术来访问其内容(并且辅助技术通常内置了对比度增强以及放大功能)。因此,7:1 的级别通常为不使用辅助技术的低视力用户提供了针对对比度敏感度损失的补偿,同时也为色觉缺陷提供了对比度增强。
注: [ISO-9241-3] 与 [ANSI-HFES-100-1988] 中的计算针对正文文本。对于更大的文本,提供了放宽的对比度比例。
关于公式的注释
从非线性到线性 RGB 值的转换基于 IEC/4WD 61966-2-1 [IEC-4WD] 以及《互联网的标准默认色彩空间 – sRGB》 [sRGB]。
对比度公式 (L1/L2) 依据 [ISO-9241-3] 与 [ANSI-HFES-100-1988] 标准。
ANSI/HFS 100-1988 标准要求在 L1 与 L2 的计算中加入环境光的贡献。使用的 0.05 值基于 [IEC-4WD] 中的典型观看眩光,以及 M. Stokes 等人撰写的 [sRGB] 论文。
此符合性准则及其定义使用术语“对比度”和“相对亮度”而不是“亮度”,以反映 Web 内容本身不发光的事实。对比度给出了显示时产生的相对亮度的度量。(因为它是一个比率,所以它是无量纲的。)
注意 1:参考相关资源,获取利用对比度分析 Web 内容对比度的工具列表。
注 2:另请参见 了解成功准则 2.4.7 可见焦点,其中提供了指示键盘焦点的技术。
注 3:作者有时会选择不为页面的特定区域指定颜色,以帮助需要使用特定颜色组合查看内容的用户能够以他们偏好的配色方案观看内容。有关更多信息,请参阅 了解成功准则 1.4.5 文字图像。
符合性准则 1.4.3 的具体益处
低视力的人通常难以阅读与其背景没有对比度的文本。如果该人还有色觉缺陷,进一步降低了对比度,这种情况会加剧。在文本与其背景之间提供最低的亮度对比度,即使此人看不到完整的颜色范围,也能使文本更易读。它也适用于极少数看不到颜色的个人。
符合性准则 1.4.3 的示例
(目前未记录)
相关资源
资源仅供参考,不代表认可。
符合性准则 1.4.3 - 对比度(最低)的技术和失败点
本章节中的每一项编号条目代表一种技术或技术组合,WCAG工作组认为其足以满足此成功标准。但是,没有必要使用这些特定的技术。有关使用其他技术的信息,请参阅“理解 WCAG 成功标准的技术”,特别是“其他技术”一节。
充分技术
说明:请选择以下与您的内容匹配的情形。每种情形都包含已知且有文献记载的、足以满足该情形的技术或技术组合。
1.4.3 的额外技术(建议性)
虽然对于符合性并非必须,但应考虑使用以下额外技术以使内容更具无障碍性。并非所有技术都适用于或在所有情况下有效。
对于覆盖在带图案背景上的文本使用更高的对比度值(未来链接)
使用 Unicode 文本和样式表代替文本图像(未来链接)
为示意图中的线条使用更高的对比度值(未来链接)
为红黑文本/背景组合使用更高的对比度级别(未来链接)
对于浅色使用主要由中间光谱分量组成的颜色,对于深色使用光谱极值(蓝色和红色波长)
在黑色文本后面使用浅色柔和背景而不是白色背景,以创建足够但不过分的对比度(未来链接)
制作使用满足文本对比度规定的简单线条图的图标(未来链接)
在图形和图表中提供足够的对比度(未来链接)
使用 3:1 或更高的对比度作为默认呈现(未来链接)
为空白文本字段提供足够的颜色对比度(未来链接)
符合性准则 (SC) 1.4.3 的常见失败点
以下是根据……被视为违反符合性准则 1.4.3 的常见错误WCAG工作组。
关键术语
- 对比度比例
(L1 + 0.05) / (L2 + 0.05),其中:
注意 1:对比度范围可从 1 到 21(通常写为 1:1 到 21:1)。
注意 2:因为作者无法控制文本如何渲染的用户设置(例如字体平滑或抗锯齿),可以在关闭抗锯齿的情况下评估文本的对比度。
注意 3:为了符合性准则 1.4.3 和 1.4.6 的目的,对比度是相对于正常使用中渲染文本所处的指定背景来测量的。如果未指定背景颜色,则假定为白色。
注意 4:背景颜色是正常使用中渲染文本所处内容的指定颜色。如果指定了文本颜色但未指定背景颜色,则视为失败,因为用户的默认背景颜色未知且无法评估是否具有足够的对比度。同样,如果指定了背景颜色但未指定文本颜色,则也视为失败。
注意 5:当字母周围有边框时,边框可以增加对比度,并将用于计算字母与其背景之间的对比度。字母周围的窄边框将作为字母的一部分。字母周围填充字母内部细节的宽边框充当光晕,将被视为背景。
注意 6:WCAG 的符合性应针对作者期望在典型呈现中相邻出现的、内容中指定的颜色对进行评估。作者不需要考虑不寻常的呈现,例如用户代理所做的颜色更改,除非是由作者的代码引起的。
- 图像文字
为了达到特定的视觉效果而以非文本形式(例如图像)渲染的文本
注意:这不包括作为包含大量其他视觉内容的图片一部分的文本。
示例:照片中姓名牌上的人名。
- 大尺寸(文本)
至少 18 点或 14 点粗体,或可为中日韩 (CJK) 字体产生同等大小的字体大小
注意 1:笔画非常细或具有降低字母形式熟悉度的不寻常特征和特性的字体更难阅读,尤其是在较低对比度级别下。
注意 2:字体大小是交付内容时的大小。它不包括用户可能做的调整大小。
注意 3:用户看到的字符实际大小取决于作者定义的大小和用户的显示器或用户代理设置。对于许多主流正文文本字体,14 点和 18 点大致相当于 1.2 和 1.5 em,或默认正文文本大小的 120% 或 150%(假设正文字体为 100%),但作者需要针对所使用的特定字体进行检查。当以相对单位定义字体时,实际点数大小由用户代理计算以进行显示。评估此符合性准则时,应从用户代理获取点数大小,或根据用户代理的方式计算基于字体指标的点数。低视力用户将负责选择合适的设置。
注意 4:当使用文本而不指定字体大小时,各大浏览器上用于未指定文本的最小字体大小是合理的假设大小。如果 1 级标题在各大浏览器上以 14pt 粗体或更高渲染,那么合理假设它是大文本。相对缩放可以以类似方式从默认大小计算。
注意 5:罗马文本的 18 点和 14 点大小取自大字印刷的最小大小(14pt)和较大的标准字体大小(18pt)。对于其他字体,如 CJK 语言,“等效”大小将是用于这些语言的最小大字印刷大小和下一个较大的标准大字印刷大小。
- 纯装饰
仅服务于审美目的,不提供任何信息,也没有任何功能。
注:只有当单词可以在不改变其目的的情况下重新排列或替换时,文本才是纯装饰性的。
示例:字典的封面背景中有浅色的随机单词。
- 文字
- 用户界面组件
被用户感知为单个控件以实现不同功能的内容的一部分
注意 1:多个用户界面组件可以实现为一个编程元素。此处的组件不与编程技术绑定,而是与用户感知到的独立控件绑定。
注意 2:用户界面组件包括表单元素和链接,以及脚本生成的组件。
示例:小程序有一个“控件”,可用于逐行或逐页浏览内容或进行随机访问。由于每个都需要有一个名称并且可以独立设置,因此它们中的每一个都是“用户界面组件”。