Webアクセシビリティ達成基準「1.4.3 コントラスト（最低限レベル）の達成基準」の話

前回は Webアクセシビリティ達成基準「1.4.2 音声の制御の達成基準」について解説しました。続けて今回は「1.4.3 コントラスト（最低限レベル） の達成基準」への対応についてお話しします。
Web担当者や中小企業・行政の広報・情シス担当者の皆さまに向けて、見やすさ・読みやすさを確保するための「色とコントラスト設計」 について、実務に沿った視点でご紹介します。

1.4.3 コントラスト（最低限レベル）とは？

コントラスト比の基礎知識

達成基準 1.4.3 は、テキストや画像化された文字が、背景との間に一定のコントラスト比を確保しているかを求めるものです。

最低限レベル（WCAG 2.1 AA）では、以下が必要とされています：

• 通常のテキスト：コントラスト比 4.5:1 以上
• 太字または大きな文字：コントラスト比 3:1 以上

これは視覚に制限のある方だけでなく、一般のユーザーにとっても、屋外でスマホを見るときや、明るい環境で作業するときなどに大きく役立ちます。

なぜコントラストは重要なのか？

コントラスト不足は、アクセシビリティで最も多い不合格項目です。
例えば以下のようなケースは非常に多く見かけます：

• 明度が近いグレー同士を組み合わせて文字が読みにくい
• トレンドカラーを優先しすぎてコントラストが足りない
• 大事なボタンの文字が背景に溶け込んでしまう

視覚的な読みやすさはすべてのユーザーに関わる基本設計であり、ここが不十分だとサイト全体の使いやすさに直結します。

実務で気をつけるべきポイント

色選びの前に基準を知る

ブランドカラーやトーン＆マナーを守るのは大切ですが、同時に 「4.5:1」→通常文字、「3:1」→太字・大文字 の基準を常に意識しておく必要があります。
Web制作現場では、デザイナーとディレクターが初期段階で基準を共有していると、後から修正が入るリスクが減り、制作効率が上がります。

検証ツールの活用

実務では以下のようなツールがよく使われます：

• WCAG Contrast Checker
• Colorable
• Adobe XD や Figma の内蔵アクセシビリティチェック

特にFigmaはリアルタイムでコントラスト比を表示してくれるため、制作段階でのチェックに非常に便利です。

大きな文字や太字を活用する

どうしてもブランドカラーを変えにくい場合は、以下のように調整することで達成基準を満たせるケースもあります：

• フォントサイズを 18pt（24px）以上 にする
• ウェイトを bold にする
• 背景を薄くする、あるいは不透明度を調整する

特に見出し部分やボタンラベルはフォントウェイトを調整しやすいため、デザインとアクセシビリティの両立がしやすくなります。

よくあるNG例と改善の考え方

NG例1：背景と文字がどちらも淡いトーン

淡いグレー背景に薄いグレー文字など、コントラストが足りず「読める人には読めるが、読めない人にはまったく読めない」状態になります。

改善方法：

• 背景を明るく（または暗く）寄せて差をつける
• 文字色を黒寄りに変更する
• 文字を太字にしてコントラスト基準を下げる（3:1）

NG例2：写真の上に文字を直接載せる

写真の明暗が複雑で、文字が読みにくくなるパターンです。

改善方法：

• 半透明の黒・白のオーバーレイを敷く
• シャドウを適切に入れる
• 写真の明度を調整する

NG例3：ホバー時だけコントラストが下がる

通常は問題ないが、ホバー時に薄い色に変わってしまうケース。
見逃しがちなポイントですが、状況に関わらず基準を満たす必要があります。

改善方法：

• ホバー色のコントラストもチェック
• 背景・枠線の変更でアクセシビリティを保つ

ボタン・リンクのコントラスト設計

テキストだけでなく、UI要素全体の見え方が大事

達成基準 1.4.3 の対象は主にテキストですが、UI設計ではボタンやリンクの「視認性」も非常に重要です。

• 枠線の色
• ボタンの塗り
• ホバー時の変化
• フォーカスリング

これらが十分な視認性を持つことで、ユーザーが迷わずサイトを操作できます。
特に行政・公共系サイトでは、視認性の高さが信頼性にもつながります。

デザイン性とアクセシビリティを両立させるコツ

1. 配色パターンを最初に決める

ブランドに合わせた、アクセシブルな配色セット（カラーパレット） を最初に作っておくと、制作中に迷うことが減ります。

2. フォントサイズを「大きめ」にする

日本語Webでは文字が小さくなりがちです。
アクセシビリティの観点では、PCで16px以上が推奨されます。

3. デザイン段階で「読みやすさ」を優先する

単に基準を満たすだけでなく、読みやすさに配慮した余白や行間、配置も重要です。
文字の読みやすさはコントラストだけでなく、レイアウト全体の設計にも影響します。

まとめ

1.4.3「コントラスト（最低限レベル）」は、Webアクセシビリティの中でも最も影響範囲が広く、ユーザビリティ改善にも直結する重要な基準です。
デザインの段階でしっかり意識することで、見た目の美しさと使いやすさを両立できます。

色やコントラストは、単に見た目の問題ではなく、
すべてのユーザーが情報にアクセスできるかどうかを左右する重要な要素です。