WCAG色コントラストの計算方法と合格基準

コントラスト比は「読みやすく見えるかどうか」という感覚的な判断を、誰でも基準と照らし合わせられる客観的な数値に変えてくれます。

コントラスト比の計算式

コントラスト比は (L1 + 0.05) / (L2 + 0.05) で計算されます。L1は明るい方の色の相対輝度、L2は暗い方の色の相対輝度です。結果は1:1(同一色)から21:1(純粋な黒と白)の範囲になります。

相対輝度は単純なRGB平均ではない

輝度はガンマ補正されたRGB各チャンネルに、およそ赤21%・緑72%・青7%という不均等な重みをかけて計算されます。これは人間の目が赤や青より緑の光にはるかに敏感なためです。

通常テキストのAA基準:4.5:1

もっとも一般的に求められる基準であるWCAG 2.1レベルAAでは、通常の本文テキストに最低4.5:1のコントラスト比が必要です。

大きいテキストのAA基準:3:1

「大きい」とみなされるテキスト(おおよそ18pt以上の標準ウェイト、または14pt以上の太字)は、大きいこと自体が読みやすさを助けるため、AA基準では3:1で足ります。

より厳しい任意基準のAAA

レベルAAAでは基準がさらに引き上げられ、通常テキストで7:1、大きいテキストで4.5:1が求められます。多くの準拠基準では必須ではありませんが、特に読みやすさが重要な場面では推奨されます。

テキスト以外の要素にも独自の基準がある

WCAG 1.4.11では、ボタンの枠線やフォーム入力欄の輪郭など、意味を持つグラフィックやUI部品について、隣接する色との間で3:1のコントラスト比が求められ、テキストの基準とは別に扱われます。

コントラスト比は好みの問題ではない理由

同じ2色の組み合わせでも、ある人には「十分読める」と感じられ、弱視や色覚特性を持つ人には実際に判読困難な場合があります。この計算式は主観的な判断を、人間の目が色域全体で輝度をどう異なって知覚するかを反映した客観的な数値に置き換えることで、デザイナーとレビュアーが共有できる検証可能な目標を提供します。

基準を満たさない配色の直し方

もっとも確実な方法は、暗い色をさらに暗く、または明るい色をさらに明るくして基準を超えるまで調整することです。色相だけを変えても数値はあまり動かないことが多いためです。また、通常状態だけでなく、反転表示やホバー時の配色もあわせて確認することが重要です。初期状態は基準を満たしていても、操作時の状態が基準を満たしていない場合があります。

よくある質問

文字サイズによって基準は本当に変わるのか?

はい。大きく太い文字は背景との区別がもともとつきやすいため、WCAGの定める基準を満たす「大きいテキスト」には、通常より低い基準(4.5:1ではなく3:1)が設定されています。

コントラスト比は高ければ高いほど良いのか?

アクセシビリティ準拠という観点では、必要な基準を満たしているかどうかが重要で、AAAはより厳格な任意の目標です。ただし、純粋な黒と白のような極端に高いコントラストは、長時間の読書で目の疲労を招くこともあるため、多くのデザイナーはAAを無理なく快適な基準として扱っています。