コントラスト比は、前景色 (テキストやアイコン) と背景色の相対的な明度差を数値で表した比率です。1:1 (差なし) から 21:1 (黒と白) の範囲で表現され、Web アクセシビリティにおいてテキストの可読性を保証するための重要な指標です。

WCAG (Web Content Accessibility Guidelines) 2.1 では、通常テキストに 4.5:1 以上、大きなテキスト (18pt 以上または 14pt 太字以上) に 3:1 以上のコントラスト比を要求しています。レベル AAA ではさらに厳しく、通常テキストに 7:1 以上が求められます。日本の JIS X 8341-3 も同様の基準を採用しており、公共機関の Web サイトでは遵守が義務付けられています。アクセシビリティデザインの書籍で基準を学べます。

コントラスト比の計算には、色の相対輝度 (relative luminance) を使用します。計算式は (L1 + 0.05) / (L2 + 0.05) で、L1 は明るい方、L2 は暗い方の相対輝度です。相対輝度は RGB 値から sRGB のガンマ補正を考慮して算出するため、単純な RGB 値の差とは異なります。Chrome DevTools、axe、Lighthouse などのツールで簡単にチェックできます。

ダークモード対応では、ライトモードとダークモードの両方でコントラスト比を確認する必要があります。ライトモードで十分なコントラストがあっても、ダークモードでは背景色が変わるため基準を満たさなくなるケースがあります。CSS カスタムプロパティを使って両モードの色を管理し、それぞれでコントラスト比を検証するのがベストプラクティスです。

よくある誤解として、コントラスト比が高ければ高いほど良いというものがあります。実際には、コントラストが極端に高い (純黒と純白の組み合わせなど) と、長時間の閲覧で目が疲れやすくなります。本文テキストには #333333 程度のダークグレーを使い、コントラスト比を 7:1 から 12:1 程度に抑えるのが読みやすさの観点では理想的です。

文字数カウントとの関連では、コントラスト比が低いテキストは読みにくく、ユーザーが文字を正確に認識できない原因になります。特に小さなフォントサイズや細いフォントウェイトでは、十分なコントラスト比の確保がより重要になります。文字数カウントツールの UI 設計でも、入力テキストと背景のコントラスト比に配慮することで、ユーザーの作業効率が向上します。カラーデザイン基礎の書籍も参考になります。