色覚多様性への配慮 −P型、D型色覚のシミュレーションをお馴染みのソフトで実行−

色覚多様性への配慮 −P型、D型色覚のシミュレーションをお馴染みのソフトで実行−SDGs

私たちが日常的に目にする色の世界は、実は人それぞれ異なる見え方をしていることをご存じでしょうか。多くの人々が当たり前と感じる視覚情報も、一部の方には違った形で認識されている場合があります。

このような視覚特性について理解を深めることがより良いデザインにつながります。本記事では、色覚多様性についての基本からカラーユニバーサルデザインの概念までわかりやすく解説します。

「色覚多様性」とカラーユニバーサルデザイン

色覚多様性は、視覚的な認識における個人差を示す重要な概念であり、人間がどのようにして周囲の世界を捉えるかについて深く関わっています。

光が目に入ると網膜内の錐体細胞によって処理されますが、このプロセスには遺伝や環境要因などさまざまな影響があります。その結果として、一部の人々は特定の波長域で異なる感受性を持つことがあります。この現象は社会生活にも広範な影響を及ぼし、デザインや教育分野では配慮が求められる場面も増えています。また、多様性への理解を促進するためには、それぞれの見え方や感じ方について正確な知識を共有することが不可欠です。こうした取り組みは共生社会実現への一歩となり得ます。

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

東洋美術印刷株式会社の営業・デザイナー・オペレーターは、情報をわかりやすく伝えるスキルを身に付けるために、UCDA(一般社団法人ユニバーサルコミュニケーションデザイン協会)の資格を取るよう推奨されています。

そのために学習する題材の一つがカラーユニバーサルデザインです。

カラーユニバーサルデザインは、色覚多様性に配慮したデザインです。

以下、色覚多様性について学んだ事を簡単にまとめてみます。

 

ヒトの光を認識する視細胞には、赤・緑・青の光をそれぞれ感じる錐体と呼ばれるものがあり、光(色)を感じる度合いの違いで錐体は様々な色を識別しています。

3種類の錐体全てが揃っている色覚をC型と呼び、割合が一番多いです。

赤の錐体に変異がある色覚をP型、緑をD型、青をT型と呼びます。

また、錐体を1種類しか持たない、あるいは錐体が全く無い色覚はA型と呼び、色を明暗でしか感じることができません。

P型、D型色覚を持つ人を合わせると、日本人男性の20人に1人、女性の500人に1人の割合と珍しい色覚ではありませんが、T型、A型色覚の割合はごく少ないです。

P型、D型色覚は赤と緑を識別しづらく、紫から青の範囲の色がほぼ同じ色に見える、という点で、色の見え方が似た色覚になります。

P型色覚とD型色覚の大きな違いは、P型色覚は濃い赤が黒に見える事です。

ヒトの色覚タイプは大きく5種類に分けられる

  • C型(Common)  3種の錐体が揃っている(一般的)
  • P型(Protanope)  赤の錐体に変異がある(色弱の約25%)
  • D型(Deuteranope)緑の錐体に変異がある(色弱の約75%)
  • T型(Tritanope)  青の錐体に変異がある(ごく少数)
  • A型(Acromatic)  錐体が1種類 または全くない(ごく少数)

C型色覚の割合は日本人男性の約95%、女性の99%以上
C型以外の色覚の割合は日本人男性のほぼ5%
P型色覚とD型色覚の見え方は似ている

※ P型、D型、T型等はNPO法人CUDO(カラーユニバーサルデザイン機構)が提案している呼称。
  1型、2型、3型という日本眼科学会で定めた呼称もあります。

 

【コラム】青色は第一候補

当社では保険会社樣より「しおり・約款」のお仕事を多くいただいています。

その中の案件で「黒」と「各商品イメージの特色」を使った2色刷りの特色のほうを、色覚多様性に配慮するため、全て「明るい青色」に統一した事がありました。

「青色」というのは、上で述べているように、合わせると色弱のほとんどの割合を占めるP型、D型色覚者とC型(一般)色覚者との見え方に相違が少ないので、色覚多様性に配慮をして使用する色として第一候補になるのかもしれません。

 

色覚多様性(P型・D型)において見分けにくい色の組み合わせ

色覚多様性に配慮した印刷物等の作成をする場合、隣り合った色面に明度差をつける、境目に境界線をつける、といった配慮の仕方はC型(一般)色覚者にも分かりやすいと思います。

その配慮はC型色覚者にとっても見やすいものになるからです。

しかし、C型色覚者には見分けしやすくても、P型、D型色覚者には見分けしづらい色の組合せがあり、それを避ける配慮はC型色覚者には分かりづらいのではないでしょうか。

下の図はそのような組合せを意図的に作ったものです。

左側は元の画像で、右側はP型色覚者が左側の画像を見たときの見え方をC型色覚者が想像できるようシミュレートしたものです。※

(※)疑似的な変換であり、実際のP型色覚の見え方とイコールではありません。
根本的に、同じP型色覚でも強度・弱度があり、その中でも違いがあり、皆が同じ見え方ではありません。

 

