设计网站时，我如何知道用户如何看待颜色？

11

设计网站时，我如何知道用户如何看待颜色？我看到的网站颜色与Macbook和Windows台式机/笔记本不同。尤其是我看不到桌面上的浅色，例如桌子的灰色边框不可见。

设计时我应该关心哪一个？我可以使用设计解决方案使所有屏幕都非常相似吗？

website-design color-conversion

— 艾哈迈德
source

相关且可能重复的内容：graphicdesign.stackexchange.com/questions/94401/…–

— 文森特

1

只是增加了混乱，将近10％的人是色盲-但至少有了Chrome的扩展程序，至少让您（假设您不是）可以大致了解某人...

— Rycochet

...并且在企业级，通常由远程访问和组设置来控制PC网络的IT部门可以在办公室（您的客户）的情况下，在办公室的显示器（您的客户端）上使用伽玛/对比度+其他屏幕设置。在我的上一家公司中，IT部门位于另一个国家，很少同情设计-我获得了管理员访问权限，并添加了自己的显示器和设置！遵循标准并避免出现极端情况是最好的方法，它指出某些客户（例如政府）将具有严格的可访问性-请提前提出要求，以避免不必要的修改

— Applefanboy

23

简短的答案：你不知道。

更长的答案：几乎不可能考虑所有屏幕设置和校准，环境以及观看者的视觉（残障）能力。这就是为什么要有一些指南，例如文本对比及其背景，以确保至少在大多数情况下具有一定的可用性。

我的个人工作流程包括至少两个未校准的显示器，以及在不同照明情况下在不同移动设备上进行的一些测试。

W3C已就颜色的使用和必要的对比度制定了一些准则，您可以在此处阅读。就个人而言，我使用Lea Verou的文字对比工具检查我的文字颜色是否符合指导原则或至少接近。

— 文森特
source

8

我想知道SE员工是否阅读了这些指南。我的视野很好，但是在许多SE网站（包括该网站）上，背景和链接突出显示颜色之间的对比度很差。

— 巴玛（Barmar）'17年

1

我希望我可以不止一次投票！我本人使用深色的阅读器浏览器扩展程序，因此无论您的网站多么漂亮，我都会完全摧毁我，只是为了在我五十岁时仍然拥有适当的视力！

— PieBie

根据该网站webaim.org/resources/contrastchecker的说法，背景和链接之间的颜色对比无法达到该SE网站上的可访问性标准。因此，可以安全地假设SE员工不阅读此类指南。

— ESR

2

您没有，也无法在每个人的监视器/设备上控制或强制执行相同的设置。最好的办法是在为网络导出光栅图像时使用sRGB颜色配置文件。

sRGB是用于在Web上进行色彩还原的全球标准色彩空间。

这将在一定程度上有所帮助，但是最终用户的喜好将决定如何在其设备上查看图像。显然，这是用于光栅图像，而不是页面上的其他图形元素。

— 比利·克尔
source

并将您的显示器校准为sRGB，因此至少您的显示器会显示出它应该是的

— 样子

评论不作进一步讨论；此对话已转移至聊天。

— 文森特

1

当今的现代浏览器和计算机很少会显示正确的颜色（有关此信息，请参阅https://websafecolors.info/learn）。

似乎是显示器本身使颜色看起来有所不同。这可能归因于显示器的亮度，对比度和蓝光级别设置，甚至归因于显示器本身的技术（例如LED和面板类型）。无法在所有显示器上强制执行一致的设置，甚至无法阅读其设置并调整网站。

我建议使用Inspect Element并查看每个平台上颜色的十六进制代码。如果它们相同，那么您知道它是显示内容。解决方案是使用彼此之间具有更大对比度的颜色，以便它们在所有屏幕上脱颖而出的机会更大。或者，尝试使用较粗的边框，甚至是无边框的填充桌子！大多数用户都有高清屏幕，这为表格设计打开了很多可能性，表格设计通常使用像素级的文本和格式。

— 劳埃德·陶
source

0

答案是否定的，因为每台计算机的笔记本电脑颜色和台式机颜色都不相同。如果要确保颜色相同，可以使用颜色代码，例如，可以在css中键入以下代码：

background-color: #D2B48C

— 莎莉_2891
source

2

嗨，萨莉，我已经将字体固定在您的答案中，但是我不完全知道这是如何解决该问题的。您能详细说明一下吗？

— PieBie

这不能解决实际问题。问题是，#D2B48C 会看起来不同在不同的显示器，而问题是如何解决。

— 管