accessible-contrast

アクセシブルなコントラストの組み合わせ

アクセシブルなテキストと背景の組み合わせに特化したカラースケールを生成します。予測しやすい WCAG 準拠の組み合わせのために、11 段階のスケールを使用します。

使用する場面

• 「アクセシブルな色の組み合わせを作成する」
• 「WCAG 準拠の色が必要」
• 「高コントラストの組み合わせを生成する」
• 「テキストが読みやすいことを確認する」

インストール

npx @basiclines/rampa

11 段階の戦略

なぜ 11 段階なのでしょうか？組み合わせの計算を予測しやすくできるからです。

組み合わせ	インデックス	コントラストレベル
最大	0 + 10	最高（ほぼ白 + ほぼ黒）
AAA 通常テキスト	1 + 9, 2 + 8	7:1 以上の比率
AA 通常テキスト	3 + 7	4.5:1 以上の比率
AA 大きなテキスト	4 + 6	3:1 以上の比率

レシピ

rampa -C "<brand-color>" -L 98:5 --size=11 -O css --name=color

• -L 98:5 により、ほぼ白からほぼ黒までの全範囲を確保します
• --size=11 により、組み合わせに使いやすいインデックス 0～10 を作成します
• 組み合わせは対称になります：0+10、1+9、2+8 など

完全な例

ブランドカラーが #3b82f6 の場合：

rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue

出力：

:root {
  --blue-0: #f8fafc;   /* Near white */
  --blue-1: #f1f5f9;
  --blue-2: #e2e8f0;
  --blue-3: #cbd5e1;
  --blue-4: #94a3b8;
  --blue-5: #64748b;   /* Middle gray */
  --blue-6: #475569;
  --blue-7: #334155;
  --blue-8: #1e293b;
  --blue-9: #0f172a;
  --blue-10: #020617;  /* Near black */
}

コントラストの組み合わせガイド

通常のテキストの場合（最小 4.5:1 - WCAG AA）

/* Light backgrounds with dark text */
.light-subtle {
  background: var(--blue-0);
  color: var(--blue-7);  /* 0+7 = AA */
}

.light-default {
  background: var(--blue-1);
  color: var(--blue-8);  /* 1+8 = AA */
}

.light-strong {
  background: var(--blue-2);
  color: var(--blue-9);  /* 2+9 = AAA */
}

/* Dark backgrounds with light text */
.dark-subtle {
  background: var(--blue-10);
  color: var(--blue-3);  /* 10+3 = AA */
}

.dark-default {
  background: var(--blue-9);
  color: var(--blue-2);  /* 9+2 = AA */
}

.dark-strong {
  background: var(--blue-8);
  color: var(--blue-1);  /* 8+1 = AAA */
}

大きなテキストの場合（最小 3:1 - WCAG AA）

.large-text {
  background: var(--blue-3);
  color: var(--blue-7);  /* 3+7 = AA Large */
}

最大コントラスト

.max-contrast {
  background: var(--blue-0);
  color: var(--blue-10);  /* 0+10 = Maximum */
}

クイックリファレンステーブル

背景	AA 向けテキスト	AAA 向けテキスト
0	7, 8, 9, 10	8, 9, 10
1	7, 8, 9, 10	8, 9, 10
2	8, 9, 10	9, 10
3	8, 9, 10	9, 10
7	0, 1, 2, 3	0, 1, 2
8	0, 1, 2, 3	0, 1, 2
9	0, 1, 2	0, 1
10	0, 1, 2	0, 1

複数の色

複数のブランドカラーに対して、アクセシブルなカラースケールを生成します。

rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue
rampa -C "#22c55e" -L 98:5 --size=11 -O css --name=green
rampa -C "#ef4444" -L 98:5 --size=11 -O css --name=red

すべてのカラースケールで、同じインデックスの組み合わせロジックを使用します。

ヒント

1. -L 98:5 の範囲が重要です。コントラストの全範囲を確保できます
2. 中間値（4、5、6）は、無効状態や控えめな状態に適しています
3. 実際に描画されたコントラストを必ずテストしてください。Stark や axe などのツールで検証できます
4. インデックスの計算（0+10、1+9、2+8）により、テーマ設定を予測しやすくなります
5. ボタンの場合：背景にはインデックス 5～6、テキストには 0～1 を使用します