@Angelaaa?（公众号：漫声细语）：正文开始之前先看一发文章框架：
一. 为什么要让对比度满足「色彩无障碍设计标准」？
Accessible design aids in creating a better experience not just for people with disability, but also for people without it.
举个例子，一般的门，都需要自己推开或者拉开，但美国一款为残障人士设计的门开关，可以一按下门自动打开。
△ from：Power Door Openers – Access and Mobility
这个「一按门就开」的按钮，装在公共建筑的入口，可以帮助坐轮椅的用户方便开门。
这同时也方便了捧着许多东西的人、抱小孩的人，或者人们干脆都去按它开门——因为它真的比自己去推开/拉开大门方便多了。
所以，满足无障碍设计标准的设计，不仅给残障人士提供了更好的体验，同时也能更方便普通人使用。
实际生活中的产品设计如此，互联网产品设计如此，颜色对比度的设计亦如此。
1.面向大众的产品，要尽量满足「有视觉障碍的用户」
Salesforce 的无障碍设计顾问 Cathy O’ Connor 经常被问到「你们产品究竟有多少残障人士在使用？」他想说的是，残障人士的数量并不少，具体数据如下：
- 世界人口的15%，有着不同程度的残疾，包括视力、听觉、行动及认知障碍。
- 约有4%的人口视力低下，0.6%视盲。这些用户可能需要借助屏幕阅读器/盲文阅读器的帮助。
- 7-12% 的男性有不同形式的色觉缺陷（如色盲），不到1％的女性这样。他们难以区分某些特定颜色组合。
- 低视力状况随着年龄的增长而增加，50岁以上的一半人有一定程度的低视力低状况。
- 全球增长最快的人群是60岁以上的人。
- 过了40岁，大多数人都需要老花镜，才能清楚地看到小物体或文字。
△ from：Color Contrast And Why You Should Rethink It ，by： Cathy O’ Connor
2.要尽量让产品在「不佳的使用条件」下，仍能使用
也许你觉得你的设计在 Mac 上看起来很完美啊！
但也许你的用户中一部分人，用的是老旧、性能差的设备/ 显示器；也许有人会在强烈的阳光下、在交通工具上，在昏暗的环境中使用你的产品。如果没做可用性测试，很可能在真正的「主要使用场景」中，你的产品是几乎没法用。
为了让使用条件不是很好的用户仍然能正常使用你的产品，也为了更多有视觉障碍的人能用好你的产品，将「无障碍设计」考虑到产品设计中，是一件非常有必要的事。
什么？为了美观，不得不放弃足够高的对比度？那看看这个绝佳网站 Contrast Rebellion，上面列举了许多真实案例，证明了高对比度设计仍然很酷很吸引人。
二. 「Color Accessibility」是什么？
WCAG 2.0 （Web Content Accessibility Guideline，Web内容无障碍指南）就是为了帮助设计师创造良好用户体验的。
WCAG 中提到的主要的四种类型的残疾是：
- 视力障碍（Visual impairments）
- 听力障碍（Hearing impairments）
- 运动障碍（Motor impairments）
- 智力障碍（Intellectual disabilities）
基于此，提出了「POUR无障碍原则」：
- 易于感知的（Perceivable）
- 便于操作（Operable）
- 容易理解的（Understandable）
- 稳定耐用的（Robust）
颜色的选择属于「易于感知的」无障碍设计范畴。 也就是说，网站/App 的内容应该很容易被看到——尤其是文字和图像，应该有足够高的色彩对比度（high color contrast ratio），使之很容易地从背景中被辨识出来。
颜色对比度无障碍标准
1.4.3 对比度（最小）: 文本的视觉呈现以及文本图像至少要有4.5:1的对比度（AA级）。
大文本: 大号文本以及大文本图像至少有3:1的对比度。
1.4.6 对比度（加强）: 文本视觉呈现以及文本图像至少有7:1的对比度（AAA级）。
大文本: 大号文本以及大文本图像至少有 4.5:1的对比度。
Ps：大文本：至少 18pt（24px）或 14pt（19px）bold。
△ from: Web Content Accessibility Guidelines (WCAG) 2.0
将规范总结成表格：
△ ?from：Making Bootstrap a Little More Accessible — SitePoint， by：Rhiana Heath
△ 这就意味着，当字号 ≥ 24px normal / 19px bold, 白背景上能用的最浅的纯灰色是#959595。
△?当字号＜ 24px normal / 19px bold，白色背景上可以用的最浅纯灰色是#767676。（如果在灰色背景上，文字颜色应该更深）
另外，以下情况的文本，无最低对比度限制：
- 未激活的（inactive）用户界面组件的一部分（按钮或菜单选项）。
- 表单字段的占位符 (placeholder) 或 ghost text 。
- 只是纯粹的装饰。
- 对任何人都不可见的内容。
- 文本作为「包含其他重要视觉内容图片」的一部分。
- 文本作为 logo 或品牌名称的一部分。
下图，Salesforce Design Systems team 在自己的移动应用的选色上，很好地满足了「WCAG 2.0 AA标准」 。
而且设计师们在探索高对比度色彩组合的过程中发现，他们自己越来越喜欢高对比度的设计。我相信你也会发现，使用满足标准对比度标准的颜色，并不会影响你产品的美观。
△ 完全满足大字对比度>3；小字对比度>4.5。
设计时，可以借助一些工具，比如用「灰度/色盲模拟器」测试设计。 （ Photoshop 在其“View> Proof Setup”菜单中内置了色盲滤镜。）
时刻记得问问你自己，页面上的 CTA ( call to action ) 是否「看上去」是页面中的主要元素。
三. 「对比度检测」工具推荐
一些实用在线工具可以用来测试对比度是否满足 WCAG 2.0 AA 的「色彩无障碍设计」标准。
WebAIM’s Color Contrast Checker
可以直接在线调颜色，实时看对比度是否满足要求。
?? Tanaguru Contrast-Finder
若测试的2个颜色对比度不达标，会自动推荐一系列达标的颜色可供选择。
Easily calculate color contrast ratios
方便地检测对比度是否达标。
Color Safe
在定色板之前，可以用它来事先选择符合标准的颜色。
Color tool
另外推荐一款 Google 的配色工具，可直接检测颜色的accessibility。
Color Oracle
检测不同类型色盲、色弱患者，看到屏幕的效果。
四. 大厂案例
看完了规范，仍有些困惑未能解决，比如 ：
disabled text 对比度未作要求，那对比度也不可能是1，究竟多少比较合适？
最低对比度有了要求，那么最高对比度呢？毕竟纯黑加纯白也很难受。
黄色橙色这种，无论如何在白背景也不可能满足对比度 ＞ 3的颜色，如何处理？
所以我选取了一些比较注重无障碍设计的大厂案例，以求能发现一些规律。
Google Chrome
「无障碍设计」已经是 Google Chrome DNA 的一部分。过去的两年中，这方面做了尤其多