CSSでブラウザがコントラスト色を自動選択する方法

• CSS contrast-color() は、ボタン背景のように頻繁に変わる色に合わせてブラウザが黒または白のテキスト色を選び、色の組み合わせを個別に管理する負担を減らす
• color: contrast-color(var(--button-color)); のように基準色を渡すと、背景色の変更に応じてより大きなコントラストになる選択肢が再計算される
• 現在の Safari Technology Preview は WCAG 2 のコントラストアルゴリズムを使い、#317CFF の背景では黒テキストを選ぶが、人間の知覚では白のほうが自然に見える場合がある
• この機能はアクセシビリティを自動的に保証するものではなく、パレット、文字サイズ、フォントの太さ、prefers-contrast などのデザイン検証は引き続き必要
• CSS Working Group は、WCAG 3 のコントラストアルゴリズムに関する議論が終わるまで、機能を黒/白の選択に絞って提供しており、より複雑な色選択ツールは今後拡張される可能性がある

---

contrast-color() が減らす色管理の負担

• Web サイトや Web アプリで複数の背景色を持つボタンを作る場合、背景が暗ければ白テキスト、明るければ黒テキストを合わせる必要がある
• 従来は --button-color と --button-text-color を一緒に定義して色のペアを管理する必要があり、大規模プロジェクトや複数チームが関わる環境では、組み合わせを常に正確に保つのが難しい
• contrast-color() は、CSS で基準色を渡すと、ブラウザが黒または白のうちコントラストがより大きい色を選択する

color: contrast-color(purple);

• ボタンには背景色の変数と contrast-color() を一緒に適用できる

button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}

• この方式では、1つの背景色だけを定義してもテキスト色はブラウザがそれに合わせて決める

状態別の色まで1つの変数から派生させる

• Relative Color Syntax を併用すると、基本のボタン色から hover 色を作り、各状態のテキスト色も contrast-color() で計算できる

:root {
  --button-color: purple;
  --hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  text-box: cap alphabetic; /* vertically centers the text */
}
button:hover {
  background-color: var(--hover-color);
  color: contrast-color(var(--hover-color));
}

• 結果は CodePen の例で確認でき、Safari 26.0 以上または対応ブラウザでボタン色を動的に変えて試せる

WCAG 2 ベースの計算が生む不自然な結果

• contrast-color() はアクセシビリティ上のコントラスト問題をすべて自動的に解決するものではない
• ある背景色は、黒と白のどちらに対しても十分なコントラストを作れない場合があり、デザイナー、開発者、テスターによる確認が必要
• 2025年5月時点の Safari Technology Preview 実装は WCAG 2 アルゴリズムを使用している
  • #317CFF の青い背景で、WCAG 2 は黒テキストとのコントラストを 5.45:1 と計算する
  • 同じ背景で白テキストとのコントラストは 3.84:1 と計算される
  • contrast-color() は、より大きい数値である黒を選択する
• 人間の知覚では、この組み合わせでは白のほうが良く見える場合があり、WCAG 2 の色コントラストアルゴリズムは以前から批判されてきた

APCA と WCAG 3 に続くコントラストアルゴリズムの議論

• Accessible Perceptual Contrast Algorithm（APCA） は、WCAG 3 に含まれる可能性がある候補の1つ
• APCA Contrast Calculator は、#317CFF の背景で黒テキストを Lc 38.7、白テキストを Lc -70.9 と評価する
  • APCA スコアで負の値は、テキストが背景より明るいことを意味する
  • コントラストの大きさは、符号を除いた 38.7 と 70.9 で比較する
  • この結果では、白テキストのコントラストのほうが高い
• APCA は単純な数学的比率よりも知覚ベースのコントラストを重視し、人が色や明るさに応じてコントラストを線形には認識しない点を反映している
• CSS 標準はまだ既存アルゴリズムの使用を求めているが、将来的に別のコントラストアルゴリズムが追加され得るという注記を含んでいる
• WCAG 3 でどのアルゴリズムを使うか、候補アルゴリズムのライセンスをどう扱うかは、引き続き議論中

実際のデザインであわせて確認すべき条件

• contrast-color() がより良い色を選ぶことと、十分なコントラストを保証することは別
• 特に中間トーンの色では、アルゴリズムごとの結果差が大きくなる可能性がある
• より高いコントラストを望むユーザー向けに、prefers-contrast メディアクエリを併用できる

@media (prefers-contrast: more) {
  /* styling with more contrast */
}

• 例では、苗木園の Web サイトのブランドボタン背景色として #2DAD4E を使用している
  • APCA 基準では、白テキストとのコントラストは Lc -60.4
  • この値が十分かどうかは、テキストサイズとフォントの太さによって変わる
  • APCA は WCAG 2 の比率の代わりに、Lc -108 から 106 までの単一スコアを使う
• APCA Readability Criterion は Bronze、Silver、Gold レベルの目標を示し、文字サイズと太さの選択を助ける
• 例の計算では、白テキストと #2DAD4E の組み合わせは 24px テキストで font-weight 400 以上なら機能し、font-weight 300 を使うには最低 41px が必要
• より高いコントラストを要求したユーザーには、ライトモードとダークモードで別々の色を指定できる
  • ライトモード: より暗い緑と白テキスト、Lc -76.1
  • ダークモード: より明るい緑と黒テキスト、Lc 75.2

--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
  @media (prefers-color-scheme: light) {
    --button-color: #419543; /* darker green background */
  }
  @media (prefers-color-scheme: dark) {
    --button-color: #77CA8B; /* lighter green background */
  }
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
  font-weight: 500;
}

• 現在の環境では WCAG 2 アルゴリズムが contrast-color() を動かしているため、この例の Web サイトでは使いにくい可能性がある
• ブランド色がより暗い緑で、黒/白の選択が正しく出るプロジェクトでは、今でも有用な場合がある
• enabled/disabled、light/dark mode、prefers-contrast のように、複数の状態やオプションの色を定義する際に contrast-color() は特に役立つ

まず黒/白の選択に制限された理由

• 現在の contrast-color() は、Safari Technology Preview 122 にあった color-contrast() より機能が大幅に単純化されている
• CSS Working Group は、WCAG 3 のコントラストアルゴリズムの議論が終わっていない状態で、まずは基準色と対比する黒または白だけを選ぶツールとして進めている
• 選択肢を黒/白に固定すれば、後で WCAG 2 アルゴリズムが変わっても Web サイトが壊れる可能性を減らせる
• 将来的には、ユーザー定義の色リストからブラウザが選んだり、望むコントラスト水準を指定したりできる、より強力なツールが登場する可能性がある
• contrast-color() はテキスト色だけでなく、背景、境界線など、色を指定するさまざまなプロパティで使用できる