ポストさんてん日記

放射線・エネルギー・環境・化学物質・食品などの情報をアーカイブしたり、医学分野の素人勉強をノートしたり、です。 リンクはご自由に。

【後編】カラーユニバーサルデザイン、色使いの方法

[ 2020/09/02 (水) ]
脳の勉強ノート、第10-3弾です。
【前編】色覚のしくみ、色覚異常の基礎からの続きです。

目次

復習3.色覚に関する用語について
復習4.色弱(色覚異常)のタイプ
1.色のお話に出てくる用語
 色相、明度、彩度
 RGB、16進カラーコード、CMYK
 暖色、寒色

2.3項の諸資料から有用だと思った箇所を引用(ごく一部)
 P型色覚、D型色覚の方が特に区別の困難な色の組み合わせ
 P型色覚の方は「濃い赤」(R:255,G:0,B:0)は、ほとんど「黒」に見える
 暖色系(赤~緑)と寒色系(緑~青)のそれぞれの側から交互に選ぶ、黄色,黄緑,明るい緑は同時に使わない
 文字に色を付けるときは、背景色との組合せに配慮
 彩度の低い色(パステルカラー)同士の組合せは避ける
 色の明度や彩度の差を利用する
 形状を変える(グラフ)
 ハッチング(地模様)や境界線を入れる(グラフ)
 ハッチング(地模様)や境界線を入れる(グラフ)
 やむを得ず見分けにくい色が重なってしまう場合、縁取りを付ける
 強調箇所は色以外の方法を組み合わせる

3.カラーユニバーサルデザインに関するリンク
4.赤のレーザーポインターはP型の人に見えないことがある
5.色弱(色覚異常)の方が、どの色がどう見えるか?をチェックするツール
 色覚シミュレーションツール
 上記を含む、様々な色覚シミュレーションツールの紹介サイト

6.色弱(色覚異常)の人にも分かりやすいPC用カラーパレット
7.参考情報
8.関連エントリー

復習3.色覚に関する用語について
ここは、復習として、【前編】色覚のしくみと色覚異常の基礎から転記です。

  • 日本眼科学会では、2007年以来、色覚異常という言葉は使っても、色盲や色弱という言葉は使っていない。
    以前の色盲は2色覚(まれだが1色覚もあり得る)、以前の色弱は異常3色覚。
  • CUDO(NPO法人カラーユニバーサルデザイン機構)やCUD(人にやさしい色づかいをすすめる会)では色弱を提唱。
    現在の「色彩コミュニケーション社会」における「弱者」として「色弱」を再定義しましたが、決して色に弱いということではありません。従来呼称の色盲・色弱・色神異常・色覚異常・色覚特性等の言葉や表現を尊重しつつ「色弱者」という表現を使用しています。
  • 日本遺伝学会が2017年9月に改訂した遺伝学用語集「遺伝単」では、色覚多様性を提唱。
言葉の言い換えについては多くの議論が延々と繰り返されてきたが、大切なのは言葉ではなく、その程度や質にかかわらず様々な色覚特性を持つ人がバリアフリーに暮らせる具体的な方策を提案することである.

本エントリーでは、原則としてCUCDの提唱に沿う表現としたが、図表はオリジナルのまま引用。

復習4.色弱(色覚異常)のタイプ
ここも、復習として、【前編】色覚のしくみと色覚異常の基礎から転記です。

色弱(色覚異常)は、少なくとも1種類の錐体細胞を欠損している人が持っている障害である。
3つの椎体の分光特性
人間の3つの椎体の分光特性02
出典:色覚についての基礎知識(人にやさしい色づかいをすすめる会)

上の光の帯(シミュレーション画像)で、一番上のC型がL,M,S錐体のすべてをもっている人が見る光の色。
それに対してすぐ下のP型強度の帯は、右端がかなり暗い色になっている。L錐体がない、つまり長波長付近の光(赤)に反応しないため、暗く見える。
また、これらの図で重要なことは、P型D型の場合、緑系と赤系が似通った色相に見えること。(赤と緑の視物質は吸収スペクトルの重複が大きいので、どちらが異常になっても似た症状になる。)
異なる色なのに、ある人にとっては似たような色に見えていることがわかる。(シミュレーション画像は、一例であり、見え方を正確に再現したものではない。)

CUDO(カラーユニバーサルデザイン機構)頻度
(男性)
日本眼科学会
錐体細胞タイプ呼称タイプ



C型一般色覚者約95%正常色覚
P型強度色弱者約1.5%1型2色覚
弱度1型3色覚
D型強度約3.5%2型2色覚
弱度2型3色覚
T型約0.001%3型2色覚
A型約0.001%杆体1色覚
全色盲【旧】
  • C型:Common のC(「よくある」とか「ありふれた」という意味)
  • P型:Protanopes のPは「proto(第一の)」+「an(欠損)」+「opia(視覚)」。
  • D型:Deuteranopes のDは「deuter(deutero)(第二の)」。
  • T型:Tritanope。
  • A型:Acromat。

