低对比度文本会降低所有用户对您网站的可读性,对于有视觉障碍的用户而言更是如此。开发者工具可以自动发现对比度较低的问题,并建议更好的颜色来帮助您解决这些问题。
使用开发者工具执行以下操作:
- 探索对比度问题。使用 CSS Overview 面板、(预览)Issues 标签页或 Lighthouse 报告可获取所有问题的列表。
- 修复对比度问题。在检查器模式下使用提示查看问题,并选择颜色选择器建议用于修正对比度的颜色。
- 模拟视觉缺陷。从用户的角度审视您的网站。
探索低对比度文字
如需发现低对比度文字,请按以下步骤操作:
“CSS 概览”面板中的对比度问题
若要查看概览,请执行以下操作:
- 打开 CSS 概览。
- 截取概览。
- 打开颜色部分,滚动到对比度问题,然后点击一个问题(如果有)。
在对比度问题表格中,将鼠标悬停在某个元素上,然后点击该元素旁边的链接。
请按照解决低对比度文字部分中的说明修正问题。
(预览版)“问题”标签页中的对比度问题
如需获取问题列表,请执行以下操作:
- 在问题标签页中启用对比度问题报告功能:
- 依次打开设置 > 实验性。
- 在过滤条件栏中,搜索
contrast issue
。 - 勾选通过“问题”面板启用自动对比度问题报告功能。
- 点击顶部提示中的重新加载开发者工具。
- 打开“问题”标签页。
展开开发者工具发现的对比度问题,然后展开元素表格,并点击元素旁边的链接。
请按照解决低对比度文字部分中的说明修正问题。
Lighthouse 报告中的对比度问题
要生成报告,请执行以下操作:
- 在开发者工具中,打开 更多标签页 > Lighthouse。
- 使用以下设置生成 Lighthouse 报告:
- 模式:导航(默认)
- 类别:无障碍
- 设备:桌面设备
- 点击分析网页加载情况,然后等待 Lighthouse 生成报告。
- 向下滚动到对比度部分,然后在元素列表中点击指向受影响元素的链接。
- 请按照解决低对比度文字部分中的说明修正问题。
修正低对比度文字
如需解决低对比度问题,请执行以下操作:
- 查找对比度问题,然后在 CSS 概览面板、问题标签页或 Lighthouse 报告上点击指向受影响元素的链接。开发者工具会带您前往 Elements 面板,并选择相应的元素。
例如,在此演示页面上,第一个受影响的元素是
h1.line1
。 点击开发者工具右上角的 Inspect,然后将光标悬停在视口中的相应元素上。开发者工具会显示此元素的提示。
请注意提示中对比度值旁边的 警告符号。对比度用于衡量前景(文字颜色)和背景颜色之间的亮度差异。
打开元素文本的颜色声明旁边的颜色选择器,然后在颜色选择器中展开对比度部分。
颜色选择器显示对比度不符合 WebAIM 指南的 AA 或 AAA 级别要求。
点击 AAA 级别旁边的 Use recommended color(使用建议的颜色)按钮。颜色选择器会应用符合对比度指南要求的文本颜色。
或者,您也可以手动选择颜色,也可以在阴影预览中拖动圆圈。若要保持在 AA 或 AAA 级别,请分别选择顶部线或底部线下方的颜色。
同样,您可以通过 CSS Overview 面板、Issues 标签页或 Lighthouse 报告修正发现的所有对比度问题。
保存更改
如需保存您在开发者工具中所做的更改,请执行以下操作:
- 一次性复制所有 CSS 更改并将其粘贴到您的代码中
- 考虑设置工作区,让开发者工具能够直接将文件保存到来源。
后续操作
拓展阅读: