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

W3C の WCAG (Web Content Accessibility Guidelines) では、レベル AA として通常テキストに 4.5:1 以上、大きなテキストに 3:1 以上を要求します (達成基準 1.4.3)。レベル AAA はさらに厳しく、通常テキストに 7:1 以上、大きなテキストに 4.5:1 以上です (同 1.4.6)。ここでいう「大きなテキスト」は 18pt 以上、または太字なら 14pt 以上を指します。CSS の px に直すと 1pt = 1/72 インチ・1px = 1/96 インチなので、18pt = 24px、14pt = 約 18.7px です。16px の本文は「大きなテキスト」に入らないため、ほぼすべての本文は 4.5:1 側の基準で判定されます。この 4 つの数値は WCAG 2.0 から 2.2 まで変わっていません。

テキスト以外にも基準があります。達成基準 1.4.11 は、操作に必要な UI 部品の境界や状態表示、内容の理解に必要な図形に対して、隣接する色との比 3:1 以上を求めます。フォームの枠線、フォーカスリング、アイコン、グラフの系列色などが対象で、本文の色だけ整えて UI 部品を見落とすのはよくある抜けです。

日本の JIS X 8341-3:2016 は WCAG 2.0 と一致する内容の規格で、コントラストの達成基準の値も同じです。公的機関向けの運用ガイドラインでは AA レベルへの対応が求められていますが、JIS 自体は任意規格であり、法律が JIS への準拠を直接義務付けているわけではありません。「JIS で義務」と言い切らず、調達仕様書や自社のアクセシビリティ方針で何を約束しているかを確認するのが実務上の判断基準になります。

コントラスト比の計算には、色の相対輝度 (relative luminance) を使用します。計算式は (L1 + 0.05) / (L2 + 0.05) で、L1 は明るい方、L2 は暗い方の相対輝度です。相対輝度は RGB 値から sRGB のガンマ補正を考慮して算出するため、単純な RGB 値の差とは異なります。そのため見た目の「中間のグレー」は数値上かなり暗い側に寄ります。白背景 (#ffffff) に対する実測値は、#333333 が 12.63:1、#595959 が 7.00:1、#767676 が 4.54:1、#999999 が 2.85:1 です。つまり #767676 が AA のほぼ境界、#999999 は本文には使えません。Chrome DevTools、axe、Lighthouse などのツールで個別に確認できます。

ダークモード対応では、ライトモードとダークモードの両方でコントラスト比を確認する必要があります。同じグレーでも背景が変われば比は大きく動きます。#aaaaaa は黒背景 (#000000) 上では 9.04:1 で AAA を満たしますが、白背景上では 2.32:1 で AA にも届きません。逆に、ライトモードで安全だった濃いグレーはダークモードで背景に沈みます (#333333 と #1a1a1a の組み合わせは 1.38:1)。CSS カスタムプロパティで両モードの色を別々に管理し、それぞれで検証するのが確実です。半透明の文字色 (rgba や opacity) を使っている場合は、指定値ではなく背景と合成した後の実効色で計算しなければ実態と合いません。画像やグラデーションの上に載せた文字は、最も条件の悪い部分で判定します。

よくある誤解として、コントラスト比が高ければ高いほど良いというものがあります。純黒と純白 (21:1) では文字がにじんで見える (ハレーション) と訴える利用者もおり、本文にわずかに明度を落としたグレーを使う設計は珍しくありません。ただしこれは規格の要求ではなく設計上の選択であり、下げすぎれば基準割れになります。上限を狙って調整するより、AA を確実に超える範囲で読み味を選ぶ、という順序で考えるほうが安全です。

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