色彩对比度检查

0:1

对比度

WCAG AA 级 (普通文本)
对比度不足
WCAG AA 级 (大文本)
对比度不足
WCAG AAA 级 (普通文本)
对比度不足

设计需以人为本

色彩对比度是无障碍设计（Accessibility）的重要组成部分。确保您的文本与背景具有足够的对比度，可以帮助视力较弱的用户和在强光环境下使用设备的用户更轻松地阅读内容。WCAG（Web内容无障碍指南）建议普通文本的对比度至少为 4.5:1。

大文本测试示例AaBbCc

这个工具能做什么

选一个文字颜色和一个背景颜色，工具会按 WCAG 的相对亮度公式算出对比度，并告诉你是否达到 AA、AAA 级别。普通文字 AA 要求 4.5:1，大号文字 3:1，AAA 则是 7:1。预览区会用你选的两种颜色排一段文字，读起来费不费劲一眼就知道。

使用步骤

  1. 设置前景色（文字颜色）。
  2. 设置背景色。
  3. 看对比度数值和各级别是否通过，不通过就调深或调浅其中一个颜色。

常见问题

什么算大号文字？

WCAG 里指 18pt（约 24px）以上，或 14pt（约 18.7px）以上的粗体。

做 App 截图的标题也需要看对比度吗？

建议看一下。商店里截图会被缩得很小，对比度低的文字很容易糊成一片。

更多工具见开发者工具箱； 要做应用商店预览图，可以用App Store 截图生成器。