跳转到内容

数字可访问性

颜色的使用

当涉及到创建可访问的内容时,颜色不仅仅是一个装饰元素你处理颜色的方式可能会导致别人能够理解你想要传达的内容,或者根本无法与你的内容互动。

使用颜色和文本

一旦你理解了在数字环境中使用颜色的可访问性准则,就很容易创建好看的内容每一个人可以参与。

不要仅仅依靠颜色来传达信息。

颜色不能是传达信息、指示动作、提示响应或区分内容的唯一视觉元素。使用其他图形元素,如下划线,雪佛龙或图标,也传达了颜色所传达的含义。

为什么颜色不够?

当颜色是唯一的含义指示器时,对于视力低、色盲或选择忽略显示器上屏幕颜色的人来说,信息就无法获取。

使用清晰的标签和可区分的颜色组合。

避免色盲患者难以区分的颜色组合,如红/绿、蓝/绿和黄/紫。但是,有些用户无法区分任何颜色,或者可能将显示设置为灰度。您仍然需要提供清晰的文本或标签来解释您的彩色编码内容。

不要做什么
  • 两行文字,其中一行说绿色表示院长办公室的行动,下一行说红色表示系主任的行动,绿色和红色变成了各自的颜色。

在上面使用绿色和红色作为区分颜色的键中,红绿色盲或使用屏幕阅读器的人将无法区分院长办公室和部门主席的行动,这极大地影响了他们理解信息的能力。

该怎么做
  • 两行文本,其中一行表示蓝色表示院长办公室的行动,下一行表示橙色表示系主任的行动,蓝色和橙色更改为各自的颜色。“蓝色”一词前面是一个蓝色的大学建筑图标,“橙色”一词前面是一个橙色的人的小图标。

上面的键使用补充图标。色盲患者和使用辅助技术的人仍然能够理解院长办公室和系主任的行动之间的区别,因为关键并不仅仅依赖颜色来传达意思。屏幕阅读器将读取每个图标的alt文本,提醒用户有变化,那些不能区分颜色的人也可以使用图标。

确保文本和背景颜色之间有强烈的对比。

通过使用符合数字无障碍标准的颜色对比,您可以确保每个查看您的内容的人都可以轻松地看到和消化您的信息,而不仅仅是那些有残疾的人。

最小对比度

普通的文本:需要的颜色对比度为4.5:1或更强。

更大的文本:因为较大的文本(至少粗体18点或14点)更容易阅读,所以它要求颜色对比度为3:1。

检查对比度

WebAIM对比检查器可以很容易地在几秒钟内测试任何文本和背景颜色的对比度。

不要做什么
  • 黑色背景上有难以阅读的石榴石字体,下划线为“确保对科学的信任:营养方面的挑战和应对”

该大学标志性的石榴石黑色背景提供了只有1.73:1的对比度,这使得即使是大字体也难以阅读。

该怎么做
  • 石榴石背景上的白色文字写着:确保对科学的信任:营养方面的挑战和应对。

石榴石背景的白色字体保留了品牌标识,对比度高达12.11:1,通过了要求,阅读效果非常好。

在图像上添加文本

在繁忙的图像或背景模式上,很难评估文本的对比度。如果可能的话,在文字后面添加一个坚实的背景。您还可以调暗/调亮文本后面的图像,使其具有强烈的整体对比。


挑战传统。创建例外。没有限制。

©
Baidu