了解WCAG 2.0

跳到内容(按Enter)

-

对比度(最小值):
理解联合国安全理事会1.4.3

1.4.3对比度(最小): 的视觉呈现文本文本的图像有一个对比度至少4.5:1,以下情况除外:(AA级)

  • 大文本: 大型文本和大规模文本的图像具有至少3:1的对比度;

  • 附带的:非活动文本的一部分文本或图像用户界面组件,这是纯装饰对于任何人都看不到的,或者是包含其他重要视觉内容的图片的一部分,没有对比度要求。

  • 标志类型:标志或品牌名称中的文字没有最低对比度要求。

本成功标准的目的

此成功标准的目的是在文本和背景之间提供足够的对比度,以便中度视力低下的人(不使用对比增强辅助技术的人)可以阅读。根据阅读表现评估,对于没有颜色缺陷的人来说,色调和饱和度对易读性的影响很小或没有影响(Knoblauch等人,1991)。颜色缺陷会在一定程度上影响亮度对比度。因此,在建议中,对比度的计算方式是,颜色不是一个关键因素,因此色觉缺陷的人也会在文本和背景之间有足够的对比度。

不包括装饰性文字和不传达信息的文字。例如,如果使用随机单词来创建背景,并且可以在不改变含义的情况下重新排列或替换单词,那么它将是装饰性的,不需要满足此标准。

较大且具有较宽笔划的文本在对比度较低时更容易阅读。因此,较大文本的对比度要求较低。这允许作者为大文本使用更广泛的颜色选择,这有助于页面设计,尤其是标题。18点文本或14点粗体文本被判断为足够大,需要更低的对比度。(参见美国印刷厂大型印刷盲目指南和国会图书馆大型印刷指南资源). “18点”和“粗体”在不同的字体中有不同的含义,但除了非常薄或不寻常的字体外,它们应该足够了。由于有这么多不同的字体,所以使用了一般的度量方法,并包含了关于花式或薄型字体的注释。

注1:评估此成功标准时,应从用户代理处获取字体大小(以磅为单位),或按照用户代理的方式根据字体度量进行计算。磅大小基于中定义的CSS磅大小CSS3值。以点为单位的大小与CSS像素之间的比率为1pt=1.333px,因此14pt和18pt约等于18.5px和24px。

注2:因为不同的图像编辑应用程序默认使用不同的像素密度(例如72 PPI或96 PPI),在图像编辑应用程序中为字体指定点大小,在以特定大小显示文本时可能不可靠。当创建大规模文本的图像时,作者应确保结果图像中的文本大致相当于1.2和1.5 em,或者相当于正文文本默认大小的120%或150%。例如,对于72 PPI图像,作者需要使用大约19磅和24磅的字体大小,才能成功地向用户呈现大规模文本的图像。

上文提到的文本对比度要求也适用于成功标准1.4.3中所述的文本图像(已渲染为像素并以图像格式存储的文本)。

这一要求适用于文本图像被理解为文本的情况。不包括附带文字,例如照片中碰巧包含路标的文字。文本也不是因为某种原因被设计成对所有观众都不可见的。风格化的文本,如公司徽标中的文本,应根据其在页面上的功能来处理,这可能保证也可能不保证将内容包含在文本备选方案中。除标识和标识外,公司视觉指南不包括在例外情况中。

在这项规定中,有一个例外,即“是包含其他重要视觉内容的图片的一部分”。此例外旨在将包含文本的图片与替换文本以获得特定外观的文本图像分开。

注:文本图像的缩放效果不如文本,因为它们倾向于像素化。更改文本图像的前景和背景对比度以及颜色组合也比较困难,这对某些用户来说是必要的。因此,我们建议尽可能使用文本,如果没有,则考虑提供更高分辨率的图像。

最小对比度成功标准(1.4.3)适用于页面中的文本,包括占位符文本和指针悬停在对象上或对象具有键盘焦点时显示的文本。如果页面中使用了其中任何一个,文本需要提供足够的对比度。

尽管此成功标准仅适用于文本,但在以图表、图表、图表和其他非文本信息形式呈现的内容。以这种方式呈现的内容也应具有良好的对比度,以确保更多用户可以访问信息。

另请参见了解成功标准1.4.6对比度(增强).

所选比率的原理

较大且具有较宽笔划的文本在对比度较低时更容易阅读。因此,较大文本的对比度要求较低。这允许作者为大文本使用更广泛的颜色选择,这有助于页面设计,尤其是标题。18点文本或14点粗体文本被判断为足够大,需要更低的对比度。(参见美国印刷厂大型印刷盲目指南和国会图书馆大型印刷指南资源). “18点”和“粗体”在不同的字体中有不同的含义,但除了非常薄或不寻常的字体外,它们应该足够了。由于有这么多不同的字体,所以使用了一般的度量方法,并包含了关于花式或薄型字体的注释。

注1:评估此成功标准时,应从用户代理处获取字体大小(以磅为单位),或按照用户代理的方式根据字体度量进行计算。磅大小基于中定义的CSS磅大小CSS3值。以点为单位的大小与CSS像素之间的比率为1pt=1.333px,因此14pt和18pt约等于18.5px和24px。

