contrast-color()とは
contrast-color()とは背景色に基づいて最も高いコントラストを持つ文字色（白または黒）をブラウザが自動選択する機能です。
これにより、Webデザインにおけるアクセシビリティ（コントラスト比）の確保や色の変更対応が大幅に簡略化されます。
contrast-color()の使い方
contrast-color()は要素の背景色（background-color）と文字色（color）に同色を指定するだけで簡単に利用できます。
CSS
:root {
--dark: navy;
--light: yellow;
}
/* 背景が濃い色 → 文字は自動で「白」に */
.dark {
background-color: var(--dark);
color: contrast-color(var(--dark));
}
/* 背景が薄い色 → 文字は自動で「黒」に */
.light {
background-color: var(--light);
color: contrast-color(var(--light));
}| 背景が濃い色 | 背景が薄い色 |
前述の例のような明らかに白か黒のどちらが適切かわかる色であれば、contrast-color()を使う必要はありません。
#777777のように白か黒のどちらが適切か判断しづらい色や、ユーザーの操作や設定などで色が変わる要素に使うと自動で適切な色が適用されるので便利です。
Microsoft EdgeとAndroid Chromeは未対応
2026年4月11日現在、contrast-color()はChrome (Androidを除く)、Safari、Firefoxでは使用可能ですが、Microsoft EdgeとAndroid Chromeは未対応です。
次期バージョンでは対応予定ですので、contrast-color()はブラウザ対応されてから使うことを推奨します。
