文字色と背景色のコントラスト比：WCAGの基準と、見落としやすい配色の直し方

公開日: 2026-09-24

薄いグレーの文字はおしゃれに見えますが、画面の明るさや見る環境、視力や色覚の特性によっては、ほとんど読めないことがあります。文字と背景の色の差が十分かどうかを客観的に判断するための指標がコントラスト比です。この記事では、WCAGの基準と計算方法、よくある失敗例と直し方をまとめます。

コントラスト比とは

コントラスト比は、2つの色の明るさ（相対輝度）の比を1:1〜21:1の範囲で表したものです。同じ色どうしが1:1、白と黒の組み合わせが最大の21:1になります。

Webのアクセシビリティ（障害の有無や利用環境にかかわらず、誰もが情報にアクセスできること）の国際的なガイドラインであるWCAG（Web Content Accessibility Guidelines）では、文字と背景のコントラスト比について、次の基準を定めています。

対象	レベルAA（最低限）	レベルAAA（より高い基準）
通常の文字	4.5:1以上	7:1以上
大きな文字	3:1以上	4.5:1以上
ボタンの枠線・アイコンなど文字以外の要素	3:1以上	－

大きな文字とは、18ポイント（CSSで約24px）以上の文字、または14ポイント（CSSで約18.66px）以上の太字を指します。文字以外の要素の基準は、WCAG 2.1で追加されました。

多くのWebサイトでは、レベルAAを目標にするのが一般的です。

計算方法

コントラスト比は、次の手順で計算します。

各色のRGB値（0〜255）を0〜1の値にし、ガンマ補正を外して「光の量」に比例する値に変換する
人の目は緑を明るく、青を暗く感じるため、0.2126 × R + 0.7152 × G + 0.0722 × Bの重みで合計し、相対輝度を求める
明るい方の相対輝度をL1、暗い方をL2として、(L1 + 0.05) ÷ (L2 + 0.05)を計算する

手計算は大変なので、カラーコントラストチェッカーに文字色と背景色を入力すると、コントラスト比と各基準を満たすかどうかをすぐに確認できます。

基準ぎりぎりの色に注意

見た目ではほとんど区別できない色でも、基準を満たすかどうかが分かれることがあります。白い背景（#FFFFFF）に対する文字色の例です。

文字色	コントラスト比	通常の文字でAA
`#777777`	約4.48:1	満たさない
`#767676`	約4.54:1	満たす
`#999999`	約2.85:1	満たさない
`#595959`	約7.00:1	満たす（AAAも満たす）

#767676は、白背景で通常の文字のAA基準を満たす最も明るいグレーとして知られています。「薄めのグレー」を使いたい場合は、これより暗い色を選ぶのが目安です。

鮮やかな色も意外と足りない

原色に近い色は明るく目立つため、コントラストが十分だと思われがちですが、実際には基準に届かないことがあります。

組み合わせ	コントラスト比	判定（AA）
白背景に赤文字（`#FF0000`）	約4.00:1	通常の文字は満たさない（大きな文字は満たす）
白背景に青文字（`#0000FF`）	約8.59:1	満たす
青いボタン（`#3B82F6`）に白文字	約3.68:1	通常の文字は満たさない（大きな文字は満たす）
濃い青のボタン（`#2563EB`）に白文字	約5.17:1	満たす

特に「青や緑のボタンに白い文字」は見落としやすい組み合わせです。ボタンの色を少し暗くするだけで基準を満たせることが多いので、デザインを決める段階で確認しておくと手戻りを防げます。

よくある失敗と直し方

プレースホルダーや補足説明の文字が薄すぎる

入力欄のプレースホルダー（入力前に表示される薄い文字）や、注釈・日付などの補足情報は、薄いグレーにされがちです。これらも文字である以上、コントラストの基準の対象です。プレースホルダーは入力を始めると消えてしまうため、入力内容の説明はプレースホルダーではなくラベルとして常に表示するのが望ましい設計です。

色だけで情報を伝えている

「エラーの項目を赤で示す」「必須項目を色で区別する」「グラフの系列を色だけで区別する」といった表現は、色の見分けが難しい人には伝わりません。WCAGでも、色だけで情報を伝えないことが求められています。

エラーは赤色に加えて、アイコンやメッセージの文章でも示す
リンクは色だけでなく、下線などでも本文と区別する
グラフは色に加えて、線の種類や模様、ラベルでも区別する

特定の色覚の特性を持つ人にどう見えるかは、色覚シミュレーターで近似的に確認できます。

ダークモードで基準を満たさなくなる

ライトモードで確認した配色も、ダークモードでは別の組み合わせになります。暗い背景に薄いグレーの文字を置くと、コントラストが足りなくなることがあります。ダークモードに対応する場合は、両方のモードでそれぞれ確認しましょう。

例外になるもの

次のものは、コントラストの基準の対象外とされています。

無効化されていて操作できないボタンなどの部品
意味を持たない装飾だけの文字や、画像の中で重要でない文字
ロゴやブランド名の一部として使われている文字

ただし、例外に当てはまるからといって読みにくくしてよいわけではありません。重要な情報を伝える部分は、基準を満たす配色にしておきましょう。

日本の規格・制度との関係

日本では、Webアクセシビリティの規格としてJIS X 8341-3:2016が定められています。この規格はWCAG 2.0と同じ内容で、コントラスト比の基準（4.5:1・3:1）も共通です。公的機関のWebサイトでは、この規格のレベルAAへの準拠が目標とされています。文字以外の要素の基準（3:1）はWCAG 2.1で追加されたもので、JIS X 8341-3:2016には含まれていませんが、実際の見やすさのためには満たしておくのが望ましいでしょう。

また、2024年4月1日に改正障害者差別解消法が施行され、民間の事業者にも障害のある人への「合理的配慮の提供」が義務づけられました。Webサイトのアクセシビリティの向上は、そのための環境整備として努力義務とされています。

まとめ

コントラスト比は2つの色の明るさの比で、1:1〜21:1で表す
WCAGのレベルAAでは、通常の文字は4.5:1以上、大きな文字とアイコンなどは3:1以上
#777777と#767676のように、見た目が同じでも基準を満たすかが分かれることがある
色だけで情報を伝えず、アイコンや文章でも示す
日本のJIS X 8341-3:2016はWCAG 2.0と同じ内容