颜色的使用

颜色对于制作一个漂亮的网站很重要,但并不是每个人都这么看颜色。这就是为什么检查颜色对比度和颜色的使用很重要:

  • 检查前景和背景内容之间的颜色对比
  • 验证颜色不是指示控件或内容的唯一方式

快速提示

  • 网站应该是灰色的-小心不要让人不舒服的颜色组合,比如亮绿色和鲜黄色,或者颜色对比度很高
  • 浅色背景上的深色字体对大多数人来说更容易阅读;但有些用户可能需要相反的方法
  • 如果在深色背景上使用浅色字体,您应该使用比您可能选择的稍大或稍厚的字体,这样它仍然易于阅读

顶部

颜色对比度

对于可达性无障碍 无障碍性(通常简称为a11y)是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了“直接访问”(即无人协助)和“间接访问”,即与个人的辅助技术(例如计算机屏幕阅读器)兼容。(https://en.wikipedia.org/wiki/Accessibility网站)你的网站。它应该考虑前景(文本和其他元素)和背景色(或图像),也应该考虑元素和悬停或焦点状态之间的关系。

颜色对比度应该足够高,以保证良好的可读性,但对于眼睛敏感或有认知问题的人来说,颜色对比度不应该太亮。没有WCAG公司WCAG公司 WCAG是Web Content Accessibility Guidelines的缩写。这些指南有助于确保所有人都可以访问互联网,无论他们需要如何访问互联网(屏幕阅读器、键盘等)https://www.w3.org/TR/WCAG21网站/.定义过高对比度但非常高对比度的标准应选择性使用。

WordPress项目遵循WCAG的可达性等级“AA”.

这要求背景色和前景色之间的对比度具有如下亮度对比度:

有很多工具可以检查颜色对比度。WebAxe发布了一个对比度检查器概述.

顶部

不仅仅是颜色

使用颜色区分页面上的元素是很好的。然而,您应该避免使用颜色作为区分页面各部分的唯一视觉手段。例如,

  • 错误、成功或注释消息
  • 内容中的链接
  • 活动、悬停或焦点状态
  • 显示信息更新

使用其他样式来指示信息类型,包括形状或装饰的更改。例如:

  • 除了颜色之外,还更改符号
  • 为嵌入文本的链接加下划线

侧栏、页脚或导航菜单中的分组链接通常不需要加下划线。如果文本在上下文中明显是一个链接,则不需要下划线。然而,在许多情况下,下划线可以提高网站的可用性。

顶部

示例

顶部

对的

在文本之间的链接下加下划线。

正文中带下划线的链接
未删除的链接更容易查看

在图形中使用符号和颜色。

带有不同形状符号的彩色图形
黑白相间带有不同形状符号的图形

顶部

不正确

链接没有下划线-色盲用户可能无法区分链接和文本。

当没有下划线时,在灰度上看不到链接
你现在能看到链接吗?

颜色用作信息或功能的唯一指示器

图形:仅使用颜色(无符号)
图形:仅使用颜色(黑白)

检查你的网站是否适合色盲用户的最简单方法是用灰度测试它。提取颜色信息后,您可以更容易地看到您的网站是否仍然可以理解。

顶部

资源

顶部

指导方针

顶部

工具

可以使用这些颜色检查器测试颜色对比度:

顶部

读得好

上次更新时间: