UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Typography Color Accessibility

Link Contrast and Affordance

Link Contrast and Affordance turns a frequent interface judgment into an executable constraint before generation.

linkscontrastaccessibility

Design Principle

Links are navigation promises; users must quickly recognize clickable text in reading flows.

Principle Links are navigation promises; users must quickly recognize clickable text in reading flows.

Design action Body links use sufficient contrast plus underline or clear hover/focus; risky or primary actions should not be text-only links.

Examples Positive example: Docs, knowledge bases, settings copy, and form help text mix buttons and text links. Counterexample: Link color is too close to body text without underline.

Apply when Docs, knowledge bases, settings copy, and form help text mix buttons and text links. Users need to judge state, scope, risk, or next action quickly.

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

Agent Directive

Body links use sufficient contrast plus underline or clear hover/focus; risky or primary actions should not be text-only links.

Apply When

  • Docs, knowledge bases, settings copy, and form help text mix buttons and text links.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Link color is too close to body text without underline.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

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