Interface Lab
  • Home
  • Agents
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Typography Color Accessibility

Color Role System

Define color roles before values so one color does not carry too many meanings.

colortokensroles

Design Principle

Primary, background, border, text, status, and accent colors need stable responsibilities.

Principle

Primary, background, border, text, status, and accent colors need stable responsibilities.

Design action

Name palette tokens by role; control primary color area, combine neutrals with state colors, and avoid one-note palettes.

Examples

Positive example: Design systems, SaaS consoles, knowledge bases, and forms. Counterexample: Primary color also means link, success, selection, and danger.

Apply when

Design systems, SaaS consoles, knowledge bases, and forms. Light/dark or multi-theme support is needed.

Source notes

Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.

Agent Directive

Name palette tokens by role; control primary color area, combine neutrals with state colors, and avoid one-note palettes.

Apply When

  • Design systems, SaaS consoles, knowledge bases, and forms.
  • Light/dark or multi-theme support is needed.

Avoid

  • Primary color also means link, success, selection, and danger.
  • The page is dominated by one hue family.

Knowledge Metadata

Category
Typography Color Accessibility
Quality
82%
Version
v1
Published
6/6/2026