メリハリがない——コントラストで階層を作る

結論

メリハリ（視覚的階層）は気合いではなくサイズ・フォントウェイト・色（コントラスト）の3レバーで機械的に作る。プロが最初にやるのは主役を巨大化することではなく、競合する副要素を意図的に弱める（背景に近づけてコントラストを下げる）こと。弱化はウェイトを細くするのではなく、不透明度やグレー階調・サイズで段階化し、操作要素だけはWCAGの下限を割らない——これだけで平板な画面に焦点が生まれる。

01 — 3レバーで階層を作る（サイズだけに頼らない）

階層は「サイズ・font-weight・色」の3つで作る。サイズ1本に頼ると主役が巨大化し副役が極小化してバランスが崩れる。サイズ差は控えめにして、ウェイト（600/700）と色コントラストを併用するのがプロの配合だ。

blogNotes from Refactoring UI

02 — 主役を強めず脇役を弱める（emphasize by de-emphasizing）

主要素が既に十分大きいのに散漫に見えるなら、焦点を盛るのではなく競合する副要素のコントラストを背景方向へ落とす。これが最も上品な手法だ。二次テキストは明背景で黒87%→60%→38%、暗背景で白100%→70%→50%に段階化する。

primaryText legibility — Material Design

03 — 弱化はウェイトでなく色とサイズで（400未満は禁止）

UIで400未満のウェイトは細すぎて安っぽく、可読性が落ちる。弱めたいときはウェイトを下げるのではなく色を薄く（グレー階調）するかサイズを下げる。逆に低コントラストの要素を少し立てたいときだけ600/700を足す。通常は400/500の間で運用する。

blogNotes from Refactoring UI

04 — 色背景ではグレー禁止、透過白か同hueで弱める

グレーが効くのは「白背景でコントラストを下げている」からに過ぎない。色背景にグレーを乗せると濁って（washed out）汚く見える。色背景の二次テキストは白文字のopacityを下げて背景を透かすか、背景と同じhueでsaturation/lightnessだけ調整した色を使う。

blogRefactoring UI — 7 Practical Tips for Cheating at Design

05 — ラベルは値と同格にしない

「価格：」「日付：」などのラベルは副次情報だ。値と同じ濃さ・サイズだと階層が潰れ、視線が散る。ラベルは小さく・低コントラスト・軽めにして、値を主役に立てる（そもそもラベルは最後の手段で、省けるなら省く）。

blogBook summary: Refactoring UI — sglavoie.com

06 — F字を壊して焦点へ誘導する

誘導シグナルのない「壁のようなテキスト」だと、ユーザーは最小努力のF字スキャンに落ち、最初の数行と各行の左端しか拾わない。重要点を冒頭2段落に前置きし、見出しで区切り、キーワードを太字化し、関連要素を枠や背景でグループ化してスキャン経路を断ち切る。

primaryF-Shaped Pattern of Reading on the Web — NN/g

実装スニペット

/* 明背景の3段階テキスト階層（Material の emphasis レベル） */
:root{
  --text-high: rgba(0,0,0,.87);     /* 見出し・主テキスト */
  --text-medium: rgba(0,0,0,.60);   /* 二次・メタ・ヒント */
  --text-disabled: rgba(0,0,0,.38); /* 無効・補助の最弱 */
}
.title { color: var(--text-high);   font-weight: 700; font-size: 1.25rem; }
.body  { color: var(--text-high);   font-weight: 400; }
.meta  { color: var(--text-medium); font-weight: 400; font-size: .875rem; }
.label { color: var(--text-medium); font-weight: 500; font-size: .75rem;
         text-transform: uppercase; letter-spacing: .04em; }

/* 暗背景の階層（白の不透明度。二次/無効を明背景より高めに） */
.dark{
  background:#121212;
  --on-dark-high:     rgba(255,255,255,1);    /* 100% */
  --on-dark-medium:   rgba(255,255,255,.70);  /* 二次 70% */
  --on-dark-disabled: rgba(255,255,255,.50);  /* 50% */
}
.dark .title { color: var(--on-dark-high); }
.dark .meta  { color: var(--on-dark-medium); }

/* 色背景の二次テキスト（透過白 or 同hue。グレーは使わない） */
.banner{ background:#1e7a46; color:#fff; }              /* green hero */
.banner .subtext     { color: rgba(255,255,255,.75); }  /* 方法1: 透過白で背景を透かす */
.banner .subtext--hue{ color:#a7d8bd; }                 /* 方法2: 同hueで L/S だけ調整 */

/* F字を壊す見出し階層＋キーワード強調 */
.prose h2{ font-size: clamp(1.5rem,3vw,2rem); font-weight:700; line-height:1.3; margin:2em 0 .5em; }
.prose p { max-width: 65ch; color: rgba(0,0,0,.87); }
.prose strong{ font-weight:600; }                       /* キーワードを太字化 */
.prose .lead { font-size:1.125rem; }                    /* 冒頭2段落をやや大きく前置き */
.callout{ background:#f4f6f8; border-left:4px solid #1e7a46;
          padding:1rem 1.25rem; border-radius:6px; }    /* 関連要素をグループ化 */

チェックリスト

• 階層を「サイズ・ウェイト・色」の3レバーで作っている（サイズ1本に依存していない）
• 散漫なら主役を盛る前に、競合する副要素のコントラストを落とした
• 二次テキストを明背景87/60/38%、暗背景100/70/50%で段階化した
• 弱化に font-weight 400未満を使っていない（弱めるのは色とサイズ）
• 色背景の二次テキストはグレーでなく透過白か同hueで処理した
• ラベルは値より小さく・軽く・低コントラストにした（または省いた）
• 本文・操作要素は通常4.5:1／大テキスト・UIは3:1を満たしている
• 長文は冒頭2段落に要点を置き、見出し・太字・グループ化でF字を壊した
• 階層に使う色・ウェイトは2〜3種に絞った

限界 / 出典

primaryText legibility — Material Design

primaryThe type system — Material Design

primaryF-Shaped Pattern of Reading on the Web — Nielsen Norman Group

primaryWebAIM: Contrast Checker

blogNotes from Refactoring UI (GitHub gist)

blogRefactoring UI — 7 Practical Tips for Cheating at Design

blogBook summary: Refactoring UI — sglavoie.com

blogWCAG 2 Colour Contrast Guidelines

primarymaterial-components-web / mdc-theme README