色のコントラスト

背景と前景のコンテンツ（通常はテキスト）の色のコントラストは、可読性を確実に保持するのに十分なほど大きくすべきです。

さまざまな視覚能力に対応した読み取り可能なインターフェイスを設計する際、 WCAG ガイドラインでは次のコントラスト比に従うことを推奨しています。

コンテンツの型	最小比 (AA レート)	拡張比 (AAA レート)
本文テキスト	4.5 : 1	7 : 1
拡大テキスト（本文テキストより 120-150% 大きいもの）	3 : 1	4.5 : 1
アクティブなユーザーインターフェイス部分と、アイコンやグラフなどのグラフィックオブジェクト	3 : 1	未定義

これらの比率は、非アクティブなコントロール、ロゴ、または純粋に装飾的なテキストなどの「付随的な」テキストには適用されません。

詳細については、下記の解決策の節をご覧ください。

サイトに良い色のコントラストを保つことは、すべてのユーザーにとって好ましいことですが、特定の種類の色覚異常や、その他の類似した症状を持つユーザーにとっては特に有益です。これらのユーザーはコントラストが低く、似たような色を区別するのが難しいという使い勝手の悪さを経験しています。これは、明るい部分や暗い部分を、そうした症状を持たない人ほど容易に識別できないため、エッジや境界線、その他の詳細を見分けるのが難しいからです。

ウェブサイトをクールなデザインにするのは良いことですが、ユーザーがコンテンツを読めなければ、そのデザインには何の価値もありません。

例

単純な HTML と CSS のコードを見ていきましょう。

html

<div class="good">良いコントラスト</div>
<div class="bad">悪いコントラスト</div>

css

div {
  /* 全般的な div のスタイルをここに置く */
}

.good {
  background-color: #5a80a9;
}

.bad {
  background-color: #400064;
}

どちらのテキストも既定では黒色です。

良いコントラスト

「良い」 <div> の背景色はネオンブルーであり、テキストが読みやすくなっています。

html

<div class="good">良いコントラスト</div>

css

div {
  font-family: sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  width: 250px;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 4px 4px 4px black;
}

.good {
  background-color: #5a80a9;
}

悪いコントラスト

一方、「悪い」 <div> は背景が濃い紫色で、テキストがかなり読みにくくしています。

html

<div class="bad">悪いコントラスト</div>

css

div {
  font-family: sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  width: 250px;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 4px 4px 4px black;
}

.bad {
  background-color: #400064;
}

解決策

ウェブサイトに配色を選ぶ際には、前景色と背景色にコントラストの強い色を選びましょう。デザイン上の制約の範囲内で、色のコントラストをできるだけ良くしてください。理想的には AAA 評価（下記 1.4.6 参照）を目指しますが、少なくとも AA 評価（下記 1.4.3 参照）を満たすようにしてください。

動画やアニメーションなどのテキスト以外のコンテンツが含まれる場合は、 1.4.11 に従うことで対応できます（下記参照）。

色を選択する際にコントラストを調べるには、 WebAIM の Color Contrast Checker などのツールを使用してください。

また、 Firefox の開発者ツールを使用して、色のコントラストをその場で調べることができます。アクセシビリティインスペクターガイド、特に Check for accessibility issues の節をご覧ください。説明おの節のライブサンプルで試してみてください。

色のコントラスト

例

良いコントラスト

悪いコントラスト

解決策

関連する WCAG 達成基準

関連情報