なぜcontrast-color()が必要なのか
Webサイトを制作していると、背景色に応じてテキストの色を自動で変えたい場面に遭遇します。例えば、ユーザーがテーマカラーを自由に変更できる設定画面や、ダークモード/ライトモードに対応したダッシュボードなどです。このとき、私たちは以下のような課題に直面します。
- 背景が暗いならテキストを明るく、背景が明るいならテキストを暗くしたい。
- WCAG（Web Content Accessibility Guidelines）のコントラスト比を満たす必要がある。
- 色の組み合わせを毎回手動で定義するのは非効率。
この課題を解決するために、CSS Color Module Level 5ではcontrast-color()という関数が提案されています。この関数は背景色を引数として受け取り、最もコントラストが高い黒(#000)または白(#fff)を自動的に返します。つまり、背景色だけを定義すれば、テキスト色はブラウザが自動的に選択してくれるのです。
この記事では、contrast-color()の基本的な文法と実践的な使い方、そして現在の制限について詳しく解説します。特に、アクセシビリティ（Web標準）に関心があるフロントエンドエンジニアにとって、この関数の将来性は注目に値します。
なお、CSSアクセシビリティに関するさらに詳しい情報は、CSS Color-Contrast()でアクセシブルなテーマデザインを管理するの記事も参考にしてください。
contrast-color()の基本文法と使い方
contrast-color()関数の文法は以下のとおりです。
/* カスタム変数を使用 */
contrast-color(var(--base-background));
/* 色の値を直接渡す */
contrast-color(#34cdf2);
contrast-color(green);
この関数は単一の引数（色）のみを受け取り、その色と最もコントラストが高い色を返します。もし黒と白のコントラストが同じ場合は、デフォルトで白を返します。
実践例: 複数のテーマカラーを管理する
従来は、各テーマごとにテキスト色を個別に指定する必要がありました。
:root {
--primary-text: #f1f8e9;
--primary-bg: #2d5a27;
--secondary-text: #311b92;
--secondary-bg: #d1c4e9;
--tertiary-text: #002b36;
--tertiary-bg: #ff5722;
}
.primary {
color: var(--primary-text);
background-color: var(--primary-bg);
}
.secondary {
color: var(--secondary-text);
background-color: var(--secondary-bg);
}
.tertiary {
color: var(--tertiary-text);
background-color: var(--tertiary-bg);
}
しかし、contrast-color()を使用すると、背景色のみを定義し、テキスト色は自動でコントラストのある色を選ぶことができます。
:root {
--primary: #2d5a27;
--secondary: #d1c4e9;
--tertiary: #ff5722;
}
.primary {
color: contrast-color(var(--primary));
background-color: var(--primary);
}
.secondary {
color: contrast-color(var(--secondary));
background-color: var(--secondary);
}
.tertiary {
color: contrast-color(var(--tertiary));
background-color: var(--tertiary);
}
このようにすると、コードが大幅に簡潔になり、後でテーマカラーを変更してもテキスト色を個別に修正する必要がなくなります。特にカスタムテーマ機能を提供するサービスで重宝します。
ブラウザサポートがまだ不十分な場合: フォールバック戦略
現在（2025年時点）、contrast-color()はまだドラフト段階であり、ブラウザサポートは限定的です。そのため、実際のプロジェクトに適用するには、@supportsルールを活用してフォールバックを用意するのが安全です。
.card {
--bg-color: #2d5a27;
background-color: var(--bg-color);
/* デフォルトのフォールバック */
color: ghostwhite;
}
/* 関数がサポートされている場合のみ適用 */
@supports (color: contrast-color(red)) {
.card {
color: contrast-color(var(--bg-color));
}
}
これにより、サポートしていないブラウザでは基本色が適用され、対応環境では自動コントラスト色が適用され、段階的な拡張（プログレッシブエンハンスメント）を実現できます。
contrast-color()の制限と注意点
contrast-color()は便利ですが、現在の仕様ではいくつか残念な点があります。
1. 黒または白のみを返す
関数は黒と白のどちらか一方のみを返します。デザイン上、より多様な色が必要な場合や、黒と白だけでは十分なコントラストを確保できない場合は、手動で色を指定するのが良いでしょう。
2. コントラストが同じ場合は常に白
黒と白のコントラストが同じ色（例: 中間グレー）では、常に白を返します。これは意図と異なる場合があります。
3. 画像やグラデーションには使用できない
この関数は色の値のみをサポートするため、背景画像やグラデーション上のテキストには適用できません。グラデーションを使用する場合は、中間色に対するコントラストを保証できないため注意が必要です。
4. フォントサイズと太さを考慮しない
WCAGの基準は、コントラスト比だけでなく、フォントサイズや太さによっても基準が異なります。しかし、現在のcontrast-color()はこれらの要素を一切考慮しません。例えば、小さなテキストはより高いコントラストが必要ですが、関数は常に同じ基準で色を選択します。
5. ブラウザサポート不足
実際に使用可能なブラウザがまだ多くありません。特に日本のWeb環境では、依然として古いブラウザのユーザーがいるため、この関数にのみ依存することは危険です。
これらの制限を考慮すると、現在は単純なUIコンポーネント（例: バッジ、ボタン）に限定して使用するか、常にフォールバックを含む戦略が必要です。
日本市場での適用コンテキスト
日本では、大手企業や官公庁のWebサイトでJIS X 8341-3などのアクセシビリティ規格への対応が求められています。contrast-color()がブラウザで広くサポートされれば、一貫したアクセシビリティの維持に大きく貢献するでしょう。
特にダークモードをサポートするサービスで有用です。システム設定に応じて背景色が変わる場合、テキスト色を自動的に調整してくれるため、開発者の手動作業が減ります。ただし、まだブラウザサポートが限定的であるため、実際のサービスに適用する前に、Azure Red Hat OpenShiftが描くAIプロダクションの未来のような最新技術トレンドを参考に、導入時期を慎重に決定することをお勧めします。
まとめ: 今すぐ使うのは難しいが、将来に備えて知っておきたい関数
contrast-color()は、CSS Color Module Level 5で提案されている便利な関数であり、背景色のみからテキスト色を自動的に選択できるようにします。コードが簡潔になりアクセシビリティも向上しますが、現在の仕様とブラウザサポートの限界により、実務で即座に使用するには時期尚早です。
次のステップとしておすすめの学習方向性は以下のとおりです。
- CSS Color Module Level 5仕様の他の機能（例:
color-mix()、relative colorなど）を調べてみてください。 - Webアクセシビリティの全体的な理解を深めるために、WCAG 2.2ガイドラインを学習してみてください。
- 実際のプロジェクトで
@supportsを活用したフォールバック戦略を練習してみてください。
将来的にこの関数が進化し、多様な色選択やフォントサイズの反映が可能になれば、フロントエンド開発者の生活はさらに便利になるでしょう。それまでは、同様の機能を提供するCSS関数やライブラリを活用してアクセシビリティを維持することをお勧めします。
合わせて読みたい記事: