使用颜色和文本
一旦你理解了在数字环境中使用颜色的可访问性准则,就很容易创建好看的内容每一个人可以参与。
不要仅仅依靠颜色来传达信息。
颜色不能是传达信息、指示动作、提示响应或区分内容的唯一视觉元素。使用其他图形元素,如下划线,雪佛龙或图标,也传达了颜色所传达的含义。
为什么颜色不够?
当颜色是唯一的含义指示器时,对于视力低、色盲或选择忽略显示器上屏幕颜色的人来说,信息就无法获取。
使用清晰的标签和可区分的颜色组合。
避免色盲患者难以区分的颜色组合,如红/绿、蓝/绿和黄/紫。但是,有些用户无法区分任何颜色,或者可能将显示设置为灰度。您仍然需要提供清晰的文本或标签来解释您的彩色编码内容。
不要做什么
在上面使用绿色和红色作为区分颜色的键中,红绿色盲或使用屏幕阅读器的人将无法区分院长办公室和部门主席的行动,这极大地影响了他们理解信息的能力。
该怎么做
上面的键使用补充图标。色盲患者和使用辅助技术的人仍然能够理解院长办公室和系主任的行动之间的区别,因为关键并不仅仅依赖颜色来传达意思。屏幕阅读器将读取每个图标的alt文本,提醒用户有变化,那些不能区分颜色的人也可以使用图标。
确保文本和背景颜色之间有强烈的对比。
通过使用符合数字无障碍标准的颜色对比,您可以确保每个查看您的内容的人都可以轻松地看到和消化您的信息,而不仅仅是那些有残疾的人。
最小对比度
普通的文本:需要的颜色对比度为4.5:1或更强。
更大的文本:因为较大的文本(至少粗体18点或14点)更容易阅读,所以它要求颜色对比度为3:1。
检查对比度
的WebAIM对比检查器可以很容易地在几秒钟内测试任何文本和背景颜色的对比度。
不要做什么
该大学标志性的石榴石黑色背景提供了只有1.73:1的对比度,这使得即使是大字体也难以阅读。
该怎么做
石榴石背景的白色字体保留了品牌标识,对比度高达12.11:1,通过了要求,阅读效果非常好。
在图像上添加文本
在繁忙的图像或背景模式上,很难评估文本的对比度。如果可能的话,在文字后面添加一个坚实的背景。您还可以调暗/调亮文本后面的图像,使其具有强烈的整体对比。