前端网页设计颜色使用原则

前端网页设计颜色使用原则

1、避免使用大量颜色

在视觉展现上能够用尽量少的样式去实现设计目的，避免毫无意义的使用大量颜色强调视觉重点或对比关系。

少即是多： 在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。

例如 bootstrap 官方案例，配色简单明确，重点突出 https://v5.bootcss.com/docs/examples/

2、确保字体颜色对比度

文本和背景的颜色不应该相同或者相似。文本的清晰度越高，用户越能够快速浏览和阅读。文本颜色如果和背景颜色太接近，就会难以阅读。

W3C建议对正文文本和图像文本的对比度应满足以下要求：

• 小文本的背景对比度应该要达到 4.5：1
• 大文本的对比度应该至少是与背景的 3:1

对于某些视力较差的用户，或者某些显示不良的显示器，投影仪，保证对比度大于 3 可以更好的显示。

可以通过这个网站检查背景和文字的对比度：https://webaim.org/resources/contrastchecker/

Assure adequate color contrast

Color contrast between text and its background must meet required WCAG standards.

The contrast requirements are:

• 4.5:1 for normal text
• 3:1 for large text (>24px)
• 3:1 for UI elements and graphics
• No contrast requirement for decorative and disabled elements

Use an online contrast checker or a Figma plugin to test your contrast.

If you work with the functional colors, this work has already been done for you. We checked all recommended combinations, so you are all set. Accessibility contrast guidelines identified this shortcoming and allowed me to course correct. Vibrant colors were tweaked to hit a 3:1 colour contrast ratio and combined with shape to create further affordance for users where colour identification is a problem.

下面的文本符合颜色对比度的建议，并且在阅读背景颜色方面更易于阅读（对比度 15）。

下面文本颜色对比度不符合建议，不利于根据背景颜色进行阅读（对比度小于3）。

实际项目中也应该保持较高的对比度。这样在某些显示不良的显示器，或者视觉不好的用户，可以有更好的用户体验。

3、不要只依赖于颜色

色盲是一种常见的视觉问题，尤其在男性中更为普遍（8％的男性有色盲）。建议在区分关键信息时，采用除了颜色以外的其他线索。此外，应避免过度依赖红色和绿色来传达信息。

默认红色为警告，黄色为提示，绿色为成功，关键信息也可以使用图标、提示文字、图例来补充颜色的提示。

Show state with more than color

Color vision deficiency is different for different people. To make sure everyone can understand and use your UI you should show state with more than a change in color. For example by using icons or changing the content.

Connect labels to graphs with lines or patterns

For charts and graphs you can position the labels on top or close to each section. You can also use patterns to distinguish different parts.

参考链接

github Primer 字体颜色：https://primer.style/foundations/color

阿里巴巴 ant design 字体颜色：https://ant-design.antgroup.com/docs/spec/font-cn#%E5%AD%97%E4%BD%93%E9%A2%9C%E8%89%B2

W3C 文字颜色：https://www.w3school.com.cn/css/css_colors.asp

网页可访问性原则：https://uxdesign.cc/what-accessibility-taught-me-about-design-a7416da8f4e8

对比度检测：https://webaim.org/resources/contrastchecker/