薄いグレーの文字は、制作している画面では洗練されて見えます。しかし屋外の明るい場所や、加齢によって見え方が変わった目では読めません。この差は感覚では判断できないため、数値の基準が用意されています。
国際的な指針であるWCAGでは、テキストと背景のコントラスト比について具体的な数値が示されています。達成基準1.4.3では、通常のテキストに少なくとも4.5:1、一定以上の大きさのテキストには3:1のコントラスト比を確保することが求められています（ウェブアクセシビリティ基盤委員会による日本語訳）。
この記事では、基準の意味と大きい文字の扱い、ボタンや境界線に必要な比率、そして自社サイトを無料で点検する手順を整理します。
この記事でわかること
・4.5:1と3:1という基準の意味
・「大きいテキスト」の判定条件
・文字以外（ボタン、境界線、アイコン）の基準
・実務で問題になりやすい箇所
・無料で点検する手順
・ブランドカラーが基準を満たさない場合の対処
4.5:1と3:1が意味すること
| 対象 | 必要な比率 | 根拠 |
|---|---|---|
| 通常のテキスト | 4.5:1以上 | 達成基準1.4.3（レベルAA） |
| 大きいテキスト | 3:1以上 | 同上。サイズが大きいぶん低い比率でも判読できる |
| 文字以外の要素 | 3:1以上 | 達成基準1.4.11（非テキストのコントラスト） |
「大きいテキスト」の判定には条件があります。WCAGの解説では、18ポイント、または太字の場合は14ポイントを境として、それ以上のサイズであれば低いコントラスト比でも判読できると整理されています。
3行目はWCAG 2.1で追加された基準で、ボタン、入力欄の枠線、アイコンなど、文字以外の要素が対象になります。文字だけを確認して安心していると、ここで抜けます。
文字は4.5:1、大きい文字と文字以外の要素は3:1。
文字だけ確認して、ボタンの枠線やアイコンを見落とすことが多い。
実務で問題になりやすい箇所
| 箇所 | 起きやすい状態 | 確認 |
|---|---|---|
| 補足・注釈のグレー文字 | 背景との差が足りない | 薄いグレーは高い確率で基準を下回る |
| 入力欄のプレースホルダー | 薄い色で表示される | 文字以外ではなくテキストとして扱われる |
| 白抜き文字＋写真背景 | 写真の明るい部分で読めなくなる | 最も明るい箇所で確認する |
| ボタンの枠線 | 背景と同系色で境界が消える | 1.4.11の対象 |
| 無効状態のボタン | 極端に薄くする | 何が押せないか分かる程度は必要 |
| ブランドカラーの上の白文字 | 黄色系・水色系で不足しやすい | 明度が高い色は白文字と相性が悪い |
3行目は業種を問わず頻発します。写真の上に白い文字を置く構成は、写真の明るさによって読めたり読めなかったりします。写真を差し替えたときに破綻するため、暗いオーバーレイを重ねるか、文字の背景に帯を敷いてください。
6行目も注意が必要です。明度の高いブランドカラー（黄色、水色、黄緑）の上に白文字を置くと、基準を大きく下回ります。この場合は文字色を濃色に変えるほうが確実です。
無料で点検する手順
- 主要ページのスクリーンショットを撮る
- 文字色と背景色の値を調べる：ブラウザの検証機能で確認できる
- コントラスト比を計算する：無料の判定ツールが多数ある
- 4.5:1を下回る箇所を一覧にする
- ボタン・枠線・アイコンも同様に確認する：こちらは3:1
- 修正の優先順位をつける：本文と入力欄から直す
6番目の優先順位が重要です。装飾的な要素より、本文と入力まわりを先に直してください。読めない注釈と、入力中に文字が見えないフォームでは、後者のほうが直接的に成果を落とします。
点検の負荷を下げるには、色の種類そのものを減らすことが有効です。使う色が多いほど、組み合わせの確認箇所が増えます。配色の決め方はWebサイトの配色の決め方｜ブランドカラーから展開する方法を参照してください。
ブランドカラーが基準を満たさない場合
ブランドカラーを変えずに基準を満たす方法があります。色そのものを捨てる必要はありません。
| 対処 | 内容 | 向いている場面 |
|---|---|---|
| 明度違いを作る | 同系色で濃いものを文字用に用意する | 最も汎用的 |
| 文字色を変える | 背景がブランドカラーなら文字を濃色に | 明度の高いブランドカラー |
| 面積で使う | 文字ではなく背景や装飾に使う | 色の印象は保てる |
| 文字サイズを上げる | 大きいテキストの条件を満たす | 見出しやボタンの文言 |
| 帯やオーバーレイを敷く | 写真の上の文字に使う | 写真背景のセクション |
1行目が実務では最も使われます。ブランドカラーは面積として使い、文字にはその濃い版を使うという分担にすれば、印象を保ったまま基準を満たせます。
CVボタンの色を決める際も同じ考え方になります。目立つことと読めることは別なので、両方を確認してください。色の選び方はCVボタンの色で成果は変わるのか｜アクセントカラーの決め方で扱っています。
ブランドカラーは面積で使い、文字には濃い版を用意する。
色そのものを変えずに基準を満たせる。
どこまで対応すべきか
すべての要素で最高水準を満たす必要はありません。判断は次の順序です。
- 本文と入力まわり：優先して直す。成果に直結する
- ボタンとリンク：次に直す。押せることが分かる必要がある
- 見出し：大きいため3:1で足りる場合がある
- 装飾・背景：後回しでよい
- 無効状態の表示：あえて薄くする意図があるため、判別できる範囲に留める
対応範囲そのものをどう決めるかは、事業の状況と対象顧客によります。考え方はWebアクセシビリティ対応はどこまでやるべきか｜優先順位の決め方にまとめています。コントラスト比は、その中でも費用が小さく効果が大きい項目です。
他の要素との順序
デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。
よくある失敗
画面上の見た目だけで判断する
制作環境と閲覧環境は違います。屋外や明るい場所では見え方が変わるため、数値で確認してください。
文字だけ確認する
ボタンの枠線、入力欄の境界、アイコンも基準の対象です。文字以外は3:1が目安になります。
写真の上の白文字をそのままにする
写真を差し替えたときに読めなくなります。オーバーレイか帯を敷いてください。
プレースホルダーを薄くする
入力の手がかりが読めなくなります。テキストとして基準の対象です。
ブランドカラーを理由に対応を諦める
色を変えずに済む方法があります。面積で使い、文字には濃い版を用意してください。
よくある質問
どの判定ツールを使えばよいですか
無料のものが多数あり、機能に大きな差はありません。色の値を2つ入力すれば比率が出ます。ブラウザの開発者ツールに判定機能が含まれている場合もあります。
ダークモードにも対応が必要ですか
対応する場合は、そちらの配色でも同じ確認が必要です。明るい配色で基準を満たしていても、暗い配色では別の組み合わせになります。
既存サイトを全部直す必要がありますか
一度に直す必要はありません。本文と入力まわりから始めてください。この2つだけでも、読めない状態はかなり減ります。
色覚の多様性への配慮とは別ですか
別の観点です。コントラスト比は明暗の差、色覚への配慮は色相の使い分けに関わります。色だけで情報を区別せず、形や文字も併用してください。文字サイズとあわせた設計は読みやすい文字サイズの決め方｜サイズ・行間・1行の文字数を数値で揃えるを参照してください。
印刷物にも同じ基準が使えますか
WCAGはWebを対象にした指針ですが、明暗の差が読みやすさを決めるという考え方は共通です。特に高齢の読者が多い印刷物では、参考になります。
まとめ
薄いグレーの文字は制作画面では洗練されて見えますが、屋外や見え方が変わった目では読めません。この差は感覚で判断できないため、数値の基準を使います。WCAGの達成基準1.4.3では、通常のテキストに4.5:1、一定以上の大きさのテキストには3:1のコントラスト比が求められています。
見落とされやすいのは文字以外の要素です。WCAG 2.1で追加された達成基準1.4.11により、ボタン、入力欄の枠線、アイコンなども3:1が目安になります。文字だけを確認して安心していると、押せることが分からないボタンが残ります。
ブランドカラーが基準を満たさない場合でも、色そのものを変える必要はありません。ブランドカラーは面積として使い、文字にはその濃い版を用意する。この分担で印象を保ったまま基準を満たせます。点検は無料のツールで実施でき、本文と入力まわりから直せば、少ない工数で効果が出ます。
当社ではデザイン制作において、配色の設計と点検をご相談いただけます。自社サイトの確認を進めたい場合は、資料をダウンロードのうえご活用ください。
