contrast-color()

指定した色に対して十分なコントラスト比を持つ色をブラウザが自動計算します。動的なテーマやユーザーがカスタマイズ可能な背景色に対して、常に読みやすいテキスト色を提供するのに最適です。アクセシビリティの要件であるコントラスト比の確保を、手動計算なしでCSSレベルで自動化できる画期的な機能です。

カラー関数コントラスト

概要

Chrome 未対応

Edge 未対応

Safari 26+

Firefox 146+

Chrome Android 未対応

Safari iOS 26+

Firefox Android 146+

CSS

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

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

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

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