跳至内容 申请项目咨询

看看登陆页面·033 登陆页面 品牌颜色 可达性

我突出显示了所有内容,但我不知道该按哪里。

阅读时间约 4 分钟 BlueCanvas

我应该选择多少种品牌颜色?

没有固定的数字。角色先于数量。纸张、分割线、字母的作用是让它们不显眼,高亮色只用在需要按压的一处。强调色上方的字体颜色是通过测量对比度来选择的。

要点

  • 如果你给每个重要的东西一个颜色,屏幕上就会有多个地方说“点击这里”,而最重要的地方就会消失。
  • 减少的顺序基于角色,而不是数量。你所要做的就是保持纸张、分割线和字母安静,只在需要按压的地方使用高亮颜色。
  • 一旦决定了强调色,请通过测量对比度来选择其上方文本的颜色。在橙色 D97757 上,白色字母为 3.1 比 1,墨水字母为 5.9 比 1。

此屏幕上的联系按钮是哪个

有四个按钮,每个按钮都有不同的颜色。蓝色联系我们,绿色详细信息,黄色查看价格,粉色活动申请。四个地方同时投屏 “点击这里”它说,访问者必须自己找到按哪里,而不是在屏幕上。

这是因为每个重要的事物都被赋予了颜色。我想强调活动,我想强调价格,我想吸引询问。

没有人从一开始就选择九

如果您打开其中一个再现屏幕并数一下颜色,就会发现有九种。分别是标志、查询按钮、辅助按钮、三个卡头、活动徽章、咨询链接、公司介绍链接。而不是选择九个, 结果是,对于每个附加的横幅或徽章,都会出现一种颜色。没看到。

该屏幕不是实际的客户屏幕,而是按照常见配置建模的再现屏幕。

在计数之前决定角色。

决定减少多少颜色只需颠倒顺序即可。首先,确定每种颜色的作用。

角色此页面上的值要做
表面FAF9F5覆盖了大部分屏幕。你不应该脱颖而出。
轮廓E3DACC只需划分空间即可。
信141413只需要阅读它。颜色本身不会说话。
压力D97757仅在需要按压的一处进行涂抹。

我不会给你规定应该有多少种颜色。 该视频中有四个调色板,重点是其中之一。重要的不是数量,而是重点在一个地方。

强调色上方的字母是通过测量对比度来选择的。

一旦决定了突出显示颜色,您将留下要放置在其顶部的文本颜色。不要用眼睛来挑选,而是测量对比度。如果使用WCAG 2.1的相对亮度公式计算,则如下。

混合物对比正文尺寸字体大小:4.5:1
白色字母 FFFFFF / 橙色 D977573.1 : 1这还不够。只有基于大字母的 3:1 才能通过。
墨水字母141413/橙色D977575.9 : 1它过去了。
墨水字母141413/奶油色FAF9F517.5 : 1它过去了。

在很多情况下,您可以通过保持相同的品牌颜色并仅更改字体颜色来通过考试。然而,该值是针对上述组合的。大文本、图标和非活动元素有不同的标准,必须在实际屏幕上重新测量。

我们今天要做的不是减少颜色

打开一个屏幕 选择对您来说最重要的一个按钮。 然后,从涂有该颜色的其他位置减去该颜色。这些位置包括顶部事件横幅、价格突出显示徽章和文本中的辅助按钮等。只需留出边框即可轻松阅读。

如果只剩下一种强调色,则按下该颜色。之后计数会自动排序。

这是 Blue Canvas 的登陆页面。您可以在模拟报价屏幕上查看包含的项目和预计金额。

完整视频字幕(5个场景)

此屏幕上的联系按钮是哪个

此屏幕上的“联系我们”按钮是哪个按钮?一共有四个,颜色各不相同。这是因为每个重要的事物都被赋予了颜色。

结果没有被选中,而是一一增加。

没有人从一开始就选择九种颜色。颜色随着每个横幅或徽章的附着而增加。一个屏幕上有九个。

在计数之前,先从角色开始

减少的顺序基于角色,而不是数量。纸张、字母和分隔线的作用就是不引人注目。突出显示颜色仅用于要求您按下的一处。

重新绘制并测量对比度

同一屏幕根据其角色重新绘制。只有一个带有强调色的按钮:查询。不要用肉眼来选择强调色上的字母,而是测量对比度。

选择最重要的一个按钮

今天不要减少颜色,只需决定一件事。此屏幕上最重要的按钮是什么?如果你把这种颜色从原来的位置上移开,组织就会从那里开始。

常见问题解答

多少品牌颜色合适?

没有固定的数字。角色先于数量。纸张、分割线、字母都很安静,需要按压的地方只使用了一种高亮颜色。此页面使用四个调色板,其中之一是强调。

文本的强调色是白色还是黑色更好?

每种颜色都不同,因此请通过测量对比度来选择。此处使用的橙色 D97757 上,白色字母为 3.1 比 1,墨水字母为 5.9 比 1,因此墨水面通过了 4.5 比 1 的文本标准。其他强调色必须通过添加该颜色来重新计算。

活动横幅也需要脱颖而出。我可以省略颜色吗?

这并不意味着您应该删除该颜色,而是意味着您应该只将强调色放在一个位置。横幅可以通过边框、背景对比度、位置和大小来脱颖而出。首先决定屏幕上最重要的操作决定了其余操作的呈现。

在屏幕上检查包含的物品和预计费用

设计范围和包含的项目按字面显示在模拟报价屏幕上。如果您点击 The Blue Canvas 模拟报价中的条件,您可以查看它以及估计价格。

尝试模拟估算

其他简短的见解

查看所有简短的见解→