CSS contrast-color()関数ジェネレーターとは
CSSのcontrast-color()関数（Baseline 2026）は、指定された背景に対して候補リストから最も高いコントラスト比を持つ色を選択します。contrast-color(background vs color1, color2, ...)のように記述し、背景色と候補色のリストを指定します。この関数は各候補のWCAGコントラスト比を背景に対して評価し、最も良い比を持つ候補を返します。オプションのto maxキーワードは常に最大コントラストの候補を返すよう指示します。これは、読みやすいオーバーレイ、ボタン、バッジのためのJavaScriptベースのテキストカラー切り替えに代わるネイティブCSSの代替手段です。
クイックアンサー
CSS contrast-color(background vs candidates...)を使用して、リストから最も読みやすい色を自動選択します。Chrome 132以上、Edge 132以上、Safari 19以上、Firefox 136以上で動作します。最大コントラスト用のto maxモード、またはブランドカラー優先の順序付きリストモードをサポートします。デザインシステム統合のためにCSSカスタムプロパティと組み合わせて使用します。
Last updated: 2026-05-30
制限事項
- contrast-color()はChrome 132、Safari 19、Firefox 136より前のブラウザではサポートされていません。contrast-color()宣言の前には常にフォールバックカラーを提供し、@supportsを使用して利用可能な場合にのみ関数を条件付きで適用します。
- この関数は相対輝度に基づいてコントラストを評価します。これは人間の色知覚の数学的近似です。同じコントラスト比を持つ2つの色でも、色相、彩度、周囲のコンテキストによって主観的に異なって読める場合があります。
- contrast-color()は候補リストから単一の色を選択します。中間色を生成したり、候補をブレンドしたり、不透明度を調整したりすることはできません。リストから選択する以上のきめ細かい色調整には、CSS color-mix()または手動カラートークンを使用してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- コントラストを測定する背景色を入力します。hex、rgb、hsl、または名前付きカラーが使用できます。
- 候補色を追加します。関数は各候補を背景に対して評価し、最適なものを選択します。to maxモードの優先フォールバックのために候補を並べ替えることができます。
- コントラストモードを選択します。to maxは常に最高コントラストの候補を選択します。省略すると順序付き優先度（最小比率を超える最初の候補が採用）になります。
- 生成されたcontrast-color()式をスタイルシートにコピーし、候補色をデザイントークンの参照に置き換えます。
主な用途
- 背景色や画像に関係なくテキストが読みやすい状態を保つ必要があるヒーロー画像やバナーのテキストオーバーレイをスタイリングする。
- バッジの背景色に基づいてラベルテキスト色を自動調整するバッジおよびタグコンポーネントを構築する。
- 複数のカラーバリアントを記述せずに、ボタンテキスト色がプライマリボタンの背景に適応する動的ボタンシステムを作成する。