背景に応じたテキスト色のコントラスト調整

読みやすいテキスト色の派生

背景色が動的 (ユーザーテーマ、データ駆動、ランダム生成) な場合、 前景のテキスト色も適応する必要があります。color-mix() はその適応に クリーンな式を提供します：

.chip {
  background: var(--bg-color);
  color: color-mix(in oklch, var(--bg-color), white 92%);
}

これは背景と同じ色相系列に住みつつ、白寄りに大きく引っ張られたテキスト を生成します — 中明度の背景に対する本文には通常十分なコントラストです。

より堅牢なパターン: light-dark()

実プロダクト用途では、新しい light-dark() 関数と組み合わせます：

.chip {
  background: var(--bg-color);
  color: light-dark(
    color-mix(in oklch, var(--bg-color), black 92%),
    color-mix(in oklch, var(--bg-color), white 92%)
  );
}

これでテキストはライトモードでは黒、ダークモードでは白を自動選択します。

WCAG で検証

color-mix() はコントラストを自動チェックしません。前景/背景候補ペア は必ず アクセシビリティ カラーチェッカー を通し、本文には少なくとも 4.5:1、大文字/UI 要素には 3:1 を目標に してください。

限界

任意の色相背景に対しては、専用のハイコントラストテキストトークン (--text-on-brand: #fff) が依然必要な場合があります。color-mix() は派生 UI サーフェスに使い、ブランドクリティカルなペアにはハードコード されたテキスト on カラートークンを残してください。