来源:优设 作者:Angelaaa
Human Interface Guidelines：Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.
我猜 iOS11 将纤细文字变粗变大，细线 icon 改为实心 icon， 也是出于提高对比度、让更多人能看清的初衷吧。
△ from：iOS 10 vs 11：完整 UI 比較分析，by：Taylor Hu
Medium
看下早期的Medium，只有「大M」和深灰色，满足对比度 > 3.0。
如今的 Medium ，色彩对比度都 ≥ 3.0。
测量发现:
黑色、深灰色，危险色，都满足对比度＞ 4.5。
某些地方的灰色文字（如未激活的Tab文字），对比度 ＞ 3。
写文章的 Placeholder 对比度为2.1。
禁用控件对比度为1.2（那个右侧淡淡的on/off radio-button）。
绿色文字较难满足；作为大面积颜色时，绿色更浅。
深浅背景下，用的不同绿色。
△ 深浅背景下用的是不同绿色。
黑色、深灰色，危险色，都满足对比度＞ 4.5。
Disabled color 对比度是1.9，接近2。
规律总结
由此可大致总结出一些规律，可酌情应用：
黑/白色、深灰色、危险色，都尽量满足对比度 ＞ 4.5。
最高对比度一般在 16-18 左右。（最高对比度是21，也就是 #000000 + #FFFFFF 。尽量别用这种对比，这会引起一些诵读困难症患者的不适，他们会感觉文字在旋转、模糊）
Disabled color、placeholder 虽未做限制，但浅色背景上对比度大概是1.8~2.3（尽量2以上），深色背景对比度大致是2.5~3（尽量3）。
未激活控件（如tab）文字颜色一般对比度 ＞ 3。
文字颜色、icongraphy，为了满足无障碍色彩对比要求，一般不直接使用 brand color，而是加深/变浅后再用。
如果主要背景是白色，brand color 和白色的对比度尽量满足 ≥ 3。（黄色、橙色、绿色较难满足，酌情处理）。
深色背景的对比度，比浅色背景的容易满足一些。（即便如此，谨慎在产品中使用深色调，研究表明散光的人在黑色上阅读白色文字比在白色黑色文字更难。Bauer和Cavonius 在 发现，在浅色背景上用黑色字符阅读时，比在深色底阅读浅色字的准确率，高出26%。参考：Why light text on dark background is a bad idea）
五. 满足「无障碍色彩标准」的配色流程设计时，可以先从一个非常清晰的方案开始尝试，然后再慢慢往你的美学方向调整。
1. 先确定各颜色的深浅
首先确定的主色调，也许是蓝色。
根据主色调确定不同深浅的灰色。 Colllor 这个在线工具能帮你完整这项工作。
△ Colllor 网站截图
选定一个灰色后，再根据这个灰色选出灰色的浅色系和深色系。
选定好灰色后，，再用相同方法，选出其他颜色的深浅色。
△ from: Don’t let your color palette be an airball，by: Zack Gehin
每个颜色 4-6 个深浅度比较合适，不同深浅的颜色别太接近，互相和谐。
如果自己创建变化规则也可以，如「叠加5%的黑色」或者「透明度变为80%」等等。无论采用哪种方法，确保所有颜色的深浅变化，都遵循统一的规则。
△ 颜色加深、变浅的方法示例。from: Color Contrast for Better Readability | Viget, by: Tom Osborne
「尝试—失败—再尝试」——这个过程可能会花费大量时间。 Zack Gehin 为 Widen Enterprises 创建色板的过程中，花了40个小时——测试、重选、调整。结果符合了他们的预期，表达出了他们期望的情感，并且满足了Acessibility standards。
Zack Gehin 利用 Colllor 创建的色板示例：
△ from: Don’t let your color palette be an airball，by: Zack Gehin, 2017.8.16
然后再将选好的颜色，放到组件、背景中去测试对比效果。
2. 确定文字颜色
这是一个系统化的工作，可以先从几个基本文本类型开始：
主要文字颜色（primary text color）: 段落、标签、其他主要文字。
次级文字颜色（secondary text color）: 表单辅助说明（form microcopy）、说明文字、表格标题，等。
可交互文字颜色（interactive text color）：主要是链接文字。
错误信息文字颜色（ inline error text color）: 有的在一些交互控件旁边。
禁用文字颜色（disabled text color）：通常用在表单控件和按钮上。
确保至少包含：主要，次要，链接和错误4种文本颜色。谨慎添加新的颜色，如三级文字颜色（teriary text color）、图标填充颜色。
图标颜色一般可以直接沿用已设置好的 primary, secondary, interactive，error 的颜色。
同样，先确定body text 的色值，从灰色入手。
测算出在各个背景色上，可用的最低对比度的灰色。
如果按「WCAG 2.0 AA 」的标准，下图的 #6B797F 就是白背景上文字的最浅灰色。
△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne
接下来测试选择「链接文本色」「错误文本色」。
△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne
经反复对比，最后确定，在白背景上，选择 以上2个颜色（对比度＞4.5）。
前文中，从各大网站/ App 中测量得出，
未激活tab文字，对比度一般＞3；
disabled text、placeholder，一般对比度是2左右（夜间模式可尽量满足3）。
3. 检测文字色的对比度
然后，将文字放在按钮上，检测对比度是否满足要求。
不要忘记交互式状态，例如按钮，选项卡，列表组和链接的 hover，active 和 selected 状态。
△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne
将文字放在每一种背景色上测试文字对比度。可以用 EightShapes Contrast Grid 实时测量两两颜色的对比度是否达标。
来回测试的同时，反复优化色板。
△ from：Light & Dark Color Systems，by: Nathan Curtis
4. 在不同环境下测试你的色板
这是设计过程中最重要的步骤之一。
调研确定用户使用你的产品的主要环境。 Human environment design 会帮助你确定哪些环境是必须要考虑的。
环境测试很简单，把你的设备带到强日光下去、放在昏暗房间里，调低手机的屏幕亮度（许多手机快没电了的用户经常这样做）自己去感受测试。
如果有些地方不好用，重新做。
在不同显示器上测试你的色板