注2:因为不同的图像编辑应用程序默认使用不同的像素密度(例如72 PPI或96 PPI),在图像编辑应用程序中为字体指定点大小,在以特定大小显示文本时可能不可靠。当创建大规模文本的图像时,作者应确保结果图像中的文本大致相当于1.2和1.5 em,或者相当于浏览器呈现的正文文本默认大小的120%或150%。

色觉缺陷(先天性和后天性)用户对色调的感知不同,导致与正常视力用户不同的颜色和相对亮度对比。因此,有效对比度和可读性对于这一人群来说是不同的。然而,由于颜色缺陷的多样性,基于定量数据规定有效的通用颜色对(用于对比)是不可行的。要求良好的亮度对比度通过要求与色觉无关的对比度来满足这一要求。幸运的是,大多数亮度贡献来自中波和长波接收器,它们的光谱响应在很大程度上重叠。结果是,有效亮度对比度通常可以在不考虑特定色差的情况下进行计算,除了使用主要是长波长的颜色来对比那些有眼睑斜视的深色(通常看起来是黑色的)。(为此,我们提供了一种避免红黑相间的建议技术)。有关更多信息,请参阅[阿迪蒂·克诺布拉赫] 【ARDITI-KNOBLAUCH-1996】 [阿迪提].

注:一些认知障碍患者需要低对比度的颜色组合或色调,因此我们允许并鼓励作者提供调整内容前景和背景颜色的机制。可以选择的某些组合的对比度可能低于成功标准中的对比度。如果有一种机制可以返回到成功标准中规定的默认值,则这并不违反此成功标准。

3:1的对比度是【ISO-9241-3】【ANSI-HFES-100-1988】用于标准文本和视觉。在本规定中,4.5:1的比率用于解释因中度低视力、先天性或后天性色觉缺陷或通常伴随年龄增长的对比敏感度丧失而导致的对比度丧失。

其基本原理是基于a)在ANSI标准中,采用3:1的对比度作为正常观察者可接受的最小对比度,以及b)经验发现,在人群中,20/40的视力与大约1.5的对比度灵敏度损失有关[阿迪蒂-费伊]。因此,20/40的用户需要3*1.5=4.5比1的对比度。根据类似的经验发现和相同的逻辑,视力为20/80的用户需要大约7:1的对比度。

AA级选择4.5:1的对比度,因为它补偿了用户通常会经历的对比度灵敏度损失,视力损失相当于大约20/40的视力。(20/40的计算结果约为4.5:1。)20/40通常被报告为大约80岁的老年人的典型视力。【GITTINGS-FOZARD】

AAA级选择7:1的对比度,因为它补偿了用户通常会经历的对比度灵敏度损失,视力损失相当于大约20/80的视力。视力损失超过这个程度的人通常使用辅助技术来访问他们的内容(辅助技术通常具有增强对比度的功能,以及内置的放大功能)。因此,7:1水平通常可以补偿不使用辅助技术的低视力用户所经历的对比敏感度损失,并为色差提供对比度增强。

注:中的计算【ISO-9241-3】【ANSI-HFES-100-1988】用于正文。对于大得多的文本,提供了宽松的对比度。

公式注释

根据IEC/4WD 61966-2-1将非线性RGB值转换为线性RGB值[IEC-4WD]以及“互联网的标准默认颜色空间-sRGB”[sRGB].

对比度公式(L1/L2)基于【ISO-9241-3】【ANSI-HFES-100-1988】标准。

ANSI/HFS 100-1988标准要求在计算L1和L2时考虑环境光的影响。使用的.05值基于来自[IEC-4WD][sRGB]M.Stokes等人的论文。

此成功标准及其定义使用术语“对比度”和“相对亮度”而不是“亮度”来反映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的附加技术(咨询)

尽管一致性不是必需的,但为了使内容更容易访问,应考虑以下附加技术。并不是所有的技术都可以在所有情况下使用或有效。

  • G156:使用具有通用用户代理的技术,可以更改文本块的前景和背景

  • 对图案背景上的文本使用更高的对比度值(未来链接)

  • 使用Unicode文本和样式表而不是文本图像(未来链接)

  • 对图表中的线条使用更高的对比度值(未来链接)

  • 对红-黑文本/背景组合使用更高的对比度(未来链接)

  • 使用主要由中光谱成分组成的颜色表示光线,使用光谱极值(蓝色和红色波长)表示黑暗

  • 在黑色文本后面使用淡粉色背景,而不是白色背景,以创建足够但不极端的对比度(未来链接)

  • 使用符合文本对比规定的简单线条图制作图标(未来链接)

  • 提供足够的对比度在图表中(未来链接)

  • 使用3:1或更高的对比度作为默认演示文稿(未来链接)

  • 为空文本字段提供足够的颜色对比度(未来链接)

关键术语

对比度

(L1+0.05)/(L2+0.0 5),其中

注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:用户界面组件包括表单元素和链接以及脚本生成的组件。

例子:小程序有一个“控件”,可用于按行、按页或随机访问内容。因为每个组件都需要有一个名称并可以独立设置,所以它们都是“用户界面组件”