要約

テキストが判読できるように十分なコントラストを確保します。また、すべてのユーザーが複数の色が見え、色の違いを認識できるとは限らないので、色に依存した情報を伝達は避けましょう。

テクニック

例

例1 — リンクに下線を使用する

デフォルトの下線が完全に削除されないように、すべてのリンクに点線の下線を追加します。

a {
   text-decoration: none;
   padding-bottom: 2px;
   border-bottom: 1px dotted rgb(0,0,238);
}
例 2 — サイドバーにラベルを使用する

次のサイドバーは、緑色の枠で囲まれた一連の歴史的出来事の一部です。aria-label属性で、不足しているコンテキストを追加します。

<aside
       aria-label="historical event series"
       class="historical">
   <h4>Battle of Waterloo</h4>
   …
</aside>
例3 — 図表のキャプションへのデータ組み込み

円グラフとして表現されているデータをキャプションにも記載します。

<figure>
   <figcaption>
      <p>Figure 1 — Political Affiliations</p>
      <p>Of 2000 people surveyed, 33% identified themselves as Conservatives,
         25% as Liberal, 10% as Rhino, 2% as Green and 30% declared no affiliation.</p>
   </figcaption>
   <img src="poll.jpg" alt="January 2018 political poll results"/>
</figure>

解説

色の使用は、目の見えるユーザーに情報を伝えるためによく使われるセマンティック手法ですが、情報を伝える唯一の手段として使用すべきではありません。枠線の色や網掛けを使用する場合は、常にセマンティックマークアップを基にして、視覚に頼らない再生方法を使うユーザーに平等なアクセスを提供する必要があります。

より一般的には、コンテンツからスタイルを常に明確に分離してください。スタイルを分離することで、ユーザーは独自のスタイルシートを適用したり、ユーザーエージェントに組み込まれている色、明るさ、コントラストのコントロールを使用して、自身のニーズに合わせて表示を調整できるようになります。

しかし、色は意味を伝える際に生じる問題以外にも問題があります。赤い背景に緑の文字（またはその逆）は、一部の人にとっては判読できず、一般的にもハレーションを引き起こします。また、多くのユーザーは赤と黒の区別がつきません。明るい白い背景に黒の文字は、目の疲れや頭痛の原因になることがあります。

同様に、ある色合いを別の色合いの上に重ねると読みにくくなります。また、明るい色または暗い色を２つ重ねると読みにくくなります（明度）。

ユーザーは、設定変更ができるユーザーエージェントを使ってこれらの問題の一部を改善できるかもしれませんが、最初からこれらの問題を回避することをお勧めします。