开发者工具提示：探索和修正低对比度文本

Sofia Emelianova
Sofia Emelianova
GitHub

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

借助 Chrome 开发者工具，您可以一目了然地发现所有对比度问题，并且只需点击一下按钮即可修复问题。

观看视频，了解如何：

  • 您可以在检查器模式的提示中查看对比度，并在颜色选择器中查看建议的比率值。

    提示中提供了对比度，并使用颜色选择器测量替代颜色的比率。可以使用 AA 和 AAA 级分级。

  • 在颜色选择器中，选择建议的颜色或选择对比度线以下的颜色，以符合 WebAIM 指南。

    颜色选择器的色调预览中会显示建议的对比度线条。

  • 在 CSS Overview（预览）和（预览）Issues（问题）面板中查找所有对比度问题。

    对比“CSS 概览”面板和“问题”标签页中列出的问题。

  • 模拟视觉缺陷，了解您的网页向所有用户显示时的外观。

    在“渲染”标签页中选择了“视力模糊”，并在视口中进行模拟。

如需获得更多实操学习体验，请参阅让您的网站更易于阅读教程。

如需了解详情，请参阅：