この記事でわかること

  • 色の違いだけで意味を伝えないことを求める、WCAGの達成基準1.4.1
  • 文字と背景のコントラストとの違いと、明るさの差が3:1あれば認められる場合
  • 本文の中のリンク・必須の項目・入力のエラーに、色以外の手がかりを足す書き方と、試した結果
  • 自分のページで、色だけで伝えている所を探す手順

赤い文字だけで必須の項目を示す、エラーの欄を赤い枠だけで知らせる、グラフの線を色だけで分ける。こうした作りは、色を見分けにくい人には意味が伝わりません。この記事では、色に加えて、文字・下線・形・模様などの手がかりを足す考え方を、アクセシビリティの基準にもとづいて紹介します。

根拠にしたのは、W3Cが公開している達成基準1.4.1の解説(Understanding)と、技法G14・G182・G183・G111、失敗例F73・F81です。どれも2026年10月30日に原文を確認しました。例のHTMLは、作業PCのChromeで開き、ブラウザが計算した色と下線を読み取っています。ツールやスクールを選んで勧めることはしません。

結論: 色に、文字・下線・形のどれかを足す

まとめると、色の違いで何かを伝えている所には、色を見分けられなくても分かる、目に見える手がかりを1つ足します。 色をやめる必要はなく、色はそのまま使ってかまいません。よくある場面と、足す手がかりの例は次のとおりです。

色で伝えていること 足す手がかりの例
本文の中のリンク 下線・太字
必須の項目 「必須」の文字
入力のエラー 「エラー:」で始まる文
グラフの系列 模様・線の形・ラベル
色分けした予定表 番号や記号の文字

色に関わるアクセシビリティの基準

WCAG 2.2の達成基準1.4.1(レベルA)は、情報を伝える、操作を示す、反応を促す、要素を見分ける、のどれかに、色を目で見て分かる唯一の手段として使わないことを求めています。

解説では、色の見え方が限られる人や、色がよく見えない高齢の人、白黒の画面を使う人は、色だけで示された情報を受け取れないと説明しています。例として、「必須の項目は赤」「エラーは赤で表示」「メアリーの売り上げは赤、トムは青」といった色の違いを挙げています。

コントラストの基準との違い

文字と背景のコントラストは、文字が背景から読み取れるかを見る別の基準です。確かめ方は、Webデザインで文字と背景のコントラストを確かめる方法で紹介しています。1.4.1が見るのは、色の違いが意味を持っている所で、その違いが色を見分けられない人にも伝わるかです。

解説の注記では、色合いだけでなく明るさにも大きな差があり、2つの色のコントラスト比が3:1以上なら、色以外の見た目の違いとして数えてよいとしています。一方で、緑の枠は正しい、赤の枠はまちがい、のように特定の色を見分けられることに頼る場合は、明るさの差がいくらあっても、別の手がかりが必要です。

対象にならない場合

色で何も伝えていない所は対象外です。たとえば、リンクが周りの文字とまったく同じ見た目なら、色の違いがないため、この基準には当たりません。ただし解説は、それでは誰にとっても使いにくいとも書いています。

訪問済みのリンクとまだ訪問していないリンクを、色だけで分けているのも失敗になりません。訪問済みかどうかは、プライバシーの理由からページの側ではほとんど扱えず、作る側の責任ではないとされています。

この基準は、読み上げソフトなどの支援技術を使う人への伝え方を直接は扱っていません。色を見分けにくい、目で見て使う人のための基準で、画面に見える手がかりを求めています。

色に加える手がかりと、W3Cの技法

技法G14は、色の違いで伝えている情報を、文字でも伝える方法です。例として、色分けした会議の予定に「T1」のようなトラックの番号を書く形や、必須の項目のラベルを赤にしたうえで、最後に「*」を付ける形を挙げています。

技法G182は、文字の色で情報を伝えるときに、下線・太字・斜体・文字の大きさなど、色以外の見た目の違いも付ける方法です。技法G183は、下線などのない本文の中のリンクについて、周りの文字とのコントラスト比を3:1以上にする方法です。

画像やグラフでは、技法G111のように色と模様を組み合わせます。棒グラフの地域ごとに色と模様を変え、凡例にも同じ色と模様を使う例が挙げられています。

失敗例は2つです。F73は、本文の中のリンクの下線を消し、色の違いだけを残した場合です。F81は、必須の項目やエラーの欄を、色の違いだけで示した場合です。

書き方の例: リンクと入力のエラーに手がかりを足す

次のHTMLは、本文の中のリンクに下線を残し、必須の項目に「(必須)」の文字、エラーの欄に「エラー:」で始まる文と太い枠を付けた例です。色はそのまま使い、色を見分けられなくても分かる手がかりを足しています。

