「サイトの文字が背景と同化して読みにくいと言われた」「アクセシビリティ対応を進めたいが、コントラスト比の調べ方が分からない」——文字と背景の色の組み合わせは、好みで選びがちですが、実は数値で判定できる基準があります。
この記事では、コントラスト比の仕組み（相対輝度）から、WCAG 2.xの達成基準（AA・AAA）、よくある色の組み合わせの比率例、基準を満たすための調整方法まで、初心者向けに計算例つきで解説します。
コントラスト比とは？相対輝度から計算される数値
コントラスト比とは、文字と背景の明るさの差を数値化したもので、1:1（まったく同じ色）から21:1（黒と白）までの範囲になります。
計算のもとになるのは、各色の相対輝度です。これは色の明るさを0（黒）から1（白）に換算した値で、WCAG 2.xではsRGBの値を線形化したうえで、緑を大きく含む次の重みで合成します。
相対輝度 = 0.2126 × R + 0.7152 × G + 0.0722 × B
緑の重みが最も大きいのは、人の目が緑の領域に対して最も感度が高いことによります。コントラスト比は、この相対輝度の明るい方をL1、暗い方をL2として、次の式で求めます。
コントラスト比 = (L1 + 0.05) ÷ (L2 + 0.05)
分母と分子に共通の0.05を足すのは、真っ黒どうしの比が無限大になるのを防ぎ、最も差がある黒と白でちょうど21:1になるようにするためです。
なぜこの基準が必要かというと、若くて健康な目で十分に読める組み合わせでも、低い視覚感度、屋外の反射光、プロジェクターの色落ちといった条件では読めなくなることがあるためです。コントラストの基準は、そうした環境の差があっても情報が届くようにするための下限です。
| 色の組み合わせ | コントラスト比 |
|---|---|
| 白背景 × 黒文字 | 21.00:1 |
| 白背景 × #333333 | 12.63:1 |
| 白背景 × #767676 | 4.54:1 |
| 白背景 × #999999 | 2.85:1 |
| 白背景 × 青（#3B82F6） | 3.68:1 |
基準値：WCAGのAAとAAA
WCAG 2.xでは、文字のサイズと求める水準に応じて、次のコントラスト比が達成基準（成功基準1.4.3・1.4.6）として定められています。
| 水準 | 通常の文字 | 大きい文字（18pt以上、または14pt太字以上） |
|---|---|---|
| AA（レベルAA） | 4.5:1以上 | 3:1以上 |
| AAA（レベルAAA） | 7:1以上 | 4.5:1以上 |
先の表に当てはめると、白背景 × #767676（4.54:1）はAAの4.5:1をわずかに満たしますが、#999999（2.85:1）は満たしません。「うすいグレーの文字が読みにくい」と感じるのは、数値的にも裏づけのある判断です。
「大きい文字」の定義：WCAGでは18ポイント以上、または14ポイント以上の太字を「大きな文字」としています。大きな文字は小さい文字より読みやすいため、基準が3:1に緩和されています。
実践：確認の手順と基準を満たすための調整
確認の手順（3ステップ）
- 文字色と背景色を特定する: CSSのcolorとbackground-colorの値、またはデザインツールのカラーコードを確認します。
- コントラスト比を計算する: 相対輝度を求めて比を計算するか、計算ツールに入力します。
- 基準と比較する: 本文はAA（4.5:1以上）、重要な情報は可能ならAAA（7:1以上）を目安に判定します。
文字以外の要素にも3:1の目安があります
WCAGには文字以外にも、ボタンの枠、入力欄の境界、グラフの凡例など「意味を持つ視覚的要素」に対して、周囲とのコントラストが3:1以上であることを求める基準（1.4.11 非テキストコントラスト）があります。テキストの色は基準を満たしていても、フォームの枠が背景とほぼ同色だと、入力欄だと気づかれない——といった問題を防ぐためのものです。
基準を満たしていても、実際の閲覧環境では読みにくいことがあります。プロジェクターは暗い色がつぶれやすく、屋外のスマホは反射で画面が見えにくくなります。完成後のページは、明るい場所や別の端末でも一度確認しておくと安心です。
基準を満たさないときの調整方法
比が足りない場合の調整は、文字を暗くするか、背景を明るくするかのどちらかです。たとえば白背景に#999999（2.85:1）は基準未満ですが、文字を#767676に変えるだけで4.54:1になります。一回り暗いグレーを選ぶだけで、AAを達成できるということです。
薄い色の使いどころを分ける：薄い色は、入力欄のプレースホルダーや装飾には向いていますが、本文や重要な注記には向いていません。「読ませる文字」は基準を満たし、「装飾」だけを薄くする、と役割を分けると、デザイン性と読みやすさを両立できます。
色だけに頼らない伝え方
コントラストは、色の見え方が異なる利用者（色覚特性、屋外の視認性、老眼など）にとって特に重要です。また、エラー表示を赤だけで伝える、必須項目を色だけで示すといった設計は、色の見え方に左右されない伝え方が必要です。エラーにはアイコンやメッセージを、必須項目には「必須」ラベルを組み合わせることで、色が見えにくい環境でも情報が伝わります。
ツールでコントラスト比を確認する
相対輝度の手計算は手間なので、Tools Hubのコントラストチェッカーを使えば、文字色と背景色を入力するだけでコントラスト比とWCAG各レベルの適合が即座に判定できます。実際の文字の見え方のプレビューも表示され、計算はすべてブラウザ内で完結します。
使い方（3ステップ）
文字色と背景色を入力
コントラストチェッカーを開き、カラーピッカーかHEXコードで文字の色と背景の色を指定します。
コントラスト比を確認
コントラスト比（例: 4.54:1）が即座に表示され、実際の文字の見え方もプレビューできます。
基準との適合を確認
WCAGのAA・AAA各レベルとの適合を一覧で確認し、必要なら色を調整します。入れ替えボタンで文字色と背景色を素早く入れ替えられます。
この記事で紹介したツール
コントラストチェッカー
コントラスト比とWCAG適合を即座に判定。プレビュー付きで、ブラウザで完結・無料です。
配色そのものの組み合わせに迷っているときは、カラーパレット生成ツールでベースの色から展開し、配色の決め方のガイドで選び方を確認するのがおすすめです。
まとめ
- コントラスト比は相対輝度から計算され、1:1〜21:1の範囲で表される
- WCAGの基準は通常テキストAAで4.5:1以上、大きな文字で3:1以上
- 白背景 × #767676（4.54:1）はぎりぎり合格、× #999999（2.85:1）は不合格
- 「読ませる文字」は基準を満たし、装飾だけを薄くする。色だけに頼らない伝え方を組み合わせる
- Tools Hubのコントラストチェッカーなら、比率と適合判定がブラウザで無料
公開前のページがあれば、本文・見出し・ボタンの文字それぞれでコントラスト比を一度確認してみてください。
よくある質問
4.5:1は必ず守るべきですか？
公的サイトや幅広い利用者を想定するサービスでは、WCAGの達成基準を満たすことが強く推奨されます。一方で、ロゴや装飾的な要素は基準の対象外です。自サイトの利用者像に応じて、優先度を判断してください。
「大きい文字」とは具体的にどのサイズですか？
WCAGでは18ポイント以上、または14ポイント以上の太字を指します。Webのフォントサイズに換算すると、それぞれ約24px、約18.66pxの太字が目安です。
黒と白以外で基準を満たしやすい色はありますか？
白背景では、#333333（12.63:1）や#767676（4.54:1）といったグレー系は基準を満たしやすい色です。逆に#999999（2.85:1）のような明るいグレーや、淡い黄・水色は基準を満たしにくいため、文字色には向きません。
画像の中の文字もチェックの対象ですか？
WCAGの基準はテキストを対象とし、画像内の文字（テキストが画像化されたもの）にも適合が求められますが、ツールでの自動判定はできません。デザインツールや目視で、同じ基準を意識して作成してください。
