配色用户体验(WCAG - 对比度)

880

参考原文

WCAG 前言

Web内容无障碍指南(WCAG)涵盖范围广泛,涉及了一些建议,这些建议可使网站内容更容易访问。遵循这些原则,web内容更易为广大残疾人士所接受,这些包括盲人和低视患者、聋人和重听人、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。遵循这些原则也可让普通用户更容易访问您的网站。版本为WCAG2.0。

WCAG 原则

它提供了Web无障碍的基础:感知可操作性易于理解稳定性

WCAG 准则

原则之下是准则。提供的 12项准则 是为了达到这样一个基本目标,这个目标是作者应努力以使内容更容易让不同症状的残疾用户能够访问。该准则是不可测试的,但提供了框架和总体目标,以帮助作者了解成功标准和更好地实现该技巧。

WCAG 级别

A(最低)、AA、AAA级(最高)

WCAG2.0包括三个重要术语

  • 网页:需要指出的是,在这个标准中,术语“网页”不仅仅包括静态HTML网页,它还包括网络上越来越多的动态网页,也包括呈现整个虚拟互动社区的“网页”。例如,术语“网页”包括了某单一URI上像电影那样令人身临其境的交互式体验。

  • 编程式确定:几个成功标准要求内容(或某些方面的内容)是“编程式确定的。”这意味着内容可采用这么一个方式来生成,即用户代理(包括辅助技术)可以以不同形式提取和呈现信息给用户。

  • 支持无障碍:以支持无障碍的方式使用技术,是指可与辅助技术(AT)和操作系统的无障碍特性、浏览器和其他用户代理协同工作。如果要以"支持无障碍"的方式使用技术特性,技术特性只能是可靠的,且足以符合WCAG2.0的成功标准。也能以不支持无障碍的方式使用技术特性(比如不使用辅助技术等),只要他们不可靠到不足以符合任何成功标准(比如可以另一种方式支持相同的信息或功能)。

本文重点 - Web配色用户体验

WCAG-感知原则-1.4可辨别性准则

为什么会有对比度标准

  • 原因 在硬件设备制造商繁多的当下,产品设计者其实是无法确保每一个用户在使用你的产品时,所看到的界面和设计师在显示器上看起来的一样完美。

  • 目的 为了满足有视觉障碍用户的视觉体验,但满足该标准后,同样也能帮助普通用户更方便地使用。

颜色对比度无障碍标准

  • 目的 让文本背景之间存在足够的对比度,确保绝大范围视力程度的人群都易于阅读。
    也就是说,符合WCAG该标准的文字或图像,将有足够高的色彩对比度,使之很容易地从背景中被辨识出来。

  • 标准

    • 1.4.3 对比度(最小)准则: 普通文本的视觉呈现与背景至少要有 4.5:1 的对比度,大文本¹与背景至少有 3:1 的对比度。

    • 1.4.6 对比度(加强)准则: 普通文本的视觉呈现与背景至少有 7:1 的对比度,大文本¹与背景至少有 4.5:1 的对比度。

备注:¹大文本:WCAG规定 ≥18pt常规字重 的文本或 ≥14pt字重加粗 的文本为大文本。

颜色对比度如何计算

  • 公式 对比度C = (L1 + 0.05)/(L2 + 0.05)「其中:L指颜色的相对亮度」

相对亮度L = 0.2126 * R + 0.7152 * G + 0.0722 * B

其中 R, G , B 取值为:若 XsRGB <= 0.03928 则 X = XsRGB/12.92 ;否则 X = ((XsRGB+0.055)/1.055) ^ 2.4 「X 指 R,G,B」。

XsRGB 在此指代 RsRGB, GsRGB, 或 BsRGB,取值为 XsRGB = X8bit/255 「X8bit 指R、G、B通道各自在8位/通道下 0-255 的取值」。

// 第一步
// 计算颜色 rgb对应通道 的XsRGB值
RsRGB = rgb.r / 255
GsRGB = rgb.g / 255
BsRGB = rgb.b / 255

// 第二步
// 计算对应 R、G、B 值
R = RsRGB <= 0.03928 ? RsRGB/12.92 : (RsRGB + 0.055) / 1.055) ^ 2.4
G = GsRGB <= 0.03928 ? RsRGB/12.92 : (RsRGB + 0.055) / 1.055) ^ 2.4
B = BsRGB <= 0.03928 ? RsRGB/12.92 : (RsRGB + 0.055) / 1.055) ^ 2.4

// 第三步
// 计算相对亮度
L = 0.2126 * R + 0.7152 * G + 0.0722 * B

// 第四部
// 计算对比度
C = (L1 + 0.05)/(L2 + 0.05

备注:至于权重值怎么得来的,不作深究,对算法感兴趣的自行搜索

  • 举例 eg: 计算纯 黑色RGB(0,0,0) 的文本与 纯白色RGB(255,255,255) 背景的对比度。
// 第一步
// 计算颜色 rgb对应通道 的XsRGB值
// 黑色
RsRGB = GsRGB = BsRGB = 0/255 = 0
// 白色
RsRGB = GsRGB = BsRGB = 255/255 = 1

// 第二步
// 计算对应 R、G、B 值
// 黑色
R = G = B = 0/12.92 = 0 //(RsRGB = GsRGB = BsRGB < 0.03928)
// 白色
R = G = B = [(1+0.055)/1.055]^2.4 = 1 //(RsRGB = GsRGB = BsRGB > 0.03928)

// 第三步
// 计算相对亮度
// 黑色
L1 = 0.2126 * R + 0.7152 * G + 0.0722 * B = 0
// 白色
L2 = 0.2126 * R + 0.7152 * G + 0.0722 * B = 1

// 第四部
// 计算对比度
C = (L1 + 0.05)/(L2 + 0.05)= (0+0.05) / (1+0.05) = 1:21
  • 注:颜色中对比度的最大值为21:1(纯黑与纯白)*

对比度工具及实例验

  • WebAIM’s Color Contrast Checker (单色对比度工具)
  • EightShapes Contrast Grid (色组对比度工具)
  • console控制台-文本颜色color(默认与纯白对比度,可用取色器切换对比颜色) css颜色面板

HSL-色相H

拓展阅读-Ant design调色板