アクセシビリティを向上させる色の知識
こんにちは。最近「アクセシビリティ」という言葉をよく耳にするようになりましたね。
特に、Webデザインやサービス開発の現場では、その重要性がますます高まっています。
関心が高まった理由の1つとして挙げられるのが、2024年4月に「障害者差別解消法」の改正内容が適用されたことです。
以前と何がが変わったのかというと、今まで行政機関のみ義務とされてましたが改正により民間事業者にも「合理的配慮の提供」が義務づけられました。
具体的な内容については先の話で触れますが、こういった変化もあってデザイナーがアクセシビリティに配慮した提案をする機会も増えてるのではないでしょうか？
目次
色に関するアクセシビリティを中心に
ちょっと前から私は業務の片手間で色彩の勉強を少しずつしています。勉強していく中でアクセシビリティ対応と色彩の知識は通じるものが多そうだと感じたので、アクセシビリティを高めるために知って欲しい色の知識についてこの記事ではまとめています。
一般的なアクセシビリティ対応を網羅した内容ではなく「色」と「アクセシビリティ」ついてフォーカスしているので
色彩検定(UC級)の内容を知らないよという方はぜひ読んで欲しい内容になっています。
また、実際の業務で活用して便利だったツールなど合わせて紹介しています。
「合理的配慮の提供」が義務になると？
話が少し戻りますが冒頭にも書いた「合理的配慮の提供」が義務になる、つまりこれがどういうことかというと
障害のある人が社会の中で思うバリアを取り除くため、負担が重すぎない範囲で対応していこうね。ということです。
アクセシビリティの対応自体は努力義務の「環境の整備」という法律に位置づけられているので、今対応していないと罰則になるという訳ではありません。
今後努力義務から義務に変わる可能性もないとは言えないので、今からでも徐々にアクセシビリティ対応を進めていくのが良さそうですね。
色に関わるアクセシビリティ対応
アクセシビリティ対応の中でも色に関係する項目が下記の内容です。
Web Content Accessibility Guidelines (WCAG) 2.0 で定義されていること
- 1.4.1 色の使用
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。(A) - 1.4.3 コントラスト
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。(AA) - 1.4.6 コントラスト
テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。 (AAA)
1.4.1 色の使用
色を使って伝えている情報に対して、すべての利用者が問題なく伝わるようにすること。
例えば、必須項目であるという情報を伝える為に「赤色」を使用する。こういったものが該当します。
テキスト情報でも必須項目であるということが伝われば問題ありませんが、色だけが唯一の伝達手段になっている場合は「色とは別の視覚的手段で補助」しなければいけません。
「テキスト」「装飾」「アイコン」で伝達の補助をするなど方法は色々あります。
1.4.3 コントラスト、1.4.6 コントラスト
ロービジョンの人がテキストを読めるように、テキストとその背景との間に十分なコントラストを提供すること。
ロービジョンとは下記のことを指します。
- 見え方に異常があり、日常生活で支障をきたしている状態。
- 失明してはなく、失明に至る前の視覚が低下した状態。
視力が低下されてるご高齢の方や色覚異常を持つ方が上記に該当されます。
加齢に伴いコントラストの感度が低下されていたり、色覚異常を持つ方は人によって異なる色相を知覚されるため通常の利用者とはコントラストも異なる知覚になります。
モノクロで確認する方法は？
既存のサイトでコントラストを確認するなら、一先ずモノクロにしてみるのが早いです。
モノクロにすることでコントラストの調整はすることができますが、合理的配慮をするにはまだ足りていません。
人によって見えやすいものが違う
色覚異常を持つ方には見えやすい色が人によって異なります。
赤い光を受け取るL錐体がない方、赤色を感じられないため緑色が黄色に見えます。
緑の光を受け取るM錐体がない方、緑色と赤色が黄みがかり、緑色と赤色の区別が難しくなります。
青い光を受け取るS錐体がない方、青色を感じられないため黄色がオレンジ寄りになり、黄色と青色の区別が難しくなります。
色覚多様性の見え方は主に下記で分類されてます。
全ての見え方に配慮してデザインするとなると配色に制限があり難しいので、1.4.1 色の使用で定義されてるように色の情報だけに頼らずデザインすることが重要になります。
それぞれの特徴に合わせて色彩配慮するには次のツールを使ってデザインするのが便利です。
色覚ツールの紹介
chromeのツールでいまの見え方を知る
chromeのDevToolsでシミュレーションができます。
エミュレートできる種類
- エミュレーションなし
- かすみ目
- 低コントラスト
- 1型2色覚（赤色の識別不可）
- 2型2色覚（緑色の識別不可）
- 3型2色覚（青色の識別不可）
- 色覚異常（色の識別不可）
F12を押すとDevToolsが開きます。
（画面を右クリックしてから検証をクリックしてもDevToolsを開けます）
右上のメニューを開いて「その他のツール」＞「レンダリング」を選びます。
「色覚異常をエミュレート」の箇所で任意の見え方にシミュレーションができます。
XDのプラグイン「Stark」を使ってデザイン調整
「Stark」のプラグインをXDに追加することで、簡単に作業中のデザインのコントラスト比や色覚異常を持つ方の見え方を確認できます。
クリエイティブクラウドで「Stark」を検索してプラグインを追加します。
Starkの機能
XDでプラグインをクリックすると「Contrast」「Typography」「Touch Targets」「Vision Simulator」が出てきます。
- Contrast：コントラストチェッカー。背景とテキストのコントラスト比が分かる。
- Typography：文字サイズが小さい（11px以下）と指摘される。
- Touch Targets：タップする対象のサイズがデバイスごとに適切か判断できる。
- Vision Simulator：色覚特性によるWebページの見え型をシミュレーションできる。
Contrast
確認したいデザインの背景と文字を両方選択した状態で、Contrastをクリックするとコントラスト比が表示されます。
Vision Simulator
確認したいデザインのアートボードを選択した状態で、Vision Simulatorをクリックすると色覚異常を持つ方の見え方を確認できます。
アートボードの名前にシミュレーション名がつきます。
各アートボードの名前につく名前の意味
- Tritanopia：３型２色覚（青い光を受け取るS錐体がない）
- Protanopia：１型２色覚（赤い光を受け取るL錐体がない）
- Deuteranopia：２型２色覚（緑の光を受け取るM錐体がない）
- Achromatopsia：１色覚（赤緑青を感じられずモノクロに見える）
さいごに
色彩に関わる範囲だけでもアクセシビリティで配慮するべき点は多くあります。
アクセシビリティ対応の最初の一歩としてまず今回紹介した対応を考えてみるのはいかがでしょうか？
色彩検定のUC級でロービジョンや色覚特性について詳しく勉強できるのでぜひ今回気になった方はそちらも調べてみるのもおすすめです。
2020年入社。
フロントエンドも強くなりたいWebデザイナー。
主にWebページの修正やバナー制作を担当。特撮が好き。
