Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

contrast-color()

contrast-color() は CSS の関数で、color 値を取ってコントラストの高い色を返します。この関数はふつう、WCAG AA の最小コントラスト（英語）を保証します。ブラウザーは異なるより良いアルゴリズムを可能性もあります。

contrast-color() 関数を使用すると、テキストの色を指定して、自動的に対照的な背景色を生成したり、その逆を行ったりすることができます。これにより、背景色とテキスト色の組み合わせを保守する必要を避けることができます。

カラー関数コントラスト

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.types.color.contrast-color`			146	26		26

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

.dynamic-badge {
  background: var(--badge-color);
  color: contrast-color(var(--badge-color));
}

CSS brightbackground demo.

CSS darkbackground demo.

CSS col-badge demo.

動的な背景色に対する自動テキスト色選択

ユーザーが選択した背景色やテーマカラーに対して、常にWCAG基準を満たすコントラストのテキスト色を自動的に設定できます。

Safari 26とFirefox 146以降でのみサポートされており、ChromeとEdgeでは未実装です。実用にはポリフィルまたはフォールバックが必要です。