在网页设计中使用对比前景色和背景色

用适当的对比度提高网站的可读性和用户体验

对比度在任何网站设计的成功中起着重要的作用。 从该网站的版式 ,到整个网站使用的图像,以及前景元素和背景色彩之间的对比 - 设计良好的网站必须在所有这些区域具有足够的对比度,以确保高质量的用户体验和长期的网站成功。

低对比度等于不良阅读体验

对比度太低的网站很难阅读和使用,这会对任何网站的成功造成负面影响。 较差的色彩对比度问题通常很容易识别。 您通常可以通过查看在Web浏览器中呈现的页面来完成此操作,并且可以查看由于颜色选择不当而导致文本太难阅读。 尽管可能很容易确定哪些颜色不能很好地协同工作,但确定哪些颜色与其他颜色相比能够很好地工作确实非常具有挑战性。 你可能不是什么不管用,但你如何确定什么工作? 本文中的图像应该能够帮助您展示各种不同的颜色以及它们如何作为前景和背景颜色进行对比。 您可以看到一些“良好”配对和一些“差”配对,这将帮助您在项目中选择正确的颜色。

关于对比

你应该注意的一件事是,对比度不仅仅是一种颜色与背景相比的亮度。 正如你应该在前面提到的图像中看到的那样,这些颜色中的一些非常明亮,并且在背景颜色上充满活力 - 例如黑色的蓝色,但我仍然将其标记为对比度较差。 我这样做是因为虽然它可能很亮,但颜色组合仍使文本难以阅读。 如果您要在黑色背景上以蓝色文本创建页面,您的读者会很快产生眼睛疲劳。 这就是为什么对比不仅仅是黑色和白色(是的,这个双关语是有意的)。 有对比的规则和最佳实践,但作为设计师,您必须始终评估这些规则,以确保它们在您的特定实例中工作。

选择颜色

对比度只是为您的网站设计选择颜色时要考虑的因素之一,但它是一个重要因素。 在选择颜色时,要注意公司的品牌标准,同时也愿意提供调色板,虽然它们可能符合组织的品牌准则,但不能很好地在线工作。 例如,我总是发现黄色和鲜绿色在网站上有效使用非常具有挑战性。 如果这些颜色符合公司的品牌标准,那么它们可能只需要用作重音颜色,因为很难找到与任何颜色都对比的颜色。

同样,如果您的品牌颜色是黑色和白色,这意味着巨大的对比度,但是如果您的网站上有很多文字,黑色背景和白色文字会使阅读变得非常困难。 即使黑白对比也很好,黑色背景上的白色文字会导致长时间段的眼睛疲劳。 在这种情况下,我会反转颜色以在白色背景上使用黑色文本。 这可能不是视觉上的兴趣,但你不会找到比这更好的对比!

在线工具

除了您自己的设计意义外,还有一些在线工具可用于测试网站的颜色选择。

CheckMyColors.com将测试您网站的所有颜色并报告页面上元素之间的对比度。

此外,在考虑颜色选择时,您还应该考虑网站可访问性以及具有色盲形式的人。 WebAIM.org可以提供帮助,ContrastChecker.com也可以提供帮助,它将根据WCAG指南测试您的选择。