.
1.色のお話に出てくる用語

色相、明度、彩度
色相
色相
色の種類
赤・橙・黄・緑・青・紫・・・
明度
明度
明るさの度合い
白に近づくほど、明度が高い
暗い⇔明るい
低明度⇔中明度⇔高明度
彩度
彩度
鮮やかさの度合い
白や黒を含まない色は彩度が高い
くすんだ(にぶい)⇔あざやか(さえた)
低彩度⇔中彩度⇔高彩度

RGB、16進カラーコード、CMYK
RGBの三原色(レッド・グリーン・ブルー)の頭文字
各色は0~255の256段階で表記
光で色を表現
コンピュータやテレビのディスプレイの場合
16進カラーコード例えば
白色は#ffffff、黒色は#000000
同上
Webサイトを制作する場合
CMYKの三原色と呼ばれる
C:シアン,M:マゼンタ,Y:イエロー,
K:キープレート(key plate黒色)

の頭文字
インクで色を表現
印刷物の場合
RGBと16進数カラーコードの相互変換ツール(PEKO STEP)

暖色、寒色
暖色寒色

.
2.3項の諸資料から有用だと思った箇所を引用(ごく一部)
ブログやパワーポイント・エクセルを作成する立場で

P型色覚、D型色覚の方が特に区別の困難な色の組み合わせ
P型色覚、D型色覚の方が特に区別の困難な色の組み合わせ
P型色覚の方は「濃い赤」(R:255,G:0,B:0)は、ほとんど「黒」に見える
一般色覚者(C型)とっては「赤」は目立つ色なので、重要な部分や強調したい内容に赤色を用いることが多い。しかし、特にP型色覚者にとって、濃い赤は目立たない色。そこで、短波長(オレンジ)寄りの「朱赤」を使うと、同じ赤でも緑視物質や青視物質を刺激することが可能となり、黒い文字列の中でも文字が読めるようになる。

(3項4.1の)『カラーユニバーサルデザイン推奨配色セットver.4』で、赤として推奨されているのは、R:255,G:75,B:0。(ver3では、R:255,G:40,B:0、だった。)
*1*2*3RGB16進
カラーコード

濃い赤Microsoft Officeの標準色
本ブログ編集の標準色
濃い赤70高12幅R:255
G:0
B:0
#ff0000
朱赤JIS安全色の赤*4
(3項4.1の)
カラーユニバーサルデザイン
推奨配色セットver.4
』の赤
朱赤70高12幅40WR:255
G:75
B:0
#ff4b00
*1 ブログ編集機能の『テキスト色』で編集
*2 ブログ編集機能の『背景色』で編集
*3 エクセルで作成した図を張り付け
*4 正確には『デジタルサイネージ用』の赤で、『印刷・プリンター出力用』、『塗装用の参考』として3つの赤の推奨値が規定されている。
JIS安全色 ( JIS Z 9103 ) 改正内容の紹介

暖色系(赤~緑)と寒色系(緑~青)のそれぞれの側から交互に選ぶ
黄色,黄緑,明るい緑は同時に使わない
暖色系(赤~緑)と寒色系(緑~青)のそれぞれの側から交互に選ぶ
文字に色を付けるときは、背景色との組合せに配慮
文字に色を付けるとき01
文字に色を付けるとき02
彩度の低い色(パステルカラー)同士の組合せは避ける
彩度の低い色(パステルカラー)同士の組合せは避ける

色の明度や彩度の差を利用する
色の明度や彩度の差を利用する

形状を変える(グラフ)
形状を変える(グラフ)

ハッチング(地模様)や境界線を入れる(グラフ)
ハッチング(地模様)や境界線を入れる(グラフ)

やむを得ず見分けにくい色が重なってしまう場合、縁取りを付ける
縁取りを付ける

強調箇所は色以外の方法を組み合わせる
強調箇所は色以外の方法を組み合わせる

.
3.カラーユニバーサルデザインに関するリンク
敬称略     
表題発行/サイト
作成/監修
発行日
PDF
東京都カラーユニバーサルデザインガイドライン
注意:掲載されている『カラーユニバーサルデザイン推奨配色セット』はver.3
東京都福祉保健局
監修:NPO法人カラーユニバーサルデザイン機構
2011/3
PDF
色使いのガイドライン
神奈川県保健福祉部
監修:伊藤啓助教授
2005/4
PDF
カラーユニバーサルデザインガイドブック
NPO法人カラーユニバーサルデザイン機構
4.1PDF
カラーユニバーサルデザイン推奨配色セット ガイドブック 第2版
PDF
同上 概要版
いづれも、『カラーユニバーサルデザイン推奨配色セットver.4』掲載。
カラーユニバーサルデザイン推奨配色セット制作委員会
(伊藤啓准教授、他)
2018/7
4.2(上記の解説的な説明)
色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン 推奨配色セット
(バリアフリーに配慮した見分けやすい色の組み合わせ)
東京大学分子細胞生学研究所
伊藤啓准教授
遠藤啓太助教
2018/8
配色のバリアフリー伝わるデザイン
研究発表のユニバーサルデザイン
高橋佑磨助教、他
「色覚障がい」の疑似体験TOYO INK
PDF
色覚に関する指導の資料
文科省2003
色覚バリアフリープレゼンテーション法岡部正隆、伊藤啓2016/8

