色

アクセシブルな色

ユーザー インターフェース コンポーネントの存在や状態を示すために色だけを使用しないでください。アイコンや形状を使用して区別できるようにします。成功 / エラーを色だけで示さないでください。アイコンまたはテキストを使用します。

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

コントラスト

• 最小コントラスト基準: 通常のテキストでは 4.5:1、大きいテキストやアイコンでは 3:1 を維持します。
• テキスト以外のコントラスト基準を確保する: ユーザー インターフェース コンポーネントの境界と状態のコントラスト比を 3:1 以上に維持します。
  • これには、UI コンポーネントの境界を形成したり、存在を示したりする視覚要素（枠線、背景、ボックスシャドウ、下線）が含まれます（例: 入力フィールドの枠線）。
  • これには、コンポーネント内のアクティブな状態を示す視覚要素（チェックボックスのチェックマークやスイッチのつまみなど）も含まれます。
  • 注意: 3:1 の非テキスト コントラストを満たすことは、ミニマリスト デザインにとって課題となる可能性があります。ソフトなグラデーションや、控えめなインセット / アウトセット シャドウを使用すると、ユーザー補助の要件を満たしながら、視覚的な境界を和らげることができます。
• prefers-contrast は必要な場合にのみ使用する: @media (prefers-contrast: more) は、デザインで低コントラストのアクセント（繊細な枠線、控えめなセカンダリ テキストなど）が使用されており、それを強調する必要がある場合に使用します。すでにベースラインのコントラストを満たしているほとんどのサイトでは、この機能は必要ありません。

ライトとダークのカラーパターン

• ライトとダークのカラーパターンをサポートする: @media (prefers-color-scheme: dark) を優先し、color-scheme CSS プロパティと組み合わせて、フォーム コントロール、スクロールバー、その他の UA レンダリング サーフェスが一致するようにします。詳しくは、ダークモードをご覧ください。

強制カラーモード

• 強制カラーモードのサポート: 強制カラーモード（Windows のハイ コントラスト）では、ブラウザは作成者の色をシステム キーワードでオーバーライドし、background-image、box-shadow、border-image を削除します。@media (forced-colors: active) を使用して、カラー トークンのシステムカラー フォールバックを定義します。
• forced-color-adjust: none は、色が重要な情報である場合にのみ使用します（構文ハイライト表示、カラー選択ツールの見本）。見た目を整えるためだけに forced-color-adjust: none を使用しないでください。
• 枠線、区切り線、状態を伝えるために background-image、box-shadow、border-image に依存しない: これらは強制色（多くの場合、印刷でも）では表示されません。どうしても必要な場合は、強制カラーモードで代替手段（outline や、システムカラー キーワード（CanvasText、LinkText、ButtonText、Highlight、GrayText など）を使用した border など）を用意してください。

色合いを生成しています

色合いを動的に生成する前に、既存の事前定義されたデザイン トークンを使用できるかどうかを確認してください。これにより、デザイナーがより細かく制御できるようになり、一貫性が確保されます。

明るい色または暗い色を動的に生成する必要がある場合:

• oklch/oklab または lch/lab（oklab(from var(--primary) 0.9 a b) など）の明度チャンネルを調整するだけでは不十分です。理論的にはこれが正しい方法ですが、ブラウザはまだ色域マッピングを実装していないため、結果の色は予測できません。
• color-mix() を使用して白または黒と混合できます（oklab が望ましい）。これにより、色は安全に色域内に収まりますが、彩度が過度に低下し、色合いや陰影が薄くなる傾向があります。
• 明度調整を他の方法（color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%) など）と組み合わせて、両者のバランスを取っても構いませんが、明度調整は 30% を超えないようにしてください。