我们用彩色来观察世界,但我们也会利用颜色对比来解读有关周围环境的重要信息。
想象一下在冬日的夜晚穿过一片漆黑的森林。感知如何在这种环境中移动的唯一方法是区分深色物体和浅色物体,我们的眼睛将光解读为色彩对比,从而在苍白的月光下形成深色树木的形状。
不同文化中色彩象征的意义
品牌颜色:如何以及为何选择正确的颜色
换句话说,颜色对比可以让我们看得清楚,在设计中最大限度地提高颜色对比水平将使别人能够区分文本和背景颜色,或按钮和背景图像。
色彩对比网站设计示例,以计算 尼泊尔 whatsapp 数据 机显示器上迸发出的丰富多彩的设计为特色
通过Anton Vierietin、Hussein Satrio和Anton Vierietin授权此拼贴画中使用的图像。
探索 Shutterstock 上的图片
颜色对比和网站可访问性
虽然高水平的颜色对比度可以使事物更容易看清,但低水平的颜色对比度会严重影响网页颜色的可访问性,使信息难以阅读,用户的旅程变得棘手且令人沮丧。
您选择的颜色对比度越相似,人眼就越难处理两种颜色之间的差异,从而导致文本或网站难以辨认,从而阻止或转移用户导航。
无障碍设计:改善残障人士数字体验的 9 种方法
根据2022 年全国健康访谈调查,超过 5000 万 18 岁以上的美国成年人报告出现一定程度的视力丧失,约 8% 的美国人口出现更严重的视力障碍,包括失明。
如果网页设计师忽视网页颜色可访问性的重要性,企业将面临失去至少 8% 潜在受众的风险,如果企业的目标是吸引年龄较大的受众群体访问其网站,那么这一风险将会进一步增加。
颜色对比度检查工具的屏幕截图
使用对比度检查工具颜色对比度检查器可以帮助企业使其在线设计更容易被更广泛的受众所接受。
颜色对比度和网页可访问性的最佳实践
提高色彩对比度和网站可访问性的最佳做法是什么?
这些重要技巧将帮助您提高对比度,并创建美观平衡的网站设计:
使用久经考验的颜色组合,这些组合已被证明能够有效提高美观度和可访问性。互补色或两种高对比度的同色系颜色(如淡绿色和深绿色)是自然时尚的搭配,同时也具有高色彩对比度。
考虑使用微妙的色调和色调来为您的网页设计颜色建立层次结构和可访问性。例如,标题应该是您希望用户阅读的第一件事,因此可以将其设置为高对比度的颜色,例如浅色背景上的黑色。然后,您可以使用对比度稍低的颜色(如深灰色)引导用户到下一个信息项,例如副标题或正文。将重要的号召性用语项(如按钮)设置为高对比度的强调色(如鲜红色),以真正吸引用户注意您希望用户点击的位置。
避免在基于屏幕的设计中使用极高对比度的颜色组合。虽然最大化色彩对比度很重要,但在某些情况下,极高的对比度会产生伤害用户眼睛的不良效果!避免过度色彩对比的最佳方法是将“中介”颜色引入调色板,以抵消浅色(如白色或柔和的霓虹色)发出的明亮光线。中介色位于高对比度和低对比度颜色的中间地带。一个很好的例子是将蓝色或红色作为中介色引入原本黑白的网站方案中。
使用深思熟虑的颜色对比来设定网站设计的基调。印刷书籍和杂志通常使用深色文字搭配白色或浅色背景,因此您可以使用深色字体和浅色背景为网站设计带来类似的书卷气或传统感。反转颜色对比可为网页布局带来更前卫或更随意的感觉。带有白色、柔和色或霓虹色文字的深色模式背景与传统印刷设计中偏爱的颜色不同,为您的网站带来未来感。