LogoLogo
中文
中文
  • 欢迎
  • 关于
    • 关于本项目
    • 收录范围
  • 技术架构
    • 概览
    • Crawler 模块介绍
    • 数据库结构
      • 歌曲类型
      • snapshot_schedule 表
    • 机器学习
  • API 文档
    • 目录
    • 视频快照
  • 参考
    • 颜色系统
    • 关于 APCA
  • 开发指南
    • 版本控制
由 GitBook 提供支持

如无特别声明,内容基于 CC BY 4.0 许可。

在本页
  • 简介
  • APCA 与 WCAG 2.x
  • APCA 速查表

这有帮助吗?

在GitHub上编辑
  1. 参考

关于 APCA

上一页颜色系统下一页版本控制

最后更新于1个月前

这有帮助吗?

简介

APCA (Advanced Perceptual Contrast Algorithm, 先进感知对比算法) 是一种基于颜色感知的现代研究成果来计算对比度的方法,其计算结果以 Lc (Lightness contrast) 为单位,取值从-107.88至106.04。其中正数代表前景色比背景色更深,反之同理。数值的绝对值越大,代表前景色与背景色在人眼中的对比越明显。

APCA 与 WCAG 2.x

WCAG 2.0 (Web Content Accessibility Guidelines 2.0) 及其后续版本(如 2.1 和 2.2)中,关于文本和前景色的对比度要求是基于一种相对亮度(Relative Luminance)计算方法,得出一个对比度比例(contrast ratio),取值范围从 1:1 到 21:1。

WCAG 2.x 中关于对比度等级和要求的具体规定如下:

  • Level AA: 被广泛接受和推荐的无障碍级别

    • 正常文本: 正常文本和背景之间的对比度比例至少为 4.5:1。

    • 大型文本: 大型文本和背景之间的对比度比例至少为 3:1。

  • Level AAA: 最高级别的可访问性要求

    • 正常文本: 正常文本和背景之间的对比度比例至少为 7:1。

    • 大型文本: 大型文本和背景之间的对比度比例至少为 4.5:1。

“大型文本” 在 WCAG 2.x 中被定义为至少 18 磅(约 24 CSS 像素),或者至少 14 磅(约 19 CSS 像素)且为粗体。

然而,WCAG 2.x 的对比度算法存在一些已知局限性。它并没有完全模拟人类对颜色的感知方式,尤其是在处理深色背景上的浅色文本、或在色彩饱和度较高的颜色组合时,其计算结果可能与人眼的实际感知存在差异。

参考内容:

APCA 正是为了解决 WCAG 2.x 对比度算法的这些局限性而提出的。它基于更现代的颜色感知模型,考虑了人眼对不同亮度、颜色和空间频率的敏感度差异。

APCA 速查表

与 WCAG 2.x 定义 AA、AAA 等级不同,APCA 给出了一个速查表,通过文字大小和字重的组合确定所需的最低对比度。

字号\字重
100
200
300
400
500
600
700
800
900

12px

—

—

—

—

—

—

—

—

—

14px

—

—

—

100

100

90

75

—

—

15px

—

—

—

100

90

75

70

—

—

16px

—

—

—

90

75

70

60

60

—

18px

—

—

100

75

70

60

55

55

55

21px

—

—

90

70

60

55

50

50

50

24px

—

—

75

60

55

50

45

45

45

28px

—

100

70

55

50

45

43

43

43

32px

—

90

65

50

45

43

40

40

40

36px

—

75

60

45

43

40

38

38

38

42px

100

70

55

43

40

38

35

35

35

48px

90

60

50

40

38

35

33

33

33

60px

75

55

45

38

35

33

30

30

30

72px

60

50

40

35

33

30

30

30

30

96px

50

45

35

33

30

30

30

30

30

Orange You Accessible? A Mini Case Study on Color Ratio
APCA Introduction - GitHub
此图用以展示 WCAG 2.x 在两个经典案例中相比于 APCA 的缺陷。“橙色按钮”案例中,WCAG 2.x 指出更难阅读的黑色文本满足了 AAA 等级的要求;而在“深色模式”案例中,则让实际对比度很低的文字通过了 AAA 等级的检查。
此图用以展示 WCAG 2.x 在两个经典案例中相比于 APCA 的缺陷。“橙色按钮”案例中,WCAG 2.x 指出更难阅读的黑色文本满足了 AAA 等级的要求;而在“深色模式”案例中,则让实际对比度很低的文字通过了 AAA 等级的检查。