結論

プロのラベルは「原色ベタ塗り＋白文字＋丸ボタン化」を避け、不透明度15〜20%相当のティント背景に同系統の濃い文字色を載せる。柔らかくしたいときは opacity を下げず lightness を上げ hue を明るい側へ回して彩度を保ち、サイズは本文より一段小さく（13px前後）・横>縦パディング・中字（500）で組む。色の濃淡で優先度を、見た目の差で静的バッジとインタラクティブチップを伝え分けるのが「子どもっぽさ」と「成熟」の分岐点だ。

01 — 原色ベタ塗り＋白文字をやめ、ティント背景＋濃い同系色文字に

最も子どもっぽく見える原因がこれ。高彩度の原色に白文字を載せた丸ボタン風バッジは、彩度が暴れてコントラストも不安定になる。プロはパッシブなカテゴリ/タグを 15%ティント背景＋同系統の濃い文字色 に置き換える。背景は彩度を保ったまま薄く、文字は高コントラストを維持するので、画面が静かになり階層も保てる。

DESIGN
✗ 原色ベタ塗り＋白文字＋丸ボタン → 子どもっぽく主張過多
DESIGN
✓ 15%ティント＋濃い同系色文字 → 静かで成熟

blogSteve Schoger — Refactoring UI, CSS Day 2019 (notes)

blogBadge UI design — Setproduct Blog

02 — 柔らかくするときは opacity ではなく lightness/hue で

「淡くしたい」と全体に opacity を掛けると、彩度ごと沈んで washed out になり、かえって安っぽくくすむ。正解は opacity を触らず、lightness を上げて最寄りの明るい hue へ回す こと。彩度を保ったまま明度差だけでコントラストを落とすので、淡くても色がいきいきする（Schoger）。

SUCCESS
✗ ソリッド緑に opacity:.35 → くすんで washed out
SUCCESS
✓ lightnessを上げ明るいhueへ → 彩度を保ち鮮やか

blogSteve Schoger — Refactoring UI, CSS Day 2019 (notes)

03 — ボタン化させない：本文より一段小さく・横>縦パディング・中字

縦パディングが厚く、フォントが大きく bold だと、ラベルが「押せるボタン」に見えて視覚階層が崩れる。ラベルは font-size 13px前後（0.75em）・padding は横0.65em / 縦0.35em の約2:1非対称・ウェイトは Medium(500) が洗練の条件。Bootstrap の .badge、Material Design 3 の Label Large（14px / Medium）がこの寸法の一次的な根拠だ。

NEW
✗ 大きい・bold・厚い縦パディング・影 → ボタンに見える
NEW
✓ 13px / 500 / 横>縦パディング → ラベルとして収まる

primaryBadges · Bootstrap v5.3

primaryChips – Material Design 3

04 — pill一律をやめ、用途別に rounded / pilled / square

完全な丸（pill）を全ラベルに当てると、数字や長文で形が破綻する。標準は rounded（6px）、カウントバッジは pilled（999px）、グリッド整合が要るときは square（3px） と使い分けるのが成熟スタイル。角丸は意味ではなく中身の形に合わせる。

CATEGORY設定が長いラベル3
✗ 全部pill → 長文も数字も同じ形で間延び・破綻
CATEGORY設定が長いラベル3
✓ rounded / square / pilled を用途別に

blogWhat should I consider when creating badge UI design? — Cieden

05 — 色だけで意味を伝えない（テキスト/アイコン/形＋aria-label）

色だけでステータスを表すのは WCAG 1.4.1（Level A）違反で、色覚特性のあるユーザーに伝わらない。テキスト・アイコン・形状を必ず併用し、aria-label も付ける。 さらにバッジ内テキストは4.5:1、境界やアイコンなど非テキスト要素は3:1（WCAG 1.4.11）を満たす。ティント15%背景でもこの比は保証されないので、必ず実色で実測する。

✗ 色ドットだけ → 色覚特性ユーザーに区別不能
✕ Error✓ Success
✓ アイコン＋テキスト＋aria-label → 色なしでも伝わる

blogWebAIM: Contrast and Color Accessibility

blogWCAG 1.4.11 Non-Text Contrast guide — TestParty

06 — 純グレーをやめ、hueで温度を足す（濃淡で優先度を）

彩度ゼロ（S=0）のグレーピルは UI を鈍く不自然に見せる。ニュートラルなステータスでも S≈16% で hue を足す（寒色なら青寄り、暖色なら黄/茶寄り）と、明暗どちらの段でも自然になじむ。そして緊急/未読/エラーだけをソリッドな高コントラスト色（典型は赤）に予約し、色の強度=優先度 を一致させる。

ARCHIVED
✗ S=0 の純グレー → 鈍く生気がない
ARCHIVED
✓ S≈16%・青寄りhue → 温度が乗って自然

blogBadge UI design — Setproduct Blog

blogSteve Schoger — Refactoring UI (notes)

