識別可能/Distinguishable

Table of Contents

色で情報を伝える場合

Webサイトデザインで、背景と前景をはっきり区別すると、ユーザーが読むべき場所に集中できます。

しかし、色に頼ってばかりだと、色をはっきり区別できない人には難しい問題です。
例えば、緑のボタンをクリックして『スタート』、赤のボタンをクリックして『停止』など、色だけで情報を伝えることは避けましょう。

色覚異常や色弱について

男性の約8%、女性の0.5%が何らかの色覚異常をもっています。

先天性の色覚異常は、日本人男性の5パーセント、女性の0.2パーセントの頻度で起きていて、国内で300万人以上が該当し、まれなものではありません。ただしその程度は人によって異なります。検査で指摘されない限り気付かない人もいれば、社会生活に支障を感じる人もいますが、多くのケースでは、色覚の異常のため日常生活に困ることはありません。


13.色覚の異常|目と健康シリーズ|三和化学研究所

色の見え方については、”異常”ではなく、”見え方が違う”ということです。

男性は素早く動く物体を目で追ったり、遠くの細かいものを見分けたりすることが得意です。女性は色の違いを見分けることが得意です。
『オレンジ』という色は、女性はオレンジ色に見えますが、男性の目にはオレンジ色よりも少し赤みが強い色に見えるようです。

性別による色の見え方については、男性と女性、物の見え方に違い | ナショナルジオグラフィック日本版サイトが参考になります。

色覚異常の形態

  • 1型2色覚:赤を感じる細胞がない、緑を感じる細胞がない
  • 先天赤緑異常:緑系~赤系までの色と、紫~青緑までの色に対して、色の差を小さく感じる
  • 三型色覚:青色が理解しにくい、緑と青の区別がつきにくい
  • 色覚異常:すべての色の区別がつきにくい、黒、灰色、白のみしか見えない

このようにただ色の区別がつきにくいと一言では言えない違いが多くあります。すべての人が無理なくWebサイトを見れるように、工夫が必要です。

日本のZEISSオンラインビジョンチェックでは、自身の現在の目の見え方や色の見え方をチェックすることができます。※目の見え方に疑問を持ったら、まずは病院に行きましょう。

色とテキストでボタンの意味を表示する

緑色のボタンに再生アイコンをつけるだけでなく、「開始」という単語を追加し、赤色のボタンに「停止」という単語を追加します。または、操作手順を追加し、最初/左/上ボタンを使用して開始、2番目/右/下ボタンを使用して停止など表示します。

Webコンテンツのよくある問題として、エラーフィードバックメッセージが赤で表示されたり、成功フィードバックが緑で表示されたりなど、メッセージが何を表しているかを示す他の方法がないことです。

色が意味を持つ場合は、同等の意味を持つ他の要素を用意します。色の代わりにテキストを使用することをお勧めします。

色覚異常シミュレーターを体感する

色覚異常を体験するには、色覚異常シミュレーターをで可能です。
ページ左上にある『Type a URL』にチェックしたいWebサイトURLを入れ、『FETCH AND FILTER!』と書かれた緑色のボタンを押します。

Toptal Color Blind Filter で色覚シミュレーターを実行した様子

オーディオ制御

Webサイトで3秒以上流れる”音”は、一時停止ができるようにします。また、停止、再生ができるコントロールを独立して制御できるようにします。

スクリーンリーダーも出力に依存しているため、本来必要なオーディオコンテンツの場所を理解しにくくなることもあります。

Webサイト開発者は、HTML自動再生の使用を避ける必要があります。

コントラスト比

テキストやテキスト画像の視覚的表現は、以下を除いて、少なくとも 4.5:1 のコントラスト比であるべきです。

  • 大きな文字:大きな文字や大きなテキスト画像のコントラスト比は少なくとも 3:1 です
  • 装飾:純粋な装飾で、単体で意味を持たないテキストやテキスト画像は、コントラストの要件はありません。
  • ロゴ:ロゴやブランド名の一部であるテキストには、コントラストの要件はありません。

コントラスト比とは、ディスプレイ装置などの性能指標の一つで、最も明るい表示状態(白)を 4.5 以上とし、最も暗い表示状態(黒)の明るさを 1 とみます。

良い例

例えば、背景色を #EAF0E0 にし、テキストカラーを #00000 にした場合、コントラスト比は 18.04:1 になるため、見やすいコントラスト比ということになります。

悪い例

例えば、背景色を #EAF0E0 にし、テキストカラーを #77777 にした場合、コントラスト比は 3.85:1 になるため、見にくいコントラスト比ということになります。

ここで使ったオンラインツールは、Juicy Studio: Luminosity Colour Contrast Ratio Analyserですが、WebAIM: Contrast Checkerの方がWCAGに沿った結果が出るため見やすいです。

WebAIM: Contrast Checker


また、Chromeの開発ツールでカラー選択するとき、アクセシビリティの確認ができます。

下の画像では、当ホームページの『Read More』リンクカラーが 1.35 で非常に見にくい、と示しています。

Chromeの開発ツール内にコントラストを確認できる場所があります。

テキストサイズ

キャプションやテキスト画像を除き、テキストは各種支援技術を使わず、内容や機能を損なうことなく最大200パーセントまでサイズを変更することができるようにします。今では当たり前のように使用されていると思いますが、念のため記載いたします。

  • em単位を使用してテキストコンテナのサイズを指定する
  • フォントサイズにパーセントを使用
  • フォントサイズにem単位を使用する
  • グリッドレイアウトの使用
  • ユーザーがWebページ上のすべてのテキストサイズを最大200パーセントまで段階的に変更できるようにするコントロールをつける
  • テキストのサイズが変更されても、各種テキストコンテナの幅が変更されず、その他機能が失われないようにする

ほとんどのブラウザのフォントが16pxサイズです。12pxサイズ以下では小さいため、使用を避けます。

emを使うべきか、remを使うべきかなど、世界各国で様々な情報が飛び交っているため、ここではそれについては触れません。WCAGではemを推奨しています。理由もありますが、情報量が多いため省略します。

google 広告