让您的网站更易于阅读

Sofia Emelianova

GitHub

要点：对比度低的文本是网络上最常见的无障碍功能问题。2022 年 2 月，排名前 100 万的首页中有 83.9% 存在此问题。请参阅 2022 年 WebAIM 百万报告了解详情。

低对比度文本会降低所有用户对您网站的可读性，对于有视觉障碍的用户而言更是如此。开发者工具可以自动发现对比度较低的问题，并建议更好的颜色来帮助您解决这些问题。

使用开发者工具执行以下操作：

• 探索对比度问题。使用 CSS Overview 面板、（预览）Issues 标签页或 Lighthouse 报告可获取所有问题的列表。
• 修复对比度问题。在检查器模式下使用提示查看问题，并选择颜色选择器建议用于修正对比度的颜色。
• 模拟视觉缺陷。从用户的角度审视您的网站。

探索低对比度文字

如需发现低对比度文字，请按以下步骤操作：

1. 在您的页面上打开开发者工具。在本教程中，您可以使用此演示页面。

2. 使用以下三个面板之一获取所有对比度问题的列表：

   • CSS 概览
   • （预览版）问题
   • Lighthouse

“CSS 概览”面板中的对比度问题

若要查看概览，请执行以下操作：

1. 打开 CSS 概览。
2. 截取概览。
3. 打开颜色部分，滚动到对比度问题，然后点击一个问题（如果有）。

4. 在对比度问题表格中，将鼠标悬停在某个元素上，然后点击该元素旁边的链接。

   

5. 请按照解决低对比度文字部分中的说明修正问题。

（预览版）“问题”标签页中的对比度问题

注意：默认情况下，此预览功能处于停用状态。

如需获取问题列表，请执行以下操作：

1. 在问题标签页中启用对比度问题报告功能：
   1. 依次打开设置 > 实验性。
   2. 在过滤条件栏中，搜索 contrast issue。
   3. 勾选通过“问题”面板启用自动对比度问题报告功能。
   4. 点击顶部提示中的重新加载开发者工具。
2. 打开“问题”标签页。

3. 展开开发者工具发现的对比度问题，然后展开元素表格，并点击元素旁边的链接。

   

4. 请按照解决低对比度文字部分中的说明修正问题。

Lighthouse 报告中的对比度问题

要生成报告，请执行以下操作：

1. 在开发者工具中，打开 更多标签页 > Lighthouse。
2. 使用以下设置生成 Lighthouse 报告：
   • 模式：导航（默认）
   • 类别：无障碍
   • 设备：桌面设备
3. 点击分析网页加载情况，然后等待 Lighthouse 生成报告。
4. 向下滚动到对比度部分，然后在元素列表中点击指向受影响元素的链接。
5. 请按照解决低对比度文字部分中的说明修正问题。

修正低对比度文字

如需解决低对比度问题，请执行以下操作：

1. 查找对比度问题，然后在 CSS 概览面板、问题标签页或 Lighthouse 报告上点击指向受影响元素的链接。开发者工具会带您前往 Elements 面板，并选择相应的元素。 例如，在此演示页面上，第一个受影响的元素是 h1.line1。

2. 点击开发者工具右上角的 Inspect，然后将光标悬停在视口中的相应元素上。开发者工具会显示此元素的提示。

   

   请注意提示中对比度值旁边的 警告符号。对比度用于衡量前景（文字颜色）和背景颜色之间的亮度差异。

3. 打开元素文本的颜色声明旁边的颜色选择器，然后在颜色选择器中展开对比度部分。

   

   颜色选择器显示对比度不符合 WebAIM 指南的 AA 或 AAA 级别要求。

4. 点击 AAA 级别旁边的 Use recommended color（使用建议的颜色）按钮。颜色选择器会应用符合对比度指南要求的文本颜色。

   

5. 或者，您也可以手动选择颜色，也可以在阴影预览中拖动圆圈。若要保持在 AA 或 AAA 级别，请分别选择顶部线或底部线下方的颜色。

   

6. 同样，您可以通过 CSS Overview 面板、Issues 标签页或 Lighthouse 报告修正发现的所有对比度问题。

保存更改

如需保存您在开发者工具中所做的更改，请执行以下操作：

• 一次性复制所有 CSS 更改并将其粘贴到您的代码中
• 考虑设置工作区，让开发者工具能够直接将文件保存到来源。

后续操作

拓展阅读：

• 大致了解无障碍功能
• 颜色和对比度的无障碍功能（尤其是）