关于WCAG2.1的用色建议

1.WCAG是什么？

WCAG全称是Web Content Accessibility Guidlines（网页内容无障碍指南），它们是一组是网页内容更容易访问的建议，主要针对残疾人。WCAG2.0于2008年发布，并于2012年10月成为国际标准化组织标准。WCAG 2.1于2018年6月成为W3C推荐标准。

新版chrome浏览器已经支持网页字体对比度的显示，可以用来检验字体配色是否达到WCAG推荐标准。谷歌的Material Design以及苹果的iOS13中的Dark Mode都参考了WCAG的用色对比度建议

2.WCAG里用色建议的目的是什么？

通过在文本和背景之间提供足够的对比度，让弱视人群（不使用增强对比度的辅助技术）可以阅读该文本。对于没有色盲的人，通过阅读性能评估，色相和保护度对可读性的影响很小或者没有影响

3.WCAG里用色建议是什么？

最低对比度

普通文本与背景对比度不低于4.5：1，注意以下情况

1).大字体/arge text的对比度不低于3:1

2).修饰性文本及图片，可以不用考虑对比度，修饰性文本指的是仅出于美学目的，不提供任何信息，并且没有任何功能

3).logo跟品牌标志没有对比度的要求

大字体/large text的判定标准

18pt 或者 14pt Bold 1pt=1.3333px

1.5或者1.2em Bold 1em=16px 所以换算出来是24px或者是19.2px Bold

150%或者120% Bold 假定主体文字的比例是100%

对比增强

普通文本与背景对比度不低于7：1，注意以下情况

1).大字体/arge text的对比度不低于4.5:1

2).修饰性文本及图片，可以不用考虑对比度，修饰性文本指的是仅出于美学目的，不提供任何信息，并且没有任何功能

3).logo跟品牌标志没有对比度的要求

4.WCAG中的色彩对比度如何计算出来的？（可忽略）

对比度计算公式/contrast ratio

(L1 + 0.05) / (L2 + 0.05)

L1 is the relative luminance of the lighter of the colors（L1浅色）,

L2 is the relative luminance of the darker of the colors（L2深色）.

相对亮度计算公式/relative luminance

For the sRGB colorspace（在sRGb色彩空间里）, the relative luminance of a color is defined as

L = 0.2126 * R + 0.7152 * G + 0.0722 * B （这是L的计算公式）

where R, G and B are defined as（以下是RGB数值的计算方式，根据比值带入计算，2.4是平方的意思）:

if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as（这里可以得到RGB的比值）:

RsRGB = R8bit/255

GsRGB = G8bit/255

BsRGB = B8bit/255

计算步骤基本上从下到上，先计算出RGB各个的比值，然后套用条件公式，得出RGB各个的数值，然后套用相对亮度计算公式，得出L的数值，然后再套用对比度的计算公式就能得出具体的对比度比值是多少。关于hex与RGB的转换可以看我另一篇文章。

4.资源推荐

网站1：http://contrast-grid.eightshapes.com/

网格布局，标记清晰，使用比较直观方便，个人比较推荐

网站2：https://contrast-ratio.com/

两种色彩对比度查询，数值精确，利用这个网站验证了官方的公式

5.个人建议

这些都是建议，具体还需要根据实际情况去选择，在美观和易用之间找到平衡，不能生搬硬套。

参考资料

Web Content Accessibility Guidelines (WCAG) 2.1

Understanding Success Criterion 1.4.1: Use of Color

https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines

https://baike.baidu.com/item/WCAG