CSS-Tricks が 2026 年 4 月 29 日に contrast() と contrast-color() を取り上げ、CSS Color Module Level 6 で標準化が進む 2 つの新関数が、いよいよ実装フェーズに入りました。「背景色を渡すと、WCAG 基準を満たす最適な前景色が CSS から返ってくる」仕組みで、デザイントークン運用に革命が起きそうな勢いです。
受託の Web 制作では、コーポレートサイトのリブランドや多テーマ対応で 「色を変えるたびにアクセシビリティチェックを手動で回す」苦行が常態化していました。contrast() / contrast-color() はこの運用負荷を CSS 内で解決します。本記事では、受託 Web 制作で投入するときの導入手順と注意点を整理します。
2 つの関数のちがい — contrast() と contrast-color()
両者は名前が似ていますが、役割が異なります。
| 関数 | 役割 | 戻り値 |
|---|---|---|
contrast(c1, c2) | 2 色のコントラスト比を返す | 数値（1〜21） |
contrast-color(bg) | 背景に対し WCAG 基準を満たす前景色を選ぶ | 色値 |
実装上で頻繁に使うのは contrast-color() のほうで、こちらは「黒か白か」を自動選択する想定です。contrast() はメディアクエリや @supports の条件で使うイメージで、「コントラスト比が 4.5:1 を割っていたら警告を出す」用途に向きます。
実装サンプル — デザイントークン × contrast-color()
コーポレートサイトでブランドカラーを CSS カスタムプロパティに集約し、テキスト色は contrast-color() で算出する構成です。
:root {
--brand-primary: #176B87;
--brand-secondary: #001C30;
--brand-accent: #64CCC5;
--on-primary: contrast-color(var(--brand-primary));
--on-secondary: contrast-color(var(--brand-secondary));
--on-accent: contrast-color(var(--brand-accent));
}
.btn-primary {
background: var(--brand-primary);
color: var(--on-primary);
}
.btn-accent {
background: var(--brand-accent);
color: var(--on-accent);
}これでブランドカラーの値を変えるだけで、テキスト色は自動で追従します。リブランドやダークモード対応で「白文字が灰色背景に乗って読めない」という事故が起きません。
ダークモードと相性が良い理由
ダークモード対応で典型的に出る要件は次の 3 つです。
- ライト/ダークでブランドカラーを微調整したい
- ブランドカラー上のテキストはどちらでも読める色にしたい
- ブランドカラーをアクセントにする箇所では別ロジック
これを prefers-color-scheme と contrast-color() で書くと、ロジックが詰みあがります。
:root {
--brand: #176B87;
}
@media (prefers-color-scheme: dark) {
:root {
--brand: #4FA3BD; /* ダークでは少し明るめに */
}
}
.btn {
background: var(--brand);
color: contrast-color(var(--brand)); /* どちらのモードでも読める */
}Webアクセシビリティ対応ガイド で扱った WCAG 2.2 AA のコントラスト比 4.5:1 を手動で監査せずとも、構造的に保証する実装に近づけます。
ブラウザ対応状況とフォールバック戦略
2026 年 4 月時点の対応状況は次のとおりです（Web Platform Baseline ベース）。
| ブラウザ | contrast-color() | contrast() |
|---|---|---|
| Chrome | 試験実装（--enable-features=CSSColorModule6） | 試験実装 |
| Safari Technology Preview | 一部対応 | 未対応 |
| Firefox Nightly | 部分実装 | 未対応 |
つまり本番投入には早すぎる段階で、現実的には次の 3 段階で進めます。
| 段階 | 戦略 | 想定時期 |
|---|---|---|
| 短期 | ビルド時に PostCSS で contrast-color() を静的解決 | 即日〜 |
| 中期 | @supports で対応ブラウザのみ動的計算、未対応は静的フォールバック | 2026 後半 |
| 長期 | Baseline 入り後、PostCSS フォールバックを撤去 | 2027〜 |
PostCSS プラグイン（postcss-color-contrast など）と組み合わせれば、ソースコード上は新関数で書きつつ、ビルド出力では現行ブラウザでも動く CSSにできます。これが最もリスクの低い導入経路です。
デザイントークンと統合する受託のワークフロー
弊社のコーポレートサイト制作では、リブランド案件で次のワークフローを採用しています。
1. デザインチーム
└ Figma の Variables にブランドカラーを定義（ライト/ダーク 2 系統）
2. デザインチーム → 開発
└ Figma Variables を CSS カスタムプロパティに書き出し
3. 開発
└ 前景色は contrast-color() で書く（ビルド時に PostCSS で解決）
4. レビュー
└ Lighthouse + axe で WCAG 2.2 AA を CI チェック
5. 運用
└ ブランドカラーの値を変えるだけで全画面に反映このフローを最初から組んでおくと、コーポレートサイト納品後 1〜2 年で来る「ブランドカラーを微変更したい」「ダークモード対応したい」という要望に、軽い改修でこたえられます。
コスト試算 — リブランド案件への組み込み
中小企業のコーポレートサイトリニューアルで、contrast-color() 前提のデザイントークン運用を組み込むときのレンジ感です。
| パッケージ | 期間 | 価格レンジ | 含むもの |
|---|---|---|---|
| 既存サイトのトークン化 | 2〜3 週 | 60〜120 万円 | デザイントークン抽出 + CSS 書き換え |
| リブランド + ダークモード対応 | 4〜6 週 | 150〜300 万円 | 上記 + デザイン刷新 + ダーク対応 |
| 多ブランド展開（3 ブランド） | 6〜10 週 | 300〜600 万円 | ブランドごとのトークン + CMS 連携 |
コーポレートサイトリニューアルガイド の中でも触れているとおり、リニューアルは運用の作り直しが本体で、contrast-color() のような新標準を取り込むタイミングは多くありません。次の更新で 5〜10 年使える土台を作るのが受託としての価値提供になります。
まとめ ─ アクセシビリティを構造で担保する時代
contrast() / contrast-color() は、「アクセシビリティを構造で担保する」という考え方を CSS の標準に持ち込む変化です。WCAG 監査が手動チェックから “コードで保証する” 領域に移っていく流れを象徴しており、コーポレートサイトの寿命設計でも見逃せない論点です。
弊社では、Web サイト制作・リブランド・ダークモード対応で、デザイントークン × contrast-color() ワークフローを採用しています。「ブランドカラーを変えるたびに監査をやり直したくない」「ダークモードを安く・きれいに対応したい」というご相談は お問い合わせフォーム からお気軽にどうぞ。
