色の違いだけでは情報が伝わらない?ウェブアクセシビリティにも関わるカラーユニバーサルデザイン

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 色の違いだけでは情報が伝わらない?ウェブアクセシビリティにも関わるカラーユニバーサルデザイン

色の違いだけでは情報が伝わらない?ウェブアクセシビリティにも関わるカラーユニバーサルデザイン

色の違いだけでは情報が伝わらない?ウェブアクセシビリティにも関わるカラーユニバーサルデザイン

こんにちはデザイナーの中道です。今回は「色の見え方」について改めて考えたいと思います。

2024年4月に施行となる改正障害者差別解消法により、全事業者を対象にアクセシビリティが義務化されることが決まり、ウェブアクセシビリティについても改めて見直す必要がでてきました。
誰がアクセスしても同等情報を得られるというウェブアクセシビリティを実現するためには、様々な課題を解決する必要がありますが、その中でも今回は「色」について改めて見直していきたいと思います。

というのも、自分の家族に色覚異常のある者がおり、「色の見え方」については子どもの頃から試行錯誤しながら過ごしていたため、色についてはデザインを作成する際にも特に気をつけていた部分でした。そんな中でもまだまだ気づけていないこともあるだろうと思い、改めてカラーユニバーサルデザインを調べてみました。

カラーユニバーサルデザインとは?

カラーユニバーサルデザインとは、様々な色覚の人にも同等の情報が伝わるよう、色使いに配慮したユニバーサルデザインのことです。
このように誰もが同じ見え方ではないということを念頭に置き、配色を考える必要があり、そのためにはまず様々な見え方を理解して、デザインを工夫する必要があります。

様々な色の見え方を理解する

人は、目から入ってくる光によって様々な色を認識をしており、赤、青、緑の3種類それぞれの光を感じる機能が、光を感じる度合いにより様々な色を識別できています。
その3種類の機能が十分に機能しないことで見え方が異なることがあります。

色の三要素

また、色には「色相」「明度」「彩度」の色の三要素があり、それらの組み合わせでさらに多くの色を識別できています。

色覚に変異がある人は特に「色相」の見分けが困難です。また、明度が高い色(パステルカラー)になると、さらに色の見分けが困難になる場合があります。

代表的な見分けが困難な色

1)赤系色と緑系色
2)紫系色と青系色
3)濃い赤色が黒に見える

※上記以外にも見分けが困難な色がある方がいます。

日本では男性の約5%(20人に1人)、女性の約0.2%(500人に1人)先天的にこのように色の見分けが困難な人がおり、目の疾患や加齢に伴う後天的色覚の変化がある人を合わせると約500万人もの色の見分けが困難な人がいます。
このことから色の見分けの多様さについては稀なことでないため、当たり前の認識として多様な色の見え方を理解する必要がありますね。

デザインに使用する色の工夫

前述した様々な色の見え方を理解したうえで、個人的に気をつけていることと、ウェブアクセシビリティ達成基準と併せて、工夫のポイントを自分なりにまとめてみました!

1)色相に配慮する

赤と緑、紫と青、黒と赤を混同してしまう場合があるため、この系統の色味で区別することを避ける。

2)文字と背景色のコントラストを意識する

文字に色をつけるときは、文字と背景色の明度差(コントラスト)を明確につける。

ウェブアクセシビリティ達成基準でも、文字色と背景の間に、4.5:1以上のコントラスト比がある必要があるとの記述があります。(ただし、 3:1 のコントラスト比がある大きな文字、付随的なテキスト又は文字画像、ロゴタイプは除く)

3)明度と彩度を意識する

色相で区別せず、明度差と彩度差で区別する。

4)色以外の表現でカバーする

色だけを頼りに情報や動作を促すような表現は避け、テキストや記号、形などを併せて情報を伝えるようにする。

すでに色の工夫ではなくなっていますが、多色使いの場合には色に限りがありますし、より区別せさたい場合は、色に頼りすぎずその他の表現で区別させたほうが良いかもしれません。

カラーユニバーサルデザインの確認方法

このように配慮して制作したデザインをチェックすることで、より配慮されたデザインに近づきます。
こちらも、自分が知る限りの方法にはなりますが、色の確認方法を少しご紹介します!

スマホアプリでチェック

色のシミュレータ

▶色のシミュレータアプリ紹介サイト

スマホのカメラを通してそのまま画面でシミュレーションを確認できるアプリです。
リアルタイムで確認できるところがとても便利で、自分はいつもこのアプリでデザインの色をチェックしています。

Illustrator、Photoshopでチェック

Illustrator

「表示」→「校正設定」で、イラレでも色の見え方の確認ができます。

Photoshop

「表示」→「校正設定」で、フォトショでも色の見え方の確認ができます。

コントラストの比率をチェック

色のコントラストチェッカー

▶色のコントラストチェッカーサイト

このサイトは、WCAG2.0に基づいた、コントラスト比を確認できるウェブサービスです。
背景色カラー番号と、文字色のカラー番号を入力すると「コントラスト比」と「ウェブアクセシビリティの達成基準」も確認することが可能です

ウェブアクセシビリティを確保した、全ての利用者にとって使いやすいWebサイト

カラーユニバーサルデザインについて改めて見直してみましたが、Webサイト制作をするにあたって考慮する点がまだまだあるなと感じました。

また、今回は色についての内容のみでしたが、ウェブアクセシビリティを確保するには、ウェブアクセシビリティのすべての規格の基準となっているWCAGの以下の4つの原則を達成させる必要があります。

  • 原則1:知覚可能(目が見えなくても情報が伝わる・操作できることなど)
  • 原則2:操作可能(キーボードだけで操作できることなど)
  • 原則3:理解可能(一部の色が区別できなくても情報が欠けないこと、音声コンテンツや動画コンテンツで音声が聞こえなくても話している内容が分かることなど)
  • 原則4:堅牢(現在及び将来の、支援技術を含むユーザエージェントとの互換性を最大化すること)

全ての利用者がWebサイトで提供されている情報を理解しサービスを利用できることを考えて制作することで、障害の有無に関わらずより多くの人にアクセスしてもらえるようなWebサイトになると思います。また、ウェブアクセシビリティを確保することで、他言語への自動翻訳の精度が向上し、海外の人にもアクセスしてもらいやすくなり、Webサイトの活用方法も広がると考えると、Webサイトの可能性はまだまだ底しれないなと改めて感じました。

今回の内容を含めて、今後もさらにユニバーサルデザインを意識した、「全ての利用者にとって使いやすいWebサイト」制作を心がけてきたいと思います!

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!