WCAGコントラストチェック：実践ガイド
公開日 2026-07-15
コントラスト比は単なる準拠チェック項目ではなく、読める文字と読めない文字を分ける違いです。ここでは、それがどのように計算されるか、そして基準値が実際に何を意味するのかを説明します。
なぜコントラストが重要なのか
背景との対比が十分でない文字は、誰にとっても読みにくく、弱視や色覚異常のある人にとってはまったく読めない場合もあります。ウェブコンテンツアクセシビリティガイドライン（WCAG）は、できるだけ幅広い視覚能力の範囲で文字が判読可能であり続けるよう、最低限のコントラスト比を明確に定めています。これを満たすことは、真のユーザビリティ向上であると同時に、多くの法域において一般向けウェブサイトへの法的要件でもあります。
コントラスト比が実際にどう計算されるか
コントラスト比は、文字色と背景色の相対輝度（知覚される明るさ）を比較したもので、1:1（同一、まったくコントラストなし）から21:1（純粋な黒と純粋な白、可能な最大コントラスト）までの比率で表されます。これは単純な明るさの比較ではなく、輝度は赤・緑・青にそれぞれ異なる重みを付ける式を使って計算されます。これは人間の目が同じ強度でも緑を赤や青より明るく感じるためであり、モニターが実際に色をどう表示するかを考慮したガンマ補正も適用されます。これを手計算する必要はありませんが、これが知覚される明るさに関するものであり（単なる生のRGB値ではなく）ということを知っておくと、見た目では十分に区別できそうな中間色が実は基準を満たさない場合があるといった、確かに直感に反する結果を理解する助けになります。
実際の基準値
WCAG 2.1は2つの適合レベルを定義しています。ほとんどの組織が目指す標準であるAAは、通常の文字で少なくとも4.5:1、大きな文字（18pt標準または14pt太字以上と定義）で3:1のコントラスト比を要求します。より厳格なレベルであるAAAは、通常の文字で7:1、大きな文字で4.5:1を要求します。ほとんどの法的アクセシビリティ要件（WCAGを通じて解釈される米国のADAやEUのEN 301 549規格など）はAAを基準として参照しており、AAAは一般的に厳格な要件というより努力目標として扱われます。
よくあるコントラストの間違い
白背景に薄いグレーの文字は、断トツで最もよくある失敗例です。デザインのモックアップでは「クリーン」で「モダン」に見えることが多いのですが、AAに大きく違反しており、多くのユーザーにとって実際に読みにくいものです。フォームフィールド内のプレースホルダーテキストはしばしばコントラストが低すぎますが、入力を始めると消えてしまうため、デザイナーはそれが問題だと気づかないことがよくあります。写真やグラデーションの上に重ねられた文字はリスクが高く、画像の一部ではコントラスト比が基準を満たしても、別の部分では満たさないことがあります。文字の背後に単色のオーバーレイやテキストシャドウを追加するのがよくある対処法です。ブランドカラー、特にパステルカラーや中彩度のブランドパレットは、文字色として使われるとコントラスト要件を満たさないことが多く、文字専用に確保された、より濃いまたは薄いバリエーションが必要になります。
自分の色をチェックする方法
前景色（文字）と背景色を選び、使用している文字サイズに対してAAとAAAの両方の基準値と結果の比率を照合してください。ある組み合わせが基準を満たさない場合、最も信頼できる修正方法は通常、背景を変更するのではなく、文字色を暗くする（明るい背景の場合）か明るくする（暗い背景の場合）ことで基準をクリアさせることです。背景色は文字色よりもブランドアイデンティティと結びついていることが多いためです。