<style>
  body { color: #333333; }
  .guide a { color: #3366cc; text-decoration: underline; }
  .required { color: #c00000; }
  .error { color: #c00000; font-weight: bold; }
  input[aria-invalid="true"] { border: 2px solid #c00000; }
</style>
<p class="guide">
  申し込みの前に<a href="/price/">料金の一覧</a>を確かめてください。
</p>
<p>(必須)と書いた項目は、入力が必要です。</p>
<label for="mail">メールアドレス<span class="required">(必須)</span></label>
<input id="mail" type="email" aria-invalid="true"
  aria-describedby="mail-error">
<p id="mail-error" class="error">
  エラー: メールアドレスを入力してください
</p>

エラーの文は、aria-describedby属性で入力欄と結び付けています。エラーの文の書き方は、Webデザインで入力エラーを分かりやすく伝える方法で詳しく紹介しています。

手順: 色だけで伝えている所を探す

技法と失敗例の確かめ方に沿った手順です。

  1. 色で意味を持たせている所を書き出す: リンク・必須の項目・エラー・状態の表示・グラフ・色分けした表などを探します
  2. 色以外の手がかりがあるかを見る: それぞれに、文字・下線・太字・形・模様のどれかが付いているかを確かめます
  3. 下線のないリンクは明るさの差を測る: 本文の中のリンクに下線などがなければ、リンクと周りの文字のコントラスト比が3:1以上かを測ります
  4. 重ねたときだけの手がかりを外して見る: マウスを重ねる前、フォーカスする前の表示だけで、リンクやエラーが分かるかを見ます

試した結果

作業PCの外からは見えない検証用のサーバーで例のHTMLを配信し、画面を出さない設定のChromeで読み込みました。ブラウザが計算した後の色・下線・太さを読み取り、その色からWCAGの式でコントラスト比を計算しています。

  • リンクの「料金の一覧」には下線が付き、色は#3366cc、周りの文字は#333333として計算されていました
  • この2色のコントラスト比は2.35:1で、3:1に届いていませんでした。この例では、リンクだと分かる手がかりは下線です
  • (必須)の文字は赤(#c00000)で、ラベルの文字とのコントラスト比は1.95:1でした。赤い色だけでは見分けにくく、「(必須)」の文字が手がかりになります
  • エラーの文は「エラー:」で始まり太字、入力欄は2pxの枠で、aria-describedby属性でエラーの文と結び付いていました
  • ページ全体を白黒にして画面を撮ると、本文の文字の色は灰色の値51、赤は41、リンクの青は99になりました。赤と本文の文字は、ほとんど同じ濃さの灰色です

あわせて、リンクの下線を消した書き方も試しました。この場合、リンクと周りの文字の違いは、2.35:1の色の差だけになりました。本文の文字を黒(#000000)に変えると、同じ青のリンクとの比は3.91:1になりました。

使ったブラウザは、MacのGoogle Chrome 156(画面を出さない起動)だけです。読み上げソフトやほかのブラウザ、色覚の見え方を再現する道具での確認はしていません。

自分で直すか、相談するかの判断

目安は、「色を取り除いて白黒で見ても、同じ意味が読み取れるか」です。読み取れないなら、文字・下線・形のどれかを足します。

サイト全体の配色の決まりや、グラフを出す仕組みまで見直すことになる場合は、作りによって手の入れ方が違います。制作を担当した人に相談し、配色の考え方に迷ったら、Webデザインの講座の講師に聞くのも一つの方法です。

つまずきやすいところ

  • 下線を消して色だけを残す: 失敗例F73に当たります。試したときは、下線を消すと、リンクと周りの文字の違いは2.35:1の色の差だけになりました
  • 本文の文字の色を変えて、リンクとの差が縮む: 黒い文字なら3.91:1あった青のリンクも、濃い灰色の文字の中では2.35:1でした。文字の色を変えたら、リンクとの差も測り直します
  • 赤い文字なら目立つと思う: 白黒にすると、赤の(必須)の文字は本文の文字とほとんど同じ濃さの灰色になりました。「必須」の文字や印を足します
  • マウスを重ねたときだけ下線を出す: 失敗例F73では、重ねたときやフォーカスしたときにだけ出る手がかりも失敗としています
  • リンクの文言が「こちら」だけ: 下線があっても、どこへ行くリンクかは文言で伝えます。書き方は、Webデザインでリンクの文言を分かりやすくする方法にまとめています

まとめ

  • 色の違いで意味を伝えている所には、色を見分けられなくても分かる手がかりを足します
  • 色をやめる必要はなく、文字・下線・太字・形・模様のどれかを組み合わせます
  • 下線のないリンクは、周りの文字との明るさの差が3:1以上あるかを確かめます
  • マウスを重ねたときだけ出る手がかりや、読み上げソフトにだけ伝わる手がかりでは足りません