コントラスト比とWCAG基準｜守る本当の理由はクレーム回避

:::note ※コントラスト比を確認したい人向けの「基準＋実務判断」記事です :::

結論（私の判断基準）

• 本文テキスト：4.5:1 以上（AA基準）。これを下回ると「読みにくい」とクレームが来る
• 見出し（18px以上）：3:1 以上
• 迷ったら：4.5:1 を目指す。足りなければ色を変える

私がWCAGを守る本当の理由は、クレームと改修コストを減らしたいから。「アクセシビリティのため」は建前。

🚀 コントラスト比を確認 → Color Palette Generator

---

WCAGを守らないとどうなるか

起きること1：「読みにくい」とクレームが来る

薄いグレーのテキスト。デザインとしては「洗練されている」。

でも、目が疲れている人、老眼の人、明るい場所でスマホを見ている人には読めない。

「読みにくい」と言われたら、色を変えるしかない。

起きること2：公開後の改修コスト

設計時に色を変えるのは簡単。公開後に変えるのは10倍大変。

デザイン全体の整合性を取り直す必要がある。関係者への説明も必要。

最初からWCAGをクリアしておけば、この手間がない。

起きること3：法的リスク（海外向け）

アメリカやEUでは、アクセシビリティ基準を満たさないサイトは訴訟対象になりうる。

日本国内向けでも、公共系サイトは基準を満たす必要がある。

---

WCAG 2.1 の基準

レベル	コントラスト比	適用対象
AA	4.5:1 以上	通常テキスト（18px未満）
AA	3:1 以上	大きいテキスト（18px以上）
AAA	7:1 以上	通常テキスト（より厳格）

私は AA（4.5:1）を最低ラインにしている。AAA は「達成できれば嬉しい」程度。

---

よくある問題（私が見たケース）

問題1：グレーのテキストが薄すぎる

/* ❌ コントラスト不足（2.5:1） */
color: #aaaaaa;

/* ✅ AA基準クリア（4.54:1） */
color: #767676;

デザイナーから「この薄いグレーで」と言われても、4.5:1 を下回るなら変えてもらう。

問題2：薄い背景 + 薄いテキスト

/* ❌ 両方薄い（1.96:1） */
background: #f0f0f0;
color: #999999;

/* ✅ テキストを濃く（4.58:1） */
background: #f0f0f0;
color: #595959;

---

確認方法

計算式を覚える必要はない。ツールで確認すればいい。

• Chrome DevTools：Elements パネルで色をクリック
• WebAIM Contrast Checker：webaim.org/resources/contrastchecker
• Color Palette Generator：パレット内のコントラスト比を表示

私は Chrome DevTools で確認している。コードを書きながら即座に見られる。

---

UI要素の基準

要素	最低コントラスト比	私の判断
本文テキスト	4.5:1	絶対守る
見出し（18px以上）	3:1	守る
プレースホルダー	3:1	守る（入力例なので薄くてもOKという意見もあるが、私は守る）
ボタン境界線	3:1	守る

---

迷ったときの判断

迷い	私の判断
どの基準を使うか	AA（4.5:1）を最低ライン
デザイナーが薄い色を指定	4.5:1 を下回るなら変えてもらう
AAA を目指すか	達成できれば嬉しい程度。必須にはしない

---

この記事で解決しない場合

• 色覚多様性に配慮したい → 色覚多様性に配慮した配色
• 配色の思想を知りたい → Web配色は「事故を減らす設計」

---

WCAGを守るのは「正しいから」ではない。「守った方が楽だから」。クレームと改修コストを減らせる。