如何对比网页设计中的背景色和前景色(contrast background and foreground colors in web design)

本文介绍了如何在网页设计中有效地创建背景色和前景色之间的对比度。...

知道什么

  • 使用本文中的图表确定网页设计的最佳背景和前景颜色组合。
  • 使用诸如CheckMyColors.com之类的在线工具测试站点的颜色,并报告页面上元素之间的对比度。
  • 使用诸如ControlChecker.com之类的工具根据Web内容可访问性指南测试您的选择。

本文介绍了如何在网页设计中有效地创建背景色和前景色之间的对比度。

如何创造强烈的对比

有些颜色可能是明亮的,并在特定的背景色上显示出活力,例如黑色上的蓝色,但它们是较差的对比度选择。例如,如果你在黑色背景下创建一个全蓝色文本的页面,你的读者会很快感到眼睛疲劳。

研究下表,了解最佳背景/前景组合。

有规则和最佳实践可供对比,但作为设计师,您必须始终评估这些规则,以确保它们在您的特定实例中有效。

使用在线对比度检查工具

除了你自己的设计感觉,尝试一些在线工具来测试你的网站的颜色选择。CheckMyColors.com将测试您网站的所有颜色,并报告页面上元素之间的对比度。

此外,当考虑颜色选择时,你也应该考虑网站的可访问性和有色盲的人。WebAIM.org和ContractChecker.com都可以提供帮助,后者将根据Web内容可访问性指南测试您的选择。

为什么对比很重要?

强烈的对比在任何网站设计的成功中都扮演着重要的角色。充分的对比度确保了高质量的用户体验和更容易的可读性,这将有助于网站的长期成功。然而,对比度太低的网站可能很难阅读和使用,这将对任何网站的有效性产生负面影响。

虽然很容易确定哪些颜色不能很好地搭配在一起,但更难确定哪些颜色能够有效搭配,无论是在与其他颜色的对比中还是在网站设计中。

品牌标准和对比色选择

对比度只是当你为网站设计选择颜色时需要考虑的因素之一。在选择颜色时,您可能还必须注意客户的品牌标准,无论客户是公司、其他组织还是个人。虽然调色板可能与组织的品牌指南一致,但它们可能无法很好地用于在线展示。

不同的颜色对平面艺术家意味着什么?

例如,在网站上有效地使用黄色和亮绿色是非常具有挑战性的。如果这些颜色在公司的品牌指南中,它们可能只需要用作强调色,因为很难找到与这两种颜色形成良好对比的颜色。

同样,如果你的品牌颜色是黑色和白色,这意味着巨大的对比度,但是如果你有一个有大量文本的网站,黑色背景和白色文本将使阅读成为一种非常紧张的体验,尽管黑色和白色之间固有的对比度很强。在这种情况下,建议使用白色背景上的黑色文本反转颜色。这在视觉上可能不那么有趣,但它是一个对比度和可读性更好的选择。

  • 发表于 2021-09-08 04:09
  • 阅读 ( 175 )
  • 分类:数学

你可能感兴趣的文章

如何改变8号窗口可怕的紫色背景色

...搜索框: 在搜索框中,键入“accent”以调出“Change the background and colors on Start”菜单。即使您完全在桌面模式下使用Windows8.1,您仍然需要使用此菜单来更改弹出通知的颜色(如**可移动媒体时得到的颜色)和锁定屏幕的颜色。...

  • 发布于 2021-04-08 23:18
  • 阅读 ( 238 )

如何使bash提示符在登录到服务器时更改颜色?

...scape codes must be enclosed in \[…\]. \[033[m resets the foreground and background to their defaults, so here :\w appears in the terminal foreground/background. \[033[48;5;XXXm\033[38;5;YYYm sets the background/foreground to XXX/YYY. For a script that dumps the available colors, try colortest. To...

  • 发布于 2021-04-09 06:06
  • 阅读 ( 228 )

你能强迫窗口以灰度显示吗?

... such as fading effects, when you close windows and other elements. Remove background images. This option turns off all unimportant, overlapped content and background images to help make the screen easier to see. 有什么要补充的解释吗?在评论中发出声音。想从其他精通技术...

  • 发布于 2021-04-11 08:33
  • 阅读 ( 212 )

如何在photoshop中创建自己的自定义bokeh墙纸

...后,是时候从第一个bokeh层开始了。创建一个名为“Bokeh Background”的新层。选择笔刷工具(B)。将笔刷颜色更改为纯白色。选择一个画笔大小,大约是画布垂直大小的三分之一到二分之一(在我们1920 x 1080画布的情况下,这意味...

  • 发布于 2021-04-11 19:08
  • 阅读 ( 193 )

为什么网页不立即显示它们的文本?

...d that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time). It basically works the opposite as it used to, when the text ...

  • 发布于 2021-04-11 21:33
  • 阅读 ( 147 )

读者要求:如何修复模糊照片

...ush tool and right click to set it to a soft brush setting. Make sure your foreground color is white, as shown above right. 你正在从你的图像中删除你刚做的一切,然后在你想要保留的区域重新绘制。边缘效果最好,如红色所示。通过在边缘上作画,你给...

  • 发布于 2021-04-12 13:19
  • 阅读 ( 169 )

询问htg:更改windows图标字体颜色、搜索联网驱动器和删除照片背景

...icon font color in Windows, searching networked drives, and removing photo backgrounds. Changing the Windows 7 Font Color Dear How-To Geek, Can you tell me or do you have a way to change the ‘letter’ color in the desktop short cut ic***?  White is Windows 7 default color and there seem no w...

  • 发布于 2021-04-12 19:19
  • 阅读 ( 254 )

如何用任何图像制作经典的红色/青色3d照片

...e entire canvas again, this time to add a slightly different effect to the background. to select “Free Transform” in Photoshop. Enlarge the Red channel of this layer in some unusual way. In this example, it was stretched horizontally. You can scale it up, skew, rotate, or simply offset it as ...

  • 发布于 2021-04-12 20:53
  • 阅读 ( 171 )

用这些搞笑的极客情人节来激发极客的爱

...或任何吸引您的颜色)填充背景层 By setting “Use” to “Foreground color as shown above, you’ll paint whatever foreground color you have in your color picker. Press to select the text tool. Set a few text objects, using whatever fonts appeal to you. Pixel fonts, like this one, ...

  • 发布于 2021-04-13 01:53
  • 阅读 ( 195 )

如何在photoshop中给黑白老照片上色

...r tool. Click your painted swatch once to select the changed color as your foreground color. Alt + Click the same again to turn all the layers back on. Shortcut key will give you back the Brush Tool and allow you to return to painting like normal. Add as many or as few colors as you feel your ima...

  • 发布于 2021-04-13 02:08
  • 阅读 ( 204 )

相关推荐