WEBデザインのコントラスト比とは？文字を読みやすくする色の考え方

WEBサイトで文字が読みにくいと感じたら、文字色だけでなく背景色との組み合わせを見直しましょう。その判断に使える数値が「コントラスト比」です。どの程度の差が必要なのか、色の選び方で数値がどう変わるのかを、会員登録ページの具体例で解説します。

コントラスト比は文字と背景の明るさの差を表す

コントラスト比は、2色の相対輝度（画面上での相対的な明るさ）から計算する比率です。同じ色同士は1:1、最も明るい白 ■#FFFFFF と最も暗い黒 ■#000000 は21:1になります。青と赤のように色相（色の種類）が異なっていても、明るさが近ければ比率は小さくなります。

計算には、明るい色と暗い色それぞれの相対輝度を使い、「（明るい色の相対輝度＋0.05）÷（暗い色の相対輝度＋0.05）」で求めます。初心者が手計算する必要はありません。まずは実際の文字色と、その直後ろの背景色を一組として調べることが大切です。

WCAG（Web Content Accessibility Guidelines、WEBコンテンツを利用しやすくするための指針）2.2のAA（適合レベルの一つ）では、通常の文字は4.5:1以上、規定の大きな文字は3:1以上が基準です。大きな文字の目安は約24ピクセル以上、太字なら約19ピクセル以上です。基準ぎりぎりの場合は数値を丸めて判定せず、計算した値そのもので確認します。

同じ文字色でも背景によって判定が変わる

架空の会員登録ページを例にします。本文の文字色を濃い青灰 ■#243447、ページ背景を白 ■#FFFFFF にすると、コントラスト比は約12.67:1です。HEXコードは色を16進数で指定する記法です。この組み合わせを本文と見出しの基本として使います。

補足文を少し弱く見せるため、文字色をグレー ■#667688 にすると、白背景 ■#FFFFFF では約4.65:1で通常文字のAA基準を満たします。しかし、同じ補足文を淡い青灰 ■#F1F5F8 のカードに移すと、背景との比は約4.25:1になり、通常文字では基準に届きません。

カード内の補足文を濃いグレー ■#536678 に変えれば、淡い背景 ■#F1F5F8 との比は約5.41:1になります。見た目の印象だけで文字を薄くするより、表示する場所ごとに比率を確かめると調整理由が明確になります。

主要な「登録する」ボタンには青 ■#2B607F を背景、白 ■#FFFFFF を文字にします。ボタン文字と青の比は約6.81:1、青いボタンと淡いカード背景 ■#F1F5F8 の比は約6.21:1です。文字だけでなく、ボタンの色面も周囲から区別できるか確認しましょう。

一方、明るい水色 ■#9ECDE2 のボタンに白文字 ■#FFFFFF を載せると約1.71:1で、通常文字にも大きな文字にも不足します。背景を変えず文字を濃い青灰 ■#243447 にすると約7.41:1になります。白文字にこだわらず、文字色を変更する方法も有効です。

文字サイズと表示状態を含めて確認する

確認するときは、最初に文字色と背景色のHEXコードを記録し、コントラスト計算ツールで比率を調べます。次に本文、見出し、ボタン、補足文などの文字サイズと用途に応じた基準と照合します。数値が足りない場合は文字を濃くするか背景を明るく・暗く調整し、再計算します。

通常表示だけでなく、マウスを重ねた状態（ホバー）やキーボード操作時の文字、スマートフォンで折り返された文章も確認します。写真やグラデーション、半透明の面では背景の色が位置によって変わるため、実際に文字が載る場所で確かめる必要があります。

文字に必要な比率と、操作に必要な枠線やアイコンの基準は同じではありません。操作対象を見分けるための非テキスト情報には、隣接色との3:1以上が求められる場合があります。また、数値を満たしても色だけでリンクや状態を示さないようにしましょう。

HueRollではHEXコードを入力し、選択色と白・黒とのコントラストや色の濃淡を確認できます。ただし、任意の2色の比較やWCAGのAA・AAA適合を自動判定する機能はありません。実際に重なる色同士の比率を別途確認し、数値と実画面の両方から配色を判断しましょう。