颜色对于制作一个漂亮的网站很重要,但并不是每个人都这么看颜色。这就是为什么检查颜色对比度和颜色的使用很重要:
- 检查前景和背景内容之间的颜色对比
- 验证颜色不是指示控件或内容的唯一方式
- 网站应该是灰色的-小心不要让人不舒服的颜色组合,比如亮绿色和鲜黄色,或者颜色对比度很高
- 浅色背景上的深色字体对大多数人来说更容易阅读;但有些用户可能需要相反的方法
- 如果在深色背景上使用浅色字体,您应该使用比您可能选择的稍大或稍厚的字体,这样它仍然易于阅读
对于可达性 无障碍性(通常简称为a11y)是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了“直接访问”(即无人协助)和“间接访问”,即与个人的辅助技术(例如计算机屏幕阅读器)兼容。(https://en.wikipedia.org/wiki/Accessibility网站)你的网站。它应该考虑前景(文本和其他元素)和背景色(或图像),也应该考虑元素和悬停或焦点状态之间的关系。
颜色对比度应该足够高,以保证良好的可读性,但对于眼睛敏感或有认知问题的人来说,颜色对比度不应该太亮。没有WCAG公司 WCAG是Web Content Accessibility Guidelines的缩写。这些指南有助于确保所有人都可以访问互联网,无论他们需要如何访问互联网(屏幕阅读器、键盘等)https://www.w3.org/TR/WCAG21网站/.定义过高对比度但非常高对比度的标准应选择性使用。
WordPress项目遵循WCAG的可达性等级“AA”.
这要求背景色和前景色之间的对比度具有如下亮度对比度:
有很多工具可以检查颜色对比度。WebAxe发布了一个对比度检查器概述.
使用颜色区分页面上的元素是很好的。然而,您应该避免使用颜色作为区分页面各部分的唯一视觉手段。例如,
- 错误、成功或注释消息
- 内容中的链接
- 活动、悬停或焦点状态
- 显示信息更新
使用其他样式来指示信息类型,包括形状或装饰的更改。例如:
- 除了颜色之外,还更改符号
- 为嵌入文本的链接加下划线
侧栏、页脚或导航菜单中的分组链接通常不需要加下划线。如果文本在上下文中明显是一个链接,则不需要下划线。然而,在许多情况下,下划线可以提高网站的可用性。
在文本之间的链接下加下划线。
在图形中使用符号和颜色。
链接没有下划线-色盲用户可能无法区分链接和文本。
颜色用作信息或功能的唯一指示器
检查你的网站是否适合色盲用户的最简单方法是用灰度测试它。提取颜色信息后,您可以更容易地看到您的网站是否仍然可以理解。
可以使用这些颜色检查器测试颜色对比度:
上次更新时间: