I发过的第一个无障碍bug是白卡上的浅灰色时间戳,在Figma中看起来很优雅,在我的校准显示器上看起来很好,并且在停放的汽车中,客户在手机上阅读电子邮件时完全看不到他n't视力受损,它只是阳光,那张单人支持票教会了我设计模型永远无法做到的东西:对比度不是品味问题,它是可测量的属性,如果你不't测量它,你就是发货猜测。
从那时起我就建造了 颜色对比检查器 toolz。dev上,有线对比规则进入wp Adminify的设计令牌,审核了比我愿意计数的更多的React组件,本指南是我希望有人在开始时递给我的那种体验的版本,它解释了对比度实际上是什么,数字是如何计算的,是什么 世界海关总署 阈值意味着,以及如何在不丢弃品牌调色板的情况下修复失败的颜色对。
TL;博士: WCAG对比度是根据两种颜色的相对亮度从1:1到21:1的比例,对于正常的正文,至少需要4.5:1才能通过AA,7:1才能通过AAA,大文本(大约24px,或18.66px粗体)下降到AA的3:1和AAA的4.5:1。像图标和输入边框这样的非文本UI需要3:1。测量每个文本背景对,将AA视为传递条,让工具建议你在你做空时传递颜色。
为什么颜色对比如此重要?
Contrast 是网页上最常见的单一无障碍故障,年复一年,对排名前百万的主页进行自动审核,发现低对比度的文字是最常见的 WCAG 违规行为,而且是影响最多的人,因为它不仅涉及注册盲人用户,还涉及任何从年龄开始视力下降的人、任何像白内障这样常见病症的人、任何使用廉价显示器的人、任何明亮房间的人,以及太阳照射到屏幕时我们每一个人的问题。
Ye有商业角度,不然我也不打算装,无障碍法现在在很多地区直接引用WCAG,也就是说一个无障碍界面是一个法律曝光,而不仅仅是一个礼貌问题,但是我关心的原因,以及我为它构建一个专用工具的原因,更简单,人们无法阅读的文本是唯一工作失败的文本,一个没有人能使用的华丽界面不是设计成就。
陷阱是我们的眼睛是不可靠的叙述者,我们适应自己的屏幕,我们知道文本应该说什么,所以我们的大脑填充它,我们以理想的条件看设计,对比度消除了所有这些,它给你一个不关心你的显示器或你的期望的数字。
对比度到底是什么?
比(contract ratio)是两种颜色的相对亮度的比较:你的前景(通常是文字)和背景 相对亮度是衡量颜色发出或反射多少光线的度量,根据人眼实际感知红、绿、蓝对感知亮度的贡献最大,蓝色最少,这就是为什么黑色上的纯蓝色文字比纯绿色更难阅读的原因。
WCAG将比率本身定义为:
(L1 + 0.05) / (L2 + 0.05)
哪里 L1 是较浅颜色的相对亮度 L2 是较暗的。 0.05 terms模型环境光从屏幕反射,这就是为什么比例从来没有完全达到无穷大,相同的颜色产生正好1:1的比例,纯白色的纯黑文本给出最大21:1。一切现实生活之间的这两个极端。
内化重要的是,这个比例与"不同"两种颜色在色调意义上的外观不是线性的。两种颜色在色调上可能截然不同--比如饱和红色和饱和绿色--并且仍然具有几乎相同的亮度,这使得它们即使发生激烈冲突,也成为可读性的噩梦。对比度是关于亮度差异,而不是色差。这正是你无法观察它的原因,也是为什么 颜色对比检查器 在进行任何比较之前,将两种颜色转换为亮度。
实际计算的数字是如何计算的?
如果您想了解该工具而不仅仅是信任它,这里是完整的管道,它完全遵循 WCAG 2.2 定义。
首先,每个颜色通道从 0 cai255 范围归一化到 0 cai1。然后每个通道线性化以撤消 sRGB 伽马曲线。该公式对非常暗的值应用一个小线性段,其余值应用一条幂曲线:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
接下来,将三个线性化通道与反映人类感知的亮度系数相结合:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
那些重量不是任意的,它们来自眼睛's锥细胞对不同波长的反应方式,它们就是绿色占主导地位的原因,最后将两个亮度值插入上面的比率公式中,上面是较轻的。
1个微妙之处绊倒人,是透明,对比度只在2种不透明颜色之间有意义,因为半透明的颜色's真实的外观取决于它身后坐落的什么,如果你的文字颜色有alpha值,你就无法直接测量正确的方法,而工具所采用的方法,就是先使用标准的source-over混合将半透明前景合成在背景之上,然后根据平坦的结果测量比率,这符合用户实际看到的而不是你名义上设置的颜色。
我需要达到哪些 WCAG 阈值?
WCAG在两个一致性级别和针对三大内容类型定义对比度要求,这里是一处全貌。
| 内容类型 | 最低 AA | 最低 AAA |
|---|---|---|
| 正常文本(约 24px 下) | 4.5:1 | 7:1 |
| 大文本(~24px,或 ~18.66px 粗体) | 3:1 | 4.5:1 |
| UI组件和图形 | 3:1 | 3:1(没有单独的AAA) |
| 徽标和附带文本 | 豁免 | 豁免 |
应用此表多次的几个注意事项。 "大文本"是由渲染的大小定义的,而不是由文本的感觉有多重要。阈值为常规权重 18pt 和粗体 14pt,翻译为大约 24px 和 18.66px。任何等于或高于 AA 的值都会得到宽松的 3:1 小节,因为较大的字母形式在较低的对比度下仍然清晰可辨。
UI-components规则是成功标准1.4。11,也是团队最常忘记的一个,它说的是交互组件的视觉边界- 文本输入的边界,按钮的轮廓,传达意义的图标的形状- 需要3:1对抗周围的,充满AA传递标签文本的形状,无形的输入边界仍然失败,我在生产中不止一次确切地看到了这一点。
最后,装饰文字、禁用控件和徽标是豁免的。那个豁免很窄。一个灰色的按钮标签就可以了;你称之为 "secondary" 的低对比度段落不是。
如何使用色彩对比度检查器?
我每天使用的工作流程大约每对需要十秒钟。打开 颜色对比检查器 并在第一个字段中输入您的文本颜色。您可以粘贴任何格式 - 六位十六进制 #4b5563、八位六角形与α、an rgb() 或 rgba() 字符串,an hsl() value,或者像这样的普通 CSS 关键字 navy。 该工具可以标准化您给出的任何内容,因此您可以在两个字段之间自由混合格式。
在第二个字段中输入您的背景颜色。两者都有效的时刻,精确的比例与在您的实际背景上渲染的大、正常和标题文本的实时样本一起出现。那个预览很重要。数字告诉您它是否通过,但在真实颜色上看到真实的单词会告诉您它是否舒适,这比仅仅合法更高。
比率以下,您将获得一个通过和失败徽章网格:正常和大文本均为 AA 和 AAA,加上 3:1 UI 组件检查。如果组合失败,该工具将提供一键修复。它在 HSL 空间中使您的文本颜色更浅或更深 - 保留您选择的色调和饱和度 - 直到它清除目标比率,然后将一个通过值交给您,您可以直接复制到您的样式表中。最后一部分是责骂您的检查器和实际有帮助的检查器之间的区别:它保持您的品牌色调完整,并且仅将亮度移动所需的最小值。
Everything 在浏览器中本地运行。没有颜色、调色板或未发布的品牌价值离开您的设备,这在您审核客户时很重要's 预启动设计系统。这是我在网站上每个工具上使用的相同的隐私优先方法,我写了为什么那个架构在 数据隐私指南。
实际项目的常见用例
审计设计系统's代币
1个新项目设置颜色令牌时,我在单个组件发货之前检查每个语义配对:背景上的主文本、背景上的静音文本、主文本、卡片上的文本、每个警报变体的文本。失败的令牌一旦在使用处失败,因此在令牌级别捕获它比每个组件捕获它便宜得多。我保留一个简单的检查表,并通过检查器运行每对,记录令牌名称旁边的比率。
拯救 " 必须" 的品牌颜色被使用
Marketing 递给你一个品牌蓝色,并说按钮必须使用它,你测试其上的白色文本,得到 3.1:1 - 罚款大文本,失败的正常大小按钮标签,你有三个诚实的选择:稍微深化品牌蓝色,用于交互表面,使用更大或更大胆的标签,所以适用 3:1 阈值,或者切换标签到更深的颜色,如果按钮是浅的工具's 建议功能找到最近的通过阴影,这样你就可以显示营销一个具体的,最小的变化而不是平坦的"no。"
检查占位符和助手文本
Placeholder文本是重复的冒犯者,因为浏览器默认情况下以降低的不透明度渲染它,然后设计人员在上面选择一个已经浅的灰色,记住测试合成结果,而不是标称颜色检查器's alpha合成为您做这件事:在输入背景上输入占位符颜色及其真实的不透明度,并读取真实比例。
验证图标和边框可见性
1.4。11 UI检查,我测试图标或边框颜色与紧邻其后面的任何东西。白卡上的灰色分隔符,彩色头上的V形符号,焦点环对着场 - 所有这些都需要3:1。它是一个快速检查,抓住"技术上一切都在那里但我可以't看到任何一个"类错误。
与仅使用设计工具相比,这与仅使用设计工具相比如何's 内置检查?
Design工具增加了对比度指标,浏览器dev工具在颜色选择器中显示了一个比例,所以一个公平的问题是为什么要达到专用工具,以下是我诚实的比较。
| 方法 | 力量 | 限制 |
|---|---|---|
| 专用对比度检查器 | 精确比率、所有阈值、α 合成、传递颜色建议,适用于任何颜色字符串 | 您手动粘贴颜色 |
| 设计工具插件 | 与您的画板对齐 | 通常近似值可能会忽略与该应用程序相关的 alpha |
| 浏览器开发工具 | 检查实时渲染页面 | 一次一对,没有建议,需要页面首先存在 |
| 眼球攻击它 | 快 | 错了,不断 |
值(而不是渲染页面)工作时,专用工具会获胜 - 查看令牌,检查规范或修复报告的错误 - 每当您需要一个传递替代方案而不仅仅是判决时,浏览器开发工具更好,一旦页面存在,您想要发现 - 检查实际发货的内容。我使用两者,在不同的阶段。
为关心团队提供高级笔记
1点学到的东西,超出了基础,一是对比是必要的,但还不够,通过4.5:1去掉一个屏障;它没有让界面自己访问,你还需要可见的焦点状态,你仍然必须避免仅通过颜色传达意义,你仍然需要用真正的辅助技术进行真正的测试,把比例当作地板,而不是终点线。
Er,暗模式不是免费的,在亮模式下通过的调色板在暗模式下会失效,因为亮度关系反转,检查两个主题,检查器's暗背景预览切换的存在正是因为我一直忘记。
第三,警惕"足够接近。" 4.48:1的比例是失败,而不是四舍五入的胜利,屏幕各不相同,用户各不相同,门槛内置保证金是有原因的,如果是边界线,就推过去。
如果您正在组装更广泛的工具包, web开发人员工具包指南 涵盖对比度如何与其他值得自动化的支票一起。一旦您的颜色通过,诸如此类的工具 梯度发生器 並 颜色选择器 帮助您在已经验证的基础上构建调色板的其余部分。如果您还在生成页面元数据和社交预览,则 元标记生成器 在同一发射前通行证中配对。
常问问题
什么是好的颜色对比度？
4.5:1 至少要满足 WCAG AA,7:1 才能满足更严格的 AAA 级别,大文本,意思是大约 24px 或 18.66px 粗体,AAA 只需要 3:1,AAA 只需要 4.5:1,图标和交互式 UI 组件至少需要 3:1 才能抵御周围环境。
WCAG下的大文本算什么？
18pt,大约24px的大文本,对于常规权重,或至少14pt,大约18.66px,当粗体。该大小或以上的文本符合放宽的3:1 AA阈值,因为较大的字母形式在较低的对比度下保持清晰度比小的。
WCAG AA 和 AAA 有什么区别？
AA是大多数法律和组织所针对的级别,对正常文本要求4.5:1。AAA是增强级别,要求7:1,适合针对视力低下但很难打到整个调色板的用户的内容。大多数团队将AA视为通行证,将AAA视为批判性阅读内容的愿望。
对比度是如何计算的？
每种颜色都转换为其 WCAG 相对亮度,这是一种伽马校正且感知加权的亮度度量。该比率是(L_lighter + 0.05)除以(L_darker + 0.05),产生的值从相同颜色的 1:1 到纯白色的纯黑色的 21:1。
透明度会影响对比度结果吗？
是。半透明的文本颜色让背景显示出来,这改变了其有效颜色。正确的方法是先将半透明的前景合成在背景上,然后测量比率,因此分数反映了用户实际看到的而不是您设置的标称颜色。
为什么我的文本在大尺寸时通过但在正常大小时失败？
阈值不同。普通文本的 AA 需要 4.5:1,而大文本只需要 3:1,因此标题的 3 到 4.5 之间的比率通过,但正文复制失败。要么提高正文的对比度,要么确保仅在适用放宽阈值的大尺寸下使用配对。
一个通过的对比度是否足以提供可访问性？
号对比是必要的,但还不够,你还需要可见的焦点状态,你必须避免仅通过颜色来传达意义,你应该用真实的内容和辅助技术来测试,通过该比率可以消除一个共同的障碍,但本身并不能使界面可访问。
颜色对比检查器是否将我的颜色发送到任何地方？
No。JavaScript 在浏览器本地运行的所有解析和数学。没有上传或存储颜色值、品牌调色板或屏幕截图,并且一旦页面加载,该工具将继续工作,无需网络连接。
