让您的网站更易于阅读

Sofia Emelianova

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

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

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

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

发现低对比度文字

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

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

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

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

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

如需查看概览，请按以下步骤操作：

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

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

   

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

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

注意：这是一项默认停用的预览功能。

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

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

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

   

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

Lighthouse 报告中的对比度问题

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

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

解决文字对比度较低的问题

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

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

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

   

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

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

   

   颜色选择器会告诉您对比度不符合 WebAIM 准则的 AA 或 AAA 级别。

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

   

5. 或者，若要手动选择颜色，您可以在色调预览中拖动圆圈。为了不超出 AA 或 AAA 级别，请分别选择顶部线或底线以下的颜色。

   

6. 同样，修复您在 CSS Overview 面板、Issues标签页或 Lighthouse 报告中找到的所有对比度问题。

保存更改

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

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

后续操作

了解详情：

• 从总体上了解无障碍功能
• 关于颜色和对比度的无障碍功能（尤其是无障碍功能）