読者です 読者をやめる 読者になる 読者になる

つばさのーと

つばさの日常を綴るのーと

WEBアクセシビリティから考える色の使い方

f:id:tsubasa123:20170105150830j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

昨日、目次の必要性について考えましたが、今日はお色について少し調べたことをまとめておきます。浅い知識で調べたことのまとめになりますので、誤認・誤報があるやもしれません。有識の方、ご指摘いただけますと助かります。

 

色は情報にアクセントを加える

 

あまりデザインに関する知見はないので深い言及は控えますが、デザインにおいて配色は非常に重要な役割を担っています。

 

言葉通り、「暖色」は暖かいイメージを、「寒色」は冷たいイメージを、特定の色に注目しても、「赤色」は注意、「青色」は爽やか、「金色」は高級感、「紫色」はちょっとアダルトなど、多少違いはあるかもしれませんが、多かれ少なかれ、色から受ける印象というものはあると思います。

 

ブログやWEBサイトのイメージも配色によって大きく変わります。コーポレートカラーとかいいますよね。ターゲットユーザーや取り扱うコンテンツによって適切な配色が行われます。

 

また、WEBデザインに置いてデファクトスタンダード的な、暗黙的なルールもあったりします。例えば、アンカーリンクを設定するテキストの文字色は青系の色にして、文字に下線を設定するのが一般的だと思います。特に装飾を行わなくても、ブラウザが自動的に装飾してくれる場合もあります。

 

ちなみに、リンクテキストに青系の色が利用されるのにもちゃんと理由があるようでして、視覚障害の方は赤系の色を判別するのが難しく、逆に青系の色は判別しやすいため青系の色が使われることが多いようです。豆知識としてどうぞ。

 

視覚障害を持っている人は意外と多い

 

視覚障害者 - Wikipedia

 

ある説では、世界70億の人口のうち、1億5千万人が視覚障害者とするものもある

 

Wikipediaの引用ですが、この説が正しければ4~5%の人が視覚障害者ということになりますね。視覚障害は「弱視者」と「全盲」に分けられており、弱視者が7割強を占めているようです。視覚障害=全盲というイメージがありましたが、そうでもないようです。

 

また、視覚障害の定義も医学モデルと社会モデルがあるようで、行政の認定を受けているかどうかなど、判断基準も色々あったりなかったり。この辺はアクセシビリティからはちょっとそれるので気になる方は上記ページを見てください。

 

私が考えるアクセシビリティ

 

さて、ここからやっとアクセシビリティのお話です。

 

ごちゃごちゃと説明する前に、私が考えるアクセシビリティとは『ユーザーのアクセス手法やアクセス状況に左右されずに、同じ情報を提供することができること』と定義しておきます。

 

もう少し具体的にすると、「利用するデバイスや通信速度に違いがあっても同じ情報を提供できる」という環境に依存する問題と、「視覚障害や聴覚障害などの障害があっても同じ情報を提供できる」という身体的な障害に依存する問題の両方をクリアすることが私が考えるアクセシビリティです。

 

偉そうに言いましたが、書籍の受け売りです。どの本でも同じようなことが書かれていましたし、概ね間違ってはいないと思います。

 

色だけで伝えるのはNG

 

達成基準 1.4.1 を理解する | WCAG 2.0解説書

 

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。

 

アクセシビリティの規格、JIS X 8341-3の1.4.1ではコンテンツの内容を色だけで伝えることは良くないことだと説明されています。色だけだと視覚障害の方や、モノクロのディスプレイを利用している人に対してコンテンツの内容を正確に伝えることができなくなってしまうからです。

 

色を上手く使うことによってユーザビリティやアクセシビリティを高めることは有効な手法ですが、それだけに頼ってはいけません。あくまで補助的な使い方をしましょう。

 

f:id:tsubasa123:20170105145856j:plain

 

「赤色」は注意、と先述しましたが、時おり、「赤字の項目は必須です」といったような注意書きがされている問い合わせフォームを見かけることがありますが、これが良くない例ですね。

 

f:id:tsubasa123:20170105145906j:plain

 

このように、必須であることはテキストとしてユーザーにすることで、ユーザーの状況や環境に左右されることなく、情報を伝えることができるようになります。

 

同様に、入力エラー時にラベルテキストや入力エリアに色付けするようなUIも見かけますが、これもよくないですね。項目エラーもテキストとして明示したほうが親切でしょう。

 

色のコントラスト比にも注意する

 

達成基準 1.4.3 を理解する | WCAG 2.0解説書

 

テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。

 

こちらは前景色と背景色のコントラスト比に注意しましょう、という話です。WEBサイトの場合、前景色はテキストの文字色のことを指しています。

 

大きな文字、ロゴやブランド名の一部などの例外を除いて、前景色と背景色のコントラストを確保することで、視覚障害がある人(ロービジョンとも言うようです)でもテキスト情報を認識できるような配慮が必要になります。

 

これには3段階のレベルがあるようで

 

  • レベルA(3:1)
  • レベルAA(4.5:1)
  • レベルAAA(7:1)

 

のように定義されています。レベルAが「標準的なテキスト及び視力における最低限のレベル」と説明されていますので、最低限確保したいレベル。努力目標的なものでしょうか。

 

レベルAAが「中度の弱い視力、先天的又は後天的な色弱、あるいは通常、加齢に伴うコントラスト感度の衰えに起因する、コントラスト感度の低下を考慮している」とあるので、達成していればアクセシビリティに配慮していると言えるレベル、というような認識です。

 

コントラスト比の数値の算出方法はこちらのサイトで説明されていました。RGBのそれぞれに計算式を当てはめることで算出できるようです。

 

春はあけぼの。やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。

 

ちょっと強引ですが、上の枠組みの中の文字、見にくいですよね。コントラストが確保できていない悪い例です。レベルとか計算式とか色々説明しましたが、文字の色と背景の色に適切なコントラストを確保して、ユーザーにとって読みやすいようにしましょうね、というのが趣旨になります。たまに白背景に薄いグレーの文字だったり、黒っぽい背景に濃いグレーの文字のサイトを見かけたります。

 

ランディングページのようなデザイン重視のサイトで、戦略的にやっているのであれば良いのですが、意図せずにコントラストを確保できていないのであればユーザーのことを考えて設定を見直したほうがいいかもしれませんね。アクセシビリティだけでなく、ユーザビリティの向上にも繋がります。

 

コントラスト比チェッカーでチェック

 

syncer.jp

 

計算とかしたくない人は上記の用なオンラインのコントラストチェッカーを使うと捗ります。他にも検索するといくつかサイトが引っかかりましたのでそれなりに需要がある機能のようですね。作ってみようかな。

 

さいごに

 

ユーザビリティとかアクセシビリティとかつまらないよ、と昔は思っていましたが、最近は私の中で大ブームです。オシャレぶってリンクの下線とか隠していたんですが慌てて設定を変更しました。まだまだ勉強不足です。

 

今回はアクセシビリティについて、色をテーマに考えましたが、スマホ全盛期のこの世の中ですので端末に対する面や、格安SIMの普及に注目して通信環境の面からも調べてみると面白いかもしれません。端末ごとの操作はそのうち調べる予定です。

 

ではでは、最後までお付き合いいただきありがとうございました。