CSSのcolor-contrast()関数で自動的に読みやすい文字色を選ぶ実践テクニック

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

デザインの仕事をしていると、避けて通れないのが「色のコントラスト問題」です。
例えば「背景が#0066ccだけど、文字は白でいいかな？黒がいい？」といった判断、日々していませんか？

そんなとき、2024年に入りついに登場したのが、
CSS Color Module Level 5 で追加されたcolor-contrast()関数です。

これは背景色とのコントラスト比に基づいて、最も読みやすいテキストカラーを自動選出してくれるという夢のような関数。

JSライブラリもARツールも不要、純CSSで実現できるUX改善術を、今回は解説していきます！

color-contrast()とは？

color-contrast() は、指定した背景色に対して候補の中から最もコントラスト比が高くなる色を自動的に選ぶCSS関数です。

基本の構文

使い方はとてもシンプルです。

 color: color-contrast(white vs black, red, blue); 

このように書くと、背景がwhiteのときにblack, red, blueの中で最もコントラスト比が高い色が自動で選ばれます。

サンプル：動的な背景に対応するテキスト色

例えば以下のようなCSSなら、背景の色が変化しても自動で最適な文字色を選んでくれるUIが作れます。

.dynamic-text { 
background-color: var(--theme-bg); 
color: color-contrast(var(--theme-bg) vs black, white); 
padding: 1rem; 
} 

候補色に優先度を付けるには？

WCAGに準拠した 最低限のコントラスト比 を保証したい場合、
to キーワードと AA / AAA を併用することで、合格ライン以上の候補だけに絞り込み可能です。

 color: color-contrast(white to AA vs black, gray, red); 

この例では、AA準拠の中で最も良いコントラストの色が選ばれます。
グレーや赤が不合格なら自動的に black にフォールバックされます。

注意点：現時点では対応ブラウザに制限あり

この便利な color-contrast() 関数ですが、
2025年7月時点では、Chrome 114+ / Edge / Safari Technology Preview など一部限定の実装です。
Firefoxや旧ブラウザではエラーになる可能性もあります。
そのため、現場で採用する際はフォールバックを含めた設計をしましょう！

.my-text { 
color: black; /* fallback */ 
color: color-contrast(var(--bg) vs black, white); 
} 

まとめ

satokotadesignキャンペーン実施中！