実装スニペット

/* パッシブなティントバッジ（推奨の基本形） */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75em;        /* 本文より一段小さく ≒14px */
  font-weight: 500;          /* boldでなくMedium */
  line-height: 1;
  padding: 0.35em 0.65em;    /* 横>縦の非対称（約2:1） */
  border-radius: 6px;        /* pill一律でなくrounded */
  letter-spacing: 0.01em;
}
.badge--category {
  background: hsl(217 91% 60% / 0.15);  /* 15%ティント */
  color: hsl(217 75% 32%);              /* 濃い同系色 */
}
/* 緊急/未読のソリッド色 & グレーピルへの彩度付与 */
.badge--urgent {
  background: hsl(0 72% 51%);   /* solid red = error/緊急に予約 */
  color: #fff;
  font-weight: 600;
}
.badge--neutral {
  background: hsl(215 16% 93%); /* S=0でなく16%で温度を足す */
  color: hsl(215 19% 35%);
}
.badge--count::after { content: "99+"; } /* ~4字 / 99+キャップ */
/* 写真・ツールバー上で溶けないように surface色ストロークで縁取る */
.badge--on-image {
  background: hsl(0 0% 100% / 0.92);
  color: hsl(222 47% 20%);
  box-shadow: 0 0 0 1.5px var(--surface, #fff); /* 擬似ストローク */
  border-radius: 999px;
}
/* セマンティックトークン（hueでなくpurposeで命名） */
:root {
  /* primitive */
  --blue-600: #2563eb; --red-600: #dc2626; --green-600: #16a34a;
  /* semantic */
  --color-text-error: var(--red-600);
  --color-bg-info:    hsl(217 91% 60% / 0.15);
  --color-bg-success: hsl(142 71% 45% / 0.15);
}
.badge--error { background: hsl(0 72% 51% / 0.15); color: var(--color-text-error); }

チェックリスト

  • カテゴリ/タグは原色ベタ塗り＋白文字でなく、15〜20%ティント背景＋濃い同系色文字になっているか
  • 淡くするとき opacity を下げていないか（lightnessを上げ・明るいhueへ回したか）
  • font-size は本文より一段小さい13〜14px、ウェイトは bold でなく Medium(500) か
  • padding は横>縦の非対称（約2:1）で、ボタンに見える厚い縦パディングになっていないか
  • 角丸は用途別か（標準=rounded / カウント=pilled / グリッド整合=square）、pill一律になっていないか
  • 色だけで意味を伝えていないか（テキスト/アイコン/形＋aria-labelを併用したか）
  • テキスト4.5:1・境界/アイコン3:1を実色で実測したか（ティント15%でも切り上げ不可）
  • ニュートラルバッジが S=0 の純グレーになっていないか（S≈16%で温度を足したか）
  • 緊急/未読/エラーだけソリッド赤に予約し、全バッジを同じ強さで塗っていないか
  • 静的バッジとインタラクティブチップを見た目で区別したか（チップのみ48×48px/間隔8pxを確保）
  • 写真や可変背景の上では surface色1〜2pxストロークで縁取って detach したか
  • 数値バッジは ~4字で 99+ にキャップしたか

限界 / 出典

「15〜20%ティント」「surface色1〜2pxストローク」は主に Setproduct（ブログ）由来の実務的目安で、複数の権威ソースの直接合意ではない。一方 padding .35em / .65em や .75em は Bootstrap の一次実装値、32px/12px/14px Medium は Material Design 3 の一次仕様で信頼度が高い。コントラスト比（4.5:1 / 3:1）は WCAG 準拠で確実だが、ティント15%背景＋濃い文字が常に4.5:1を満たす保証はなく、実色の組み合わせごとに必ず実測が必要（切り上げ不可）。「48×48px・8px間隔」はインタラクティブ要素のみで、静的バッジには適用しない（過大化を避ける）。Schoger の lightness/hue 手法は実務的支持が強いが出典は講演ノート（二次）。角丸の用途別使い分けや3層トークンはチーム規約化が前提で、単発バナー/小規模LPには過剰なことがある。HSL relative color 構文など新CSS機能は、古いブラウザ対象のLPではフォールバックが要る。

blogBadge UI design: Notification, count, and status patterns — Setproduct Blog

secondaryBadges vs. Pills vs. Chips vs. Tags — Smart Interface Design Patterns

blogSteve Schoger — Refactoring UI, CSS Day 2019 (notes)

primaryBadges · Bootstrap v5.3

primaryChips – Material Design 3

primaryTypography – Material Design 3 (type scale tokens)

blogWhat should I consider when creating badge UI design? — Cieden

secondaryWebAIM: Contrast and Color Accessibility

blogWCAG 1.4.11 Non-Text Contrast guide — TestParty

blogColor Consistency in Design Systems — UXPin

primaryPill - Horizon Design System - ServiceNow

blogBadges vs chips/tags — a friendly guide (Bootcamp/Medium)