.
4.赤のレーザーポインターはP型の人に見えないことがある

赤いレーザーポインターの光は、特にP型の人には見えにくいか全く見えない。
2000年代になって、すべての人(P型、D型、C型)の比視感度曲線のピークに近い 532nm という波長の緑色のレーザーポインターが開発された。比視感度の基準によると赤色のレーザー光に比べて緑色の方が8倍も明るく誰にとっても見やすい。
開発当初、種類が少なく高価だったが現在では種類が増えて入手しやすくなっている。(赤レーザーに比べると少々高価。)

【参考】
レーザーポインターで緑が増えた理由(ひこまる@東大サイエンサー 2020/4/19)
色覚バリアフリーのスライド・3つのポイント(エナゴ学術英語アカデミー 2018/9/7)
【2019年】レーザーポインター選びの基本とおすすめモデル(気ままな はせのらブログ 2019/7/6)
.
5.色弱(色覚異常)の方が、どの色がどう見えるか?をチェックするツール

色覚シミュレーションツール
敬称略     
表題発行その他
色のシミュレータ
スマートフォン用のアプリ
浅田一憲無料
UDingシミュレーター
制作されたデザインが、色覚タイプ別にどう見えているかを確認できるツール
東洋インキ無料
UDingCFUD
色覚障がいに配慮したデザインを行う際の配色を確認しながら作業できます。
東洋インキ無料
Vischeck
VischeckJ version 1.0 のインストール
Vischeck Jについて(カラーユニバーサルデザイン機構)
米国スタンフォード大学の
Bob Doughertyと
Alex Wadeが開発
無料
Illustratorアドビシステムズ
Photoshop CS4アドビシステムズ

上記を含む、様々な色覚シミュレーションツールの紹介サイト
色覚シミュレーションツール紹介(CUD(カラーユニバーサルデザイン)をすすめる会)
色覚シミュレーション・補助ツール(北海道カラーユニバーサルデザイン機構)
シミュレーションツールのご紹介(メディア・ユニバーサル・デザイン協会)
第17回 9つの "色覚バリアフリーツール"(高原太郎氏のホームページ 2018/9/7)
.
6.色弱(色覚異常)の人にも分かりやすいPC用カラーパレット

以下を参考に、ダウンロードすればよいのですが、そもそも“Microsoft Officeの『テーマ』”って何?という方は、作業する前に、Microsoft Officeの『テーマ』の使い方、新しい『テーマ』を設定する方法を参照ください。(ブログ主が実作業からまとめたメモです)

色弱の人にも分かりやすい色のMSワードⓇやエクセルⓇを作ってみた。(伊賀公一 ソラノイロ LLC 2019/2/8)
【補足説明】
ダウンロード用のテーマファイルは、記事の下の方にある。
フォントが(見出し)遊ゴシック、(本文)遊明朝なので、ブログ主の場合、フォントを慣れたものに変更して使っています。
デフォルトのテーマ『Office』⇒『RGBCUD推奨配色セットテーマ』
Office標準  カラーパレットCUD

(インストール方法の説明)パワポやExcelのグラフを色弱者にも分かりやすくするセットを有志が無料配布 作者「将来は標準設定に」(ねとらぼ 2019/3/14)
(インストール方法の説明)カラーユニバーサルデザイン推奨配色セットのOffice用配色パターン(Yutaka Arimoto)
MS Office に続きMac OS 用のCUDカラーパレットをこちらで配布しています(CUDO事務局 2019/3/25)
.
7.参考情報

「色覚検査の攻略本」「本当は効かない色弱治療」はなぜ存在したのか 進学・就職制限を受けてきた「色弱」の歴史とこれから(伊賀公一氏へのインタビュー ねとらぼ 2018/11/30)
「赤ペンはむしろ見にくい」「プレゼン本の『良い例』は良くない例」 色弱者に聞く“本当に見やすいデザイン”とは?(伊賀公一氏へのインタビュー ねとらぼ 2018/12/8)
一般色覚者にはほぼ分からない“小さくて大きな違い” JIS改訂で「日本社会における色のルール」はどう変わったのか(伊賀公一氏へのインタビュー ねとらぼ 2018/12/29)
.
8.関連エントリー

【前編】色覚のしくみと色覚異常の基礎
Microsoft Officeの『テーマ』の使い方、新しい『テーマ』を設定する方法
[ 2020/09/02(水) ] カテゴリ: 脳の勉強ノート | CM(0)
コメントの投稿










管理者にだけ表示を許可する
このブログについて
管理人 icchou から簡単な説明です 更新,追記の通知はTwitter
カテゴリ
最新記事
プロフィール

icchou

管理人:icchou
   非常勤講師

累計訪問者
ブログ内検索