【実践】今すぐできる、カラーユニバーサルデザイン4つの基本手法

「見えにくさの要因」を特定し、取り除くための具体的な実践方法を4つのポイントに分けて解説します。

① 強調色「赤」の正しい使い方

ビジネス資料で最も多用される「赤文字」や「赤背景」ですが、P型色覚者には「濃い赤が黒に見える」という視覚特徴があります。黒地に赤文字を重ねるようなデザインは、文字が背景に溶け込んでしまい、非常に読みにくくなります。
対策:危険や注意を促すサインは「黄色と黒」の組み合わせで表現するか、赤文字を使用する場合はカラーユニバーサルデザイン推奨の赤(RGB: 255, 75, 0)を採用することで、視認性を劇的に向上させることができます。

② グラフや図表の配色ルール

円グラフや棒グラフで「赤と緑」や「青と紫」といった見分けにくい色を隣り合わせに配置してしまうと、色弱者にはすべてのエリアが同じような色に見えてしまい、データの判別が困難になります。
対策:色だけに頼らずに、エリアの境界線に「白の区切りライン」を1本入れるだけで、色の輪郭がはっきりして識別しやすくなります。また、可能であれば線にパターン(点線など)をつけたり、網掛け処理を施して、色以外の視覚情報も付与するのが理想的です。

③ 背景と文字の「十分なコントラスト(明度差)」

背景色と文字色の明るさに差がないデザイン(例:薄いグレー背景に濃いグレーの文字、水色背景に白文字など)は、色覚多様性を持つ人にとって非常に見えづらくなります。
対策:背景色と文字色には、数値化して「60%以上の明度差」をつけることを基準にしてください。背景を極力薄くし、文字を十分に濃くする(またはその逆)というコントラストの確保は、色覚多様性の方だけでなく、60代の約60%・80代のほぼ100%が発症する「白内障」の高齢者(全体的に黄色がかった暗い見え方になる特性)への配慮としても極めて有効です。

Illustrator、Photoshopでも色覚多様性のシミュレーションができる

色覚多様性に配慮した印刷物等を作成するために、一番良い方法は色弱者によるチェックですが、全ての作成物にそれを行うのは現実的ではありません。

実際にはC型色覚者用として用意した画像を、P型・D型色覚者の見え方に色を変換するシミュレーションソフト等でチェックする事が多いと思います。

検索すると無料で使用できるPC版、スマートフォン版のアプリケーションやソフトウェア、webページが見つかります。

また新たにそのようなツールを探さなくても、Adobeの定番ソフトウェアのIllustrator、Photoshopにもシミュレーション機能※があります。

(※)疑似的な変換であり、実際のP型色覚の見え方とイコールではありません。
根本的に、同じP型色覚でも強度・弱度があり、その中でも違いがあり、皆が同じ見え方ではありません。

Illustrator、Photoshopともに「メニュー/表示/校正設定/P型色覚またはD型色覚を選択」でP型もしくはD型色覚の見え方のシミュレーションができます。

Illustrator / Photoshopでの色覚シミュレーション手順

Adobe IllustratorまたはPhotoshopで作成中のデザインファイルを開く。

上部メニューの 「表示」 > 「校正設定」 を選択する。

「P型(第1色覚)色覚」 または 「D型(第2色覚)色覚」 を選択する。

画面上の見え方がシミュレーションモードに切り替わる(ショートカットキー Ctrl+Y / Cmd+Y でプレビューの切り替えが可能)。

色覚多様性に関するよくある質問

Q.日本国内における色覚多様性(色弱)の割合はどれくらいですか?

A.日本人男性の約5%(20人に1人)、女性の約0.2%(500人に1人)と言われており、国内全体では約300万人以上の当事者がいます。

Q.カラーユニバーサルデザインで推奨される色は何ですか?

A.「明るい青色」です。C型(一般色覚)だけでなく、P型・D型色覚の方にとっても見え方の差が少なく、識別しやすい色として第一候補に挙げられます。

色覚多様性に配慮したデザインを目指すべし

グラフや表、地図などイメージや雰囲気ではなく正確な情報の伝達が必要なものを作成する場合は特に、全ての方に分かりやすいものを目指して作成すべきだと思います。

IllustratorやPhotoshopはDTP、Web作成等に携わる方の多くが使用されていますので、色覚シミュレーション機能を活用されてみてはいかがでしょうか。

 

・関連資料のダウンロード

【ストリーミング動画】Webアクセシビリティの向上を目指すカラーユニバーサルデザインセミナー【ストリーミング動画】Webアクセシビリティの向上を目指すカラーユニバーサルデザインセミナー
 
本セミナーでは、色覚多様性に配慮したカラーユニバーサルデザインを中心に、
障害者差別解消法とWebアクセシビリティの基礎知識、色弱者への色彩設計の具体的な実践方法、わかりやすいWebデザインの評価手法について解説いたします。
 

 

タイトルとURLをコピーしました