文字が読みにくい理由を数値で見る：WCAGのコントラスト比で配色を確かめる方法

コントラスト比とは何か

コントラスト比は、2色の「相対輝度」から求める比です。相対輝度は、色の明るさを0（黒）から1（白）で表した値です。W3Cの Understanding SC 1.4.3 では、明るい方の輝度を L1、暗い方を L2 として、次の式で求めると説明されています。

(L1 + 0.05) ÷ (L2 + 0.05)

結果は、黒と白で 21:1、同じ色どうしで 1:1 です。数値が大きいほど明るさの差が大きくなります。

覚えておきたい点が二つあります。

• 計算結果は丸めずに基準と比べます。同ページには、4.499:1 は 4.5:1 を満たさないと書かれています。「4.5と表示されたから合格」とは限りません。
• 見ているのは明るさの差です。赤と緑のように色相がまったく違っても、明るさが近ければ比は低くなります。

文字サイズ別の基準の見方

WCAG 2.2 の達成基準には、A、AA、AAA の三段階があります。一般的な目標は AA です。コントラストに関係する基準は次の三つです。

• 通常サイズの文字、AA：4.5:1 以上、AAA：7:1 以上、根拠：1.4.3 / 1.4.6
• 大きな文字、AA：3:1 以上、AAA：4.5:1 以上、根拠：1.4.3 / 1.4.6
• ボタンの枠、入力欄の枠、アイコン、グラフの線など、AA：3:1 以上（隣り合う色に対して）、AAA：規定なし、根拠：1.4.11

AAA の数値は SC 1.4.6 で確認しました。文字以外の部品は SC 1.4.11 の対象です。

「大きな文字」の線引き

WCAG の定義では、大きな文字は 18pt 以上、または太字の 14pt 以上 です。CJK（日本語を含む）フォントには「同等のサイズ」とされています。1.4.3 の解説ページは、ピクセルに直すとおよそ 24px と 18.5px だと示しています。

日本語の文字が「同等のサイズ」かどうかを、この資料から機械的に決める方法は読み取れませんでした。AAA の解説ページには、細いフォントや特殊なフォントでは調整が必要になりうるという趣旨の記述もあります。迷う場合は、大きな文字として扱わず、4.5:1 を基準にするのが安全です。これは編集上の判断です。

基準の対象外になるもの

1.4.3 には、次のような例外があります。

• 無効（操作できない）状態の部品
• 情報を持たない純粋な装飾
• 誰にも見えない文字
• 写真の中にたまたま写り込んだ文字
• ロゴタイプ、ブランド名

ロゴが例外だからといって、ロゴの隣に置く説明文や価格まで例外になるわけではありません。

配色ペアの確認手順

1. 文字と背景のペアを全部書き出します。 本文、見出し、ボタン、注記、写真の上の文字、バナーが対象です。
2. 各ペアの色コードを控えます。 例は #767676 のような16進数です。画像の場合は、スポイトツールで文字色と背景色を拾います。
3. コントラスト比を計算します。 計算には、コントラストチェッカーなど比を出せるツールか、前述の式を入れた表計算を使います。
4. 文字サイズと太さを見て、基準を当てはめます。 判断は上の表のとおりです。
5. 不合格のペアは、明るさの差が開く方向に色を変えます。 文字を濃くするか、背景を薄くします。色相をいじるより効果があります。
6. 直した色で再計算し、結果を表に残します。

背景がグラデーションや写真の場合は、文字の下で最も明るい所と暗い所の両方を測ります。悪い方が基準を満たしているかを見ます。

確認チェック表

そのまま写して使える表です。下の3行は、WCAG の式に従って手計算した 説明用の例 です。ブランドの実例や、実際のデザインの測定結果ではありません。最終的な値は、手元のツールで確かめ直してください。

• 説明用の例：注記、文字色：#777777、背景色：#FFFFFF、比（小数第2位まで）：約4.48:1、サイズと太さ：14px 標準、適用基準：4.5:1、判定：不合格、直し方：#767676 以下の明るさにする
• 説明用の例：修正後の注記、文字色：#767676、背景色：#FFFFFF、比（小数第2位まで）：約4.54:1、サイズと太さ：14px 標準、適用基準：4.5:1、判定：合格、直し方：なし
• 説明用の例：ボタン文字、文字色：#FFFFFF、背景色：#0066CC、比（小数第2位まで）：約5.57:1、サイズと太さ：16px 標準、適用基準：4.5:1、判定：合格、直し方：なし
• （記入欄）本文、文字色：、背景色：、比（小数第2位まで）：、サイズと太さ：、適用基準：4.5:1、判定：、直し方：
• （記入欄）見出し、文字色：、背景色：、比（小数第2位まで）：、サイズと太さ：、適用基準：3:1 または 4.5:1、判定：、直し方：
• （記入欄）ボタン文字、文字色：、背景色：、比（小数第2位まで）：、サイズと太さ：、適用基準：4.5:1、判定：、直し方：
• （記入欄）ボタンの枠、文字色：、背景色：、比（小数第2位まで）：、サイズと太さ：、適用基準：3:1、判定：、直し方：
• （記入欄）写真上の文字、文字色：、背景色：、比（小数第2位まで）：、サイズと太さ：、適用基準：4.5:1、判定：、直し方：

1行目と2行目は、#777777 と #767676 を比べています。見た目はほぼ同じですが、基準の線をまたぎます。「見た目では分からない差が合否を分ける」ことの例です。

判定欄は「合格」か「不合格」だけにします。「ぎりぎり」などの曖昧な語は避けます。

AIに任せること、人が確認すること

AI は表の下準備には向きますが、コントラスト比の計算結果をそのまま信用してはいけません。数値の計算ミスが起こりえます。比は必ずツールか表計算で出してください。

AIに任せられる作業

• 画面やバナーの構成案から、確認すべき配色ペアの候補を洗い出す
• 上のチェック表の形に整理する
• 不合格のペアについて、色の調整案を複数出す（調整後は再計算します）

使える依頼文の例です。社外秘のデザインは、説明用の架空の内容に置き換えてから渡してください。

次の画面構成から、文字と背景の配色ペアを洗い出してください。
- ヘッダー：白文字、紺の背景
- 本文：濃いグレー文字、白背景
- 注記：薄いグレー文字（14px）、白背景
- ボタン：白文字、青の背景。枠線あり
- 写真の上のキャッチコピー（28px 太字）

出力は表にしてください。列は「場所・文字か部品か・文字サイズと太さ・適用すべき基準（4.5:1 / 3:1）」です。
コントラスト比は計算せず、空欄にしてください。
基準は WCAG 2.2 AA（通常文字 4.5:1、大きな文字 3:1、文字以外の部品 3:1）を使います。

比の欄を空欄にさせるのは、AI に計算させないためです。

人が確認すること

• 色コードが実際の仕上がりと一致しているか。画像に書き出した後や、写真の上では色が変わります。
• 背景が写真の場合、文字の下の最も明るい所と暗い所の両方を測ったか。
• 数値は合格でも、細い書体や小さな文字で実際に読めるか。基準は最低ラインです。
• 印刷物では、紙の色やインクの出方で見え方が変わります。WCAG は主に画面の表示を想定した指針なので、印刷物では試し刷りでも確認してください。これは編集上の提案です。

次にやること

まず、いま作っている画面かチラシから、文字と背景のペアを5組選びます。チェック表に色コードを書き、ツールで比を出して、不合格のペアを一つ直してみてください。数値が出るので、直す前と後を比べられます。