Interface Lab
返回知识库
Typography Color Accessibility

色彩角色系统

颜色应先定义角色,再选择具体色值,避免一个颜色承担太多含义。

设计原则

主色、背景、边框、文字、状态和强调色都应有稳定职责。

原则

主色、背景、边框、文字、状态和强调色都应有稳定职责。

设计动作

输出色板时按角色命名;控制主色面积,搭配中性色和状态色,避免整页单色系。

正反例

正向示例:设计系统、SaaS 后台、知识库、表单。 反向示例:主色同时表示链接、成功、选择和危险。

适用场景

设计系统、SaaS 后台、知识库、表单。 需要亮/暗或多主题扩展。

来源提示

来源提示:综合 W3C WCAG 2.2、Apple Accessibility、IBM Carbon Accessibility 和主流设计系统可访问性实践整理。 WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/

Agent 指令

输出色板时按角色命名;控制主色面积,搭配中性色和状态色,避免整页单色系。