色
foundationこのデザインシステムで使う色の一覧です。「成功は緑」「エラーは赤」のように色を役割で選ぶ仕組みになっており、文字の読みやすさ（コントラスト）の基準もここで確認できます。
プリミティブカラーは、色の「原料」の一覧です。絵の具のパレットのように、色そのものに名前（slate/500 など）を付けて並べたもの。画面でそのまま使うのではなく、ここからセマンティックカラーを作ります。
プリミティブカラー
9 系統 × 11 段階 ＋ white / black
brand-green / brand-yellow は relay 固有。slate / red / amber / green / blue は Tailwind 標準と一致。
セマンティックカラーは、色を「役割」で選ぶための一覧です。「成功は緑」「エラーは赤」のように用途に名前を付けているため、画面で使うのはこちら。元の色を差し替えても役割名は変わらないので、デザイン変更に強くなります。
セマンティックカラー
7 系統 × 11 段階 — 用途で色を選ぶ
primary / secondary は relay ブランドの 2 色、それ以外は意味ベース（成功・警告・エラー・情報・中立）。
背景
CSS: bg-*
ページ全体・サーフェス・オーバーレイの 3 レイヤー構造。
レイヤー構造
- overlay (最前面)
- surface
- page / page-green
テキスト
CSS: text-*
優先度 (high / middle / low) と用途固有 (placeholder / disabled)、ダーク背景用の inverse。WCAG コントラスト準拠状況は 下のマトリクス を参照。
light
inverse (dark background)
WCAG コントラスト × テキストサイズ
テキストサイズによって要求されるコントラスト比が変わる
WCAG は 大きいテキスト(18pt = 24px 以上、または 14pt = 18.66px 以上の太字) と 通常テキスト(それ未満) で要件を分けている:
通常テキスト
AA: 4.5:1 以上
AAA: 7:1 以上
.typo-xsmall / .typo-small / .typo-medium
大きいテキスト
AA: 3:1 以上
AAA: 4.5:1 以上
.typo-large / .typo-xlarge / .typo-2xlarge / .typo-3xlarge
AA
AAA
AA
AAA
fg-high
18:1
✓
✓
✓
✓
本文・見出し全般。AAA でも安心
fg-middle
10.4:1
✓
✓
✓
✓
本文 default。AAA でも安心
fg-low
4.5:1
✓
✗
✓
✓
AAA 本文 NG。.typo-large 以上なら AAA も OK
fg-placeholder
3.0:1
✗
✗
✓
✗
プレースホルダ専用。本文には使わない
fg-disabled
3.0:1
—
—
—
—
無効化コントロール (WCAG 1.4.3 Note 2 で例外)
fg-high-inverse
18:1
✓
✓
✓
✓
ダーク背景上の見出し・本文
fg-middle-inverse
12:1
✓
✓
✓
✓
ダーク背景上の本文
fg-low-inverse
8:1
✓
✓
✓
✓
ダーク背景上の補助テキスト
凡例: ✓ 使用可 / ✗ 不可 / — 例外扱い。詳細は docs/ACCESSIBILITY.md 参照。
ブランドカラーをテキストに使う時
コントラスト比は前景/背景を入れ替えても同じ。中間色 (500) はテキスト不可
コントラスト比は 前景色と背景色を入れ替えても変わらない。つまり「白地に緑文字」と「緑地に白文字」は同じ比率になる。primary-500 (#30b686) は white と 約 2.57:1 しかなく、どちらの向きでもテキストには使えない。緑をテキストに使うなら濃い段階を選ぶ。
AA
AAA
primary-500
#30b686
2.57:1
✗
✗
primary-600
#1b805e
4.9:1
✓
✗
primary-700
#21644c
7.0:1
✓
✓
primary-800
#14513e
9.2:1
✓
✓
使い分けの結論
- 白背景の緑文字 →
primary-700以上で AAA、primary-600は AA - 緑背景の白文字 →
primary-600以上 (AA) /primary-700以上 (AAA) primary-500は面・装飾 (ボタン塗り等) のみ。テキスト色には使わない