在实施网页设计和创建网页内容时,我们必须仔细考虑 颜色的使用。我们的颜色选择会影响我们的用户,他们可能是色盲, 视力低下,或其他一些色觉障碍。
颜色对比度
颜色对比度是指计算出的前景与前景之间的差异之比 背景颜色。例如,足球比赛结果的标题使用黑色背景(十六进制 代码#00000)和前景中的黄色链接(十六进制代码#ffcc00)。计算出的 色彩对比度为13.89:1。
足球比赛结果选择实施颜色对比度符合 AA 级。我们必须达到对比度 正常大小的文本(标准链接、正文等)为 4.5:1,大文本为 3:1 文本。大文本定义为:
- 粗体字体,字体大小为 18 像素或更大,或者
- 24px 或更大的字体大小
我们的页面元素(例如链接和按钮)之间必须具有对比,以便 视力不佳的用户仍然可以看到它们并与之互动。
测试颜色对比度
开发人员和设计人员可以使用这些来测试自己的颜色对比度 免费工具:
如果您的页面元素未通过颜色对比度 AA 级别,则必须增加 背景的明度与暗度之间的差异 前景,反之亦然。
使用颜色进行交流
在网站上使用颜色作为沟通工具不一定是坏事。然而, 重要的是要避免将颜色感知用作唯一通讯方式。
使用颜色来指示功能
避免仅依靠颜色来指示功能。例如,链接传统上是 以蓝色表示。然而,如果有人看不到蓝色,他们就不会 能够区分链接。为了确保您的链接可访问,还包括 下划线或其他突出的格式调整,与颜色无关。
例外
虽然鼓励避免使用颜色作为功能的唯一指示符,但 可能有一些例外。例如,如果您在标准位置有链接,例如 作为网站页脚,只用颜色来区分其中的链接可能就可以了 区。大量带下划线的链接可能会使文本难以阅读; 此外,人们通常认为网页页脚中的列表是可点击的链接,无论 设计的。
使用颜色来表示含义
避免仅仅依靠颜色来表示含义。例如,通常表示 按颜色划分滑雪道的难度级别。一般来说,绿色表示容易走的路, 蓝色表示中等难度的路线,黑色表示最困难的路线。
如果有视力障碍的人尝试阅读列出路线难度的网页 仅根据颜色进行评分,他们无法区分哪些滑雪道 最适合他们的技能。在此示例中,确保难度等级 还可以通过为每个级别包含不同的形状来访问。绿色小径可以 用绿色圆圈表示。蓝色的小径经过蓝色的方块。黑色的痕迹 钻石。每个评级除了不同的颜色之外还有不同的形状。
图像和颜色
您通常不需要在中包含任何有关颜色的信息替代文本或您网站上装饰图片的 ALT 文本。但是,如果您正在使用 提供功能或含义指示的图像,必须包含颜色 和/或图像 ALT 中的含义。
如果您使用绿色圆圈图片来表示您所描述的滑雪道 被评为简单路线,那么该绿色圆圈的 ALT 文本应为“绿色” 圆圈”或“绿色圆圈,简单”,以便屏幕阅读器用户知道正在传达的内容。
了解详情
要详细了解在网站上使用颜色的原则:
现代校园CMS
大学营销和传播确保所有全局元素(标题、 页脚等)和标准 CMS 小部件遵循可访问的颜色使用指南 方式。但是,如果 CMS 用户更改任何内容的颜色或实施任何设计 就他们自己而言,他们必须遵循上述准则并自行执行 合规性测试。