`contrast-color()` 関数を使用した自動コントラスト調整

コントラスト比とは、テキストや要素の前景色と背景色の明るさの差を数値化したものです。ウェブアクセシビリティの観点から、十分なコントラスト比を確保することは重要です。視覚障害のあるユーザーや高齢者にとって、低コントラストのテキストは読みづらく、情報を理解するのが難しくなります。また、屋外の強い日差しの下といった環境条件によっても、コントラストの重要性が増します。

WCAG（Web Content Accessibility Guidelines）の基準では、最低限のコントラスト比を以下のように定めています。

静的に色を指定する場合はあらかじめ上記の基準を満たすように色を選択することが求められますが、動的に色が変わる場合やユーザーがカスタムテーマを使用する場合など、常にコントラスト比を確保するのは難しいことがあります。例えば GitHub のラベルはユーザーが自由に色を選択できるため、常に同じテキスト色を使用していると、コントラスト比が十分とならないことがあります。

このような状況では、hsl() 関数を使用して、背景色に対して十分なコントラスト比を持つテキスト色を動的に生成することができます。GitHub のラベルの例では、背景色の HSL 値を使用して、テキスト色の明度を調整することで、常に十分なコントラスト比を確保しています。

.label {
  color: hsl(
    var(--label-h),
    calc(var(--label-s) * 1%),
    calc((var(--label-l) + var(--lighten-by)) * 1%)
  );
}

ただしこのような方法は、背景色の HSL 値を正確に把握し、適切な計算を行う必要があるため、実装が複雑になることがあります。CSS ネイティブな方法でコントラスト比を自動的に調整する方法として、contrast-color() 関数があります。

contrast-color() 関数の概要

contrast-color() 関数は、指定した色に対して white もしくは black のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数です。例えば contrast-color(blue) と指定すると、青色に対してコントラスト比が高い方の色（この場合は white）が返されます。一方で contrast-color(yellow) と指定すると、黄色に対してコントラスト比が高い方の色（この場合は black）が返されます。white と black のコントラスト比が同じ場合には white が返されます。アルゴリズムはブラウザの実装により異なる可能性があります。

.element {
  /* data- 属性から背景色を取得 */
  --bg-color: attr(data-bg-color type(<color>));
  background-color: var(--bg-color);
  /* white と black のどちらが bg-color に対してコントラスト比が高いかを自動的に判断して適用 */
  color: contrast-color(var(--bg-color));
}

まだすべてのブラウザでサポートされているわけではないため、実際に使用する場合には @supports を使ってフォールバックを用意しておくと良いでしょう。

.element {
  background-color: var(--bg-color);
  color: white;
}
 
@supports (color: contrast-color(red)) {
  .element {
    color: contrast-color(var(--bg-color));
  }
}

Chrome v147 以降で contrast-color() 関数が機能していることが確認できます。

prefers-color-scheme: dark のようなダークモードの切り替えに合わせて、背景色が変わる場合などにも、contrast-color() 関数を使用することで、常に十分なコントラスト比を確保するという使い方もできます。

:root {
  --bg-color: white;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
  }
}
 
.element {
  background-color: var(--bg-color);
  color: contrast-color(var(--bg-color));
}

black か white どちらかの値しか返さない制限を回避するために、color-mix() 関数を組み合わせて、より多様なコントラストカラーを生成する方法も考えられます。例えば、contrast-color() 関数で得られた色と背景色を color-mix() 関数で色を混ぜることで、単に白黒ではない色を生成することができます。

.element {
  --bg-color: oklch(50% 0.1 270);
  background-color: var(--bg-color);
  /* contrast-color() 関数で得られた色と背景色を color-mix() 関数で混ぜる */
  color: color-mix(
    in srgb,
    contrast-color(var(--bg-color)) 80%,
    var(--bg-color) 20%
  );
}

ただし、元の背景色の割合（ここは 20%）を増やすと、コントラスト比が下がる可能性があります。この手法を使用する場合には、コントラスト比が十分であることを確認するために、WCAG のコントラスト比チェッカーなどを使用してテストすることをおすすめします。

もしくは、if() 関数を使用して、black と white を条件に異なる色を返す方法も考えられます。この場合も、コントラスト比が十分であることを確認するために、テストを行うことが重要です。

/**
* style() クエリを使用した時に、ブラウザが正しく値を <color> 型として判定できるように
* --contrast-color カスタムプロパティに syntax: "<color>" を指定しておく必要がある
*/
@property --contrast-color {
  syntax: "<color>";
  initial-value: white;
  inherits: true;
}
 
.element {
  --bg-color: attr(data-bg-color type(<color>));
  background-color: var(--bg-color);
  --contrast-color: contrast-color(var(--bg-color));
  /** if は条件が true の場合は first、false の場合は second を返す関数 */
  color: if(
    style(--contrast-color: black): oklch(43.5% 0.029 321.78) ;
      else: oklch(86.9% 0.005 56.366)
  );
  padding: 1rem;
}

既知の制限と注意点

contrast-color() 関数を使用しても、結果として得られる色の組み合わせが必ずしもアクセシブルではないことがあります。例えば背景色に #2277d3 のような中間色を contrast-color() 関数に渡した場合、コントラストカラーとして black を返します。たしかに WCAG 2 のコントラスト比チェッカー で調べてみると black は 4.64:1 に対して white は 4.51:1 となり、数値上は black の方がコントラスト比が高いことになります。しかし、実際の視覚的な印象としては、white の方が見やすいと感じる人も多いでしょう。これは、コントラスト比の数値だけではなく、色の特性や人間の視覚の特性も考慮する必要があるためです。

WCAG 3 で採用が検討されている APCA（Advanced Perceptual Contrast Algorithm）では、コントラスト比の計算方法が変更され、より人間の視覚に近い評価ができるようになる予定です。将来的に contrast-color() 関数が APCA に対応するようになれば、より適切なコントラストカラーが返されるようになることが期待されます。現時点では contrast-color() 関数に中間色を渡すべきではないということを覚えておくと良いでしょう。

たとえ contrast-color() 関数のアルゴリズムが改善されたとしても、まだ完全にアクセシビリティを保証するものではないことに注意が必要です。コントラスト比は文字の大きさや太さ、フォントの種類などによっても影響を受けるため、contrast-color() 関数を使用する際には、他のアクセシビリティのベストプラクティスも併せて考慮することが重要です。

またより高いコントラスト比を希望する prefers-contrast: more メディアクエリが指定されている場合は異なるスタイルを適用するなど、ユーザーのアクセシビリティのニーズに合わせた柔軟な対応も検討すると良いでしょう。

まとめ

• contrast-color() 関数は、指定した色に対して white もしくは black のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数である
• 動的に色が変わる場合やユーザーがカスタムテーマを使用する場合など、常にコントラスト比を確保するのが難しい状況で役立つ
• white か black どちらかの値しか返さない制限を回避するために、color-mix() 関数や if() 関数を組み合わせて、より多様なコントラストカラーを生成する方法もある
• ただし、contrast-color() 関数を使用しても、結果として得られる色の組み合わせが必ずしもアクセシブルではないことがあるため、他のアクセシビリティのベストプラクティスも併せて考慮することが重要である

参考

• contrast-color() - CSS | MDN
• CSS Color Module Level 5
• Success Criterion 1.4.3 Contrast (Minimum)
• How to have the browser pick a contrasting color in CSS | WebKit
• una.im | Automated accessible text with contrast-color()
• una.im | contrast-color() beyond black & white