让您的网站更易于阅读

Sofia Emelianova

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

低对比度文本会降低网站对所有用户的可读性，对于有视力障碍的用户来说更是如此。开发者工具可以自动查找低对比度问题，并建议更好的颜色来帮助您修复这些问题。

使用开发者工具可以：

• 发现对比度问题。使用 CSS 概览 面板、（预览版）问题 标签页或 Lighthouse 报告获取所有问题的列表。
• 修复对比度问题。在检查器模式下查看带有工具提示的问题，然后选择颜色选择器 建议的颜色来修复对比度。
• 模拟视力障碍。以用户的方式查看您的网站。

发现低对比度文本

如需发现低对比度文本，请执行以下操作：

1. 在您的网页上打开开发者工具。

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

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

您可以打开我们的 CodePen 进行实验。

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

如需获取概览，请执行以下操作：

1. 打开 CSS 概览。
2. 捕获概览。
3. 打开颜色部分，前往对比度问题，然后点击问题（如果有）。

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

   

5. 按照修复低对比度文本部分中的说明修复问题。

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

注意： 这是一项预览版功能，默认处于停用状态。

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

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

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

   

4. 按照修复低对比度文本部分中的说明修复问题。

Lighthouse 报告中的对比度问题

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

1. 在开发者工具中，依次打开 更多标签页 > Lighthouse。

2. 使用以下设置生成 Lighthouse 报告：

   • 模式：导航（默认）
   • 类别：无障碍功能
   • 设备：桌面设备

   

3. 点击 Analyze page load （分析网页加载），然后等待 Lighthouse 生成报告。

4. 前往对比度 部分。在元素列表中，点击受影响元素的链接。

   

5. 按照修复低对比度文本部分中的说明修复问题。

修复低对比度文本

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

1. 找到对比度问题，然后在 CSS 概览面板、 问题标签页或 Lighthouse报告中点击受 影响元素的链接。开发者工具会转到元素 面板，并选择相应的元素。

   

   例如，在我们的无法访问的演示 CodePen中，第一个受影响的 元素是h1.line1。

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

   

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

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

   

   颜色选择器 会告知您对比度不符合 WebAIM 指南的 AA 或 AAA 级别。

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

   

5. 或者，如需手动选择颜色，您可以拖动色调预览中的圆圈。如需保持在 AA 或 AAA 级别内，请分别选择顶部或底部线条下方的颜色。

   

6. 同样，使用 CSS 概览 面板、问题 标签页或 Lighthouse 报告修复您发现的所有对比度问题。

保存更改

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

• 一次性复制所有 CSS 更改，然后 将其粘贴到您的代码中
• 设置工作区，以允许开发者工具将 文件直接保存到您的源代码中。

接下来怎么做？

了解详情：

• 了解无障碍功能的一般信息
• 颜色和对比度 无障碍功能的具体信息