アクセシビリティチェック～色編～
前回は、アクセシビリティとユーザビリティが何なのかご紹介しました。
まだの方は、下記のリンクからぜひご覧下さい。
（アクセシビリティ・ユーザビリティって何？）
本記事からは、アクセシビリティにどのように取り組んでいくかご紹介していきます。
色のアクセシビリティとは？
まず、前回のおさらいですが、アクセシビリティとは「みんなが同じように使えること」でしたね。
その「みんな」の中に、視覚障害者や色覚特性など、異なる視覚を持つ人たちがいます。
例えば、「赤と緑の区別がつきにくい」とか「青と黄色の区別がつきにくい」など。
これらの色の組み合わせで、まったく見えない方もいます。
そのような、違った見え方をする人たちにも同じように使えるものにしていくのが
「色のアクセシビリティ」です。
Webデザインとアクセシビリティ
では、web制作において具体的にどのように配慮していけばいいでしょうか？
配慮する点はたくさんありますが、以下が例です。
- コントラスト比
- 色の組み合わせ
- 情報の強調
- 異なる文化
- バランスの取れた配色
- ダークモードの提供
本記事では、コントラスト比に重点を置いて、話していきたいと思います。
【コントラスト比】
まず、文字と背景のコントラスト比が適切であることが重要です。低いコントラストでは、視覚障害者や高齢者がテキストを読みにくくなります。適切なコントラスト比を保つことで、情報へのアクセスが向上します。
コントラスト比は、大きい文字（日本語で29px以上、太字なら24px以上）で3:1 以上。小さい文字で4.5:1 以上。が必要です。（文字の大きさは、規定によって異なります。）
色のコントラスト比をチェックしましょう
コントラスト比を簡単にチェックできるツールがありますので、2つご紹介します。
色のコントラストチェッカー
こちらはWEB上で、背景色と文字色の値を入力するとコントラスト比が足りてるか足りていないか、判定してくれます。
カラーコントラストアナライザー
こちらは、ソフトをダウンロードして使う、ツールになっています。
上記のリンク先の最下部でダウンロードのリンクを提供しているので、そちらからダウンロードしてください。
使い方は簡単で、コントラスト比を調べたい色の上に、カラーピッカーを乗せると、自動で値を入力してくれます。
個人的にはこちらの方が、値を入力する手間がないので、おすすめです。
カラーコントラストチェッカーを使う場合、以下の点に注意するといいです。
- 画面に移っている色を抜き取るため、抜き取る箇所によって色の値が異なる。なので、チェックする場合は一番色が濃い部分を取るようにする必要がある。
- 大きい文字、そうでない文字で判定が別れ、その中でも太字、日本語英語でも基準が変わるので注意。
どちらも、文字と背景色の色の値を入力すると、コントラスト比が適切か否かを診断してくれます。
まとめ
さて、本記事では色のアクセシビリティについて一部ではありますが、ご紹介しました。
色のアクセシビリティを確保するためにはコントラスト比が鍵となります。適切なコントラスト比を保つことで、異なる視覚特性を持つ人たちにとっても情報へのアクセスが向上し、ウェブサイトやアプリケーションがより使いやすくなります。
デザインをする段階で、アクセシビリティについて考えられるといいですね。
