视觉可读性计算器 WCAG 和 APCA

使用 APCA (WCAG 3.0) 检查设计的真实对比度。分析字体粗细和大小如何影响实际可读性。

基础色
#1E293B
#FFFFFF
排版
16px
400
对比度比较
WCAG 2.1 比率 21.00 通过 AAA
APCA Lc (WCAG 3) 100 优秀
感知预览

视觉可读性不仅仅是数学。它是光线和阴影如何与您的眼睛相互作用。

APCA 建议
阅读文本(正文)
小文本/标题
UI / 按钮
工具工作室

想把这个工具添加到你的网站吗?

为 WordPress、Notion 或你自己的网站自定义配色和深色模式。

常见问题

APCA 是什么,为什么与 WCAG 2.1 不同?

APCA 是为 WCAG 3.0 开发的高级感知对比算法。与旧的简单公式不同,APCA 使用数学模型来模拟人类大脑如何感知对比度。

Lc 值代表什么?

Lc(亮度对比)是 APCA 生成的对比度值。值 100 代表理想的最大对比度,而低于 60 的值对于连续阅读文本开始变得至关重要。

字体粗细如何影响可读性?

细/轻字体需要更高的对比度才能可读。APCA 惩罚低粗细字体,表明通过 WCAG 的使用 weight-100 字体的设计在实践中可能无法阅读。

这个计算器是私密的吗?

是的,所有计算都在浏览器中本地执行。您分析的颜色和设置永远不会发送到任何服务器,确保您的设计项目的完全隐私。

# 视觉可读性计算器 (WCAG vs APCA)

了解您的颜色和排版如何使用新的感知可访问性标准影响实际阅读。WCAG 2.1 使用简单的 2008 年数学公式。APCA 是为 WCAG 3.0 提议的模拟人类感知的新模型。

# APCA 的关键要点

  • 极性:理解深色模式的感知方式与浅色模式不同。
  • 字体粗细:根据排版粗细分配特定对比等级 (Lc)。
  • 线性:修复 2008 年相对亮度模型中的数学不准确性。

# 建议的 APCA 级别

  • Lc 90+:非常小或低粗细文本的理想选择。
  • Lc 75:主要正文阅读文本的标准。
  • Lc 60:可读中等大小内容的最小值。
  • Lc 45:大型或装饰元素的最小值。

参考文献