可用性

TODO

颜色和对比度

一般准则

要最大限度地减少用户的视觉和认知负担，请遵循以下准则：

• 只有标题文本可能出现在非实体背景上。 文字应该至少为18px，理想情况下只有一行; 文本越长在非实体背景上阅读障碍越大。
• 渐变背景只能是垂直的，即顶部的颜色与底部的颜色不同。避免使用水平，对角线和径向渐变，否则可能会影响文本阅读。
• 始终定义背景颜色（即使有图片）。由于可访问性问题，一些用户关闭了背景图像，因此请确保禁用背景图像，文本仍然清晰可见并满足对比度要求（4.5：1）。

实现背景图像的适当对比度

在暗背景下使用浅色文字

• 字重必须至少为400（正常字体大小及以上）。
• 文本必须具有4px模糊的文本阴影，其颜色与文本颜色相比至少具有7：1的对比度。
• 如果文本的任何部分具有非纯色背景，请应用以下任一项：
  • 垂直背景渐变，文本后面最浅部分的渐变至少与字体颜色的对比度为4.5：1
  • 半透明背景，当在白色背景上方图层时，与字体颜色的对比度至少为4.5：1

浅色背景下使用深色文本

• 字体重量必须至少为400。
• 文本必须具有3px模糊的文本阴影，其颜色与文本颜色相比具有至少7：1的对比度（例如：白色）。
• 如果文本的任何部分具有非纯色背景，请应用以下任一项：
  • 垂直背景渐变，文本背后最浅部分的渐变与文本和背景图像之间的字体颜色至少具有4.5：1的对比度
  • 半透明背景，当在黑色背景上方图层时，在文本和背景图像之间与字体颜色的对比度至少为4.5：1

实现背景渐变的适当对比度

确保满足以下条件之一：

• 渐变中的每种颜色与其文本的对比度至少为4.5：1 。
• 渐变的一端与字体颜色的对比度至少为4.5：1 ，文本必须具有4px文本阴影，其颜色与字体颜色的对比度至少为7：1。

※reference (opens new window)