Blog

はじめに

もしかしたらデザイナーの方がこのページにアクセスして読み進める中で、「そんなことも知らず今まで…？」と思うこともあるかもしれませんが、私は主にデザインより後の工程を受け持つことがほとんどなので、その辺りはご容赦ください。
（ただ、勉強していくうちに人として必要な知識だという気持ちが大きくなっていったので、エンジニアだから知らなくていいとか、そんな次元でもないと今は思います）

アプリ見直しのきっかけ

今回の対象のアプリはこちらです。

Flowing Tweet

下のテキストボックスに文字を入力して、送信ボタンを押すと、その文字が真ん中のエリアを流れていくアプリです。

＜ 今回の記事に関係ないですが、アプリの説明 ＞
本当にただひとりごちたい時、別に返事を求めてる訳ではない時、
でも一瞬でも誰かに見てもらいたい時、ただ自分だとバレたくはない時。
そんな時に一瞬だけインターネットに呟きを公開できるようにと作ったアプリです。
流れたらもう見れないので、コメントやいいねもありません。

これを、いとこのエミリー（仮）に見せたところ、

「カラーアクセシビリティ最悪だね…ボタン読めないんだけど」と言われました。（子供の頃からの付き合いなので言い方容赦ない(笑)ですが、仲良いです。）

エミリーは色弱者で、A型色覚です。要するに色の区別がなく、色はグレーで見えます。
それまで私は色覚について知識はほぼなく、Webサイトやアプリのアクセシビリティを考える上で、特に色に関してはデザイナー任せで、どこか自分の範疇ではないと思ってたところがありました。

しかしこのアプリはすべての人がターゲットであり、「最悪」と感じる人がこんなに身近にいるなら
それはなんとかしないといけないと思い、「カラーアクセシビリティ」について勉強するきっかけになりました。

余談
なぜ従兄弟にエミリーがいるのに色覚について知識がないのか…と思われるかもしれないですが、住んでるところが遠く子供の頃は年に一回会うかどうかくらいで、突っ込んで話をしたことはありませんでした。加えてエミリーはとても頭が良く、普段から色弱者であることを感じさせない振る舞いで、会っている時にそこに気を使う隙がないくらい本人がしっかりしていました。（今思えば自分の配慮が欠けるところもありましたが）

色覚の基本

人間の網膜は基本的に、赤・緑・青の3色を感じる能力があります。具体的には、光を認識する視細胞に、色を認識する「錐体」と呼ばれるものがあり、赤い光を受け取る「L錐体」、緑の光を受け取る「M錐体」、青の光を受け取る「S錐体」の3種類があります。

この３種類の錐体のうち、どれかがなかったり機能が弱い場合に、色が違って見えます。

色覚の区分け・呼称

「色覚異常」や「色盲」などの医療分野で用いられる従来の呼称もありますが、NPO法人カラーユニバーサルデザイン機構（CUDO〈クドー〉）（以下CUDO）が提唱する色覚の呼称に合わせ、以下、一般色覚者以外の方を「色弱者」（色の対応の不十分な社会における弱者）としています。

色覚の種類

アルファベットを用いた下記の呼称は、CUDOが提唱する呼称で、この分類方法は広がりつつあるようです。

• C型・・・一般的な色覚の人（色弱者以外の人）
• P型・・・灰色と赤の区別がしにくい。
  • 赤を感じるL錐体の機能がないタイプ（強度）と、L錐体は機能しているが弱いタイプ（弱度）がある。
• D型・・・灰色と緑の区別がしにくい
  • 緑を感じるM錐体の機能がないタイプ（強度）と、M錐体は機能しているが弱いタイプ（弱度）がある。
• T型・・・青と黄を混同しやすい
• A型・・・赤緑青ともに区別がない（すべてグレー）

眼科用語で下記のような呼ばれ方もある

• 1色覚（錐体を1本持っている、もしくは持っていない）
  • A型のこと
• 2色覚（錐体を2本持っている）
  • P型、D型、T型のこと
• 異常3色覚
  • P型、D型で、3色全てを感じることは出来るが、その感じ方が一般とは異なり、まぎらわしい色の判別が困難
• 3色覚・正常色覚
  • C型のこと

また、赤・緑・青の順に、1型色覚（赤が判別しにくい）・2型色覚（緑が判別しにくい）・3型色覚（青が判別しにくい）…という用語もあるようです。

このナンバリングが「1色覚」などの言葉とは違う意味なので最初戸惑いましたが、◯型などの場合は1が赤、2が緑…と番号をつけて、その錐体が弱いというイメージで使っているのだと思います。

◯色覚と◯型を合わせた言い方で、「1型2色覚」というような用語もあり、この場合は赤が判別しにくくその他の錐体2本を持っているというイメージ。
例えば2型3色覚というと、緑が判別しにくいが3色感じられる（D型の弱度）ということのようです。

従来の呼ばれ方

従来は、赤・緑・青の順に、第1・第2・第3 色覚異常という呼称でした。
A型は全色盲、P・D・T型は色盲と呼ばれていました。

これらは差別を感じる言葉だと感じる人が少なくないため、カラーユニバーサルデザインの普及とともに、CUDOの提唱する呼び方が広く使われるようになってきました。

A型色覚でも判別できるようにするには、コントラストが重要

色味の情報がない場合、コントラストがないと判別ができません。
今回の水色と黄色は、コンテンツを区別するにあたって本当に色味だけに頼った配色となっており、コントラスト比を数字で出してみて驚きました。

色のコントラストチェッカーというシミュレーションツールで、コントラスト比を確認することができます。

背景#35b5d2、文字色#fed52bにすると、コントラスト比1.69！！少ない！（背景と文字色を逆にしても同じ）

判定については

通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。
巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。
太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。

ここでいうAAは適切な組み合わせ、AAAは高いレベルの組み合わせ。
送信ボタンのテキストは16ピクセルなので、4.5以上が適切な色の組み合わせとなりますが、それを大きく下回る1.69でした。

ちなみに全く同じ色にすると1になるので、1〜4.5の間で1.69ということは、適切（というか最低限）ラインの２割にも満たないレベルということになります。

新たな配色の決定

なぜ最初にこの配色にしたか

このデザインも、決して適当に決めたものではありませんでした。
一応下記のような条件があり、その条件に合う色の組み合わせを絞り込んでいきました。

• アプリの性質上、気軽でポジティブな気持ちで使用してほしいため、ポップなイメージ
  • Not シンプル
  • Not エレガント
• ターゲットがインターネットを使用する全ての人であるため、特定の属性のイメージを持たないもの
  • 年齢を問わない
    • Not 子供っぽい
  • 性別を問わない
    • 男性・女性どちらにも偏らない

配色の本を使って探しましたが、意外と「ほぼこれしかない」と思うくらい合う色がありませんでした。（プロのデザイナーならもっと色々探せるのかもしれない）

結果、水色■、黄色■、黄色みがかったピンク■になりました。

新デザインの根拠

新デザインの配色は、紺■ 、赤■ 、薄い黄■　となりました。

色弱者でも文字がはっきり読める、区別ができるということを目的としました。

そもそも、今回みたいに勉強を挟んでからだと理解できるのですが、実際の色弱者からする色の感じ方は「赤がわからないだけで緑はわかる」とかそういう単純なものではありません。青がC型と同じように見える人でも「水色」がわからない場合もあります。

当然ですが、これだけ色覚タイプがあると、C型と同じように見える色味を探すという方向性ではなく
「見分けられるかどうか」が大事です。

そういうわけで色味を変えるという選択肢は充分ありましたが、今回のアプリの条件に合うカラーを探すと、結果たまたま同じ色味になっていたということに後で気がつきました。（水色は青に、ピンクは赤に、黄色は薄い黄色に）

ポップなイメージとは離れましたが、そこは妥協することにしました。
ポップで楽しいイメージを持つカラーはどうしても彩度が高くなります。彩度が高い色だけで構成すると子供っぽくなったり、落ち着いた色のサブカラーと組み合わせるとメインカラーの彩度が際立って目ががチカチカしたりと、なんだか良い感じにはなりませんでした。

しかし、アプリの性質上楽しい感じは少し出したかったので、デザインを少し変えて吹き出しアイコンをポップな感じに変更しました。

検証

検証には、色覚シミュレータを使いました。

P/D/T型色覚の見え方シミュレーション

「色のシミュレータ」というアプリを使っています。

A型色覚の見え方シミュレーション

コントラストの数値改善

テーマカラー切り替えボタンをつけた(ただの着せ替え機能)

左側に信号機のように並んでいる丸を押すと、背景の色が変えられるようにしました。
これはアクセシビリティに配慮したというよりは、着せ替えのようなイメージでつけたもの（カラーについてはデフォルトのものがすべての人向けであるため）。

デフォルトが前と比べると渋くなった感じがするため、前の色も残しておきたかったという気持ちと、比較したいという気持ちが少しあり、自己満足でつけた機能です。

クッキー保存はされず、更新したら設定は戻るので、また機会があれば対応しようかと思います。

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

カラーユニバーサルデザインとは、「人間の色覚の多様性に対応し、より多くの人に利用しやすい配色を行った製品や施設・建築物、サービス、情報を提供するという考え方」のことです。
CUDとは | NPO法人 カラーユニバーサルデザイン機構 CUDO

カラーユニバーサルデザインの3つのポイントとして下記が挙げられています。

• できるだけ多くの人に見分けやすい配色を選ぶ。
• 色を見分けにくい人（場合）でも情報が伝わるようにする。
• 色の名前を用いたコミュニケーションを可能にする。

色覚シミュレーションツール

今回いくつか使用しましたが、カラーユニバーサルデザインに役立つ、色覚シミュレーションツールがあります。
実際に自分が使ってみたのは下記のツールです。

• 色のシミュレータ
  • スマートフォンのアプリ。P/D/T型の見え方を確認できる。カメラモードにすると目の前のものがどう見えるかがわかる。キャプチャから写真で選んで検証することもできる。
• PhotoShopの色の校正
  • 「表示＞校正設定」でP/D型の見え方をシミュレートできる。A型に対応する場合は、校正設定で「カスタム」を選択し、シミュレートするデバイスで「作業用グレー」を選択する。
    シミュレートを解除する場合は、「表示＞色の校正」のチェックを外す。

• 色のコントラストチェッカー
  • 前述のとおり、色のコントラストが適切かを数値で確認できる。
• iMacやiPhoneのシミュレーション
  • 設定＞アクセシビリティ＞画像表示とテキストサイズ（「ディスプレイ」の場合もある）＞カラーフィルタ

個人的に感じたことですが、非常にまれなタイプとはいえA型色覚対応を視野に入れた場合、本当にコントラストの重要性を感じました。A型の場合は視力が弱いことがほとんどで、グレースケールで確認したものよりも実際はさらに見づらいと感じる可能性が高いです。

iphoneでは、前述の通り、設定のカラーフィルタで表示をモノクロに変えることができますが、エミリーは、これで表示されたものより見えにくいと言っていました。
それがなぜなのか、ぼやけるから見えにくいとかコントラストがないからとか明確な理由を知る術はないのですが、とにかく「区別ができない」ことは確かで、それを改善するにはコントラストが必要でした。

ちなみに、「カラーユニバーサルデザイン推奨配色セット」という、C型とP型とD型色覚の人に見分けやすく、またP型D型色覚の人が色の名前を間違えにくい色を選んだカラーパレットもあります。
カラーアクセシビリティに配慮した制作物を作る時に参考になりそうです。

おしまいに 今回感じたこと

P型・D型色覚の人の割合は、日本では男性の20人に1人、女性の500人に1人、日本全体では320万人以上ということで、決して少なくありません。むしろ思ってたより多いと思いました。

P型やD型でも大人になってから気づいた人や、言いたくないから隠している人もいます。自分が知らなかっただけの可能性は非常に高いです。

私は本当に知識がなく、今回カラーアクセシビリティを調べるにあたって、「赤がわからない場合は何色に見えてるんだろう…」とか調べていましたが、そもそも「何色に見える？」は愚問なんだということも今回知りました。
C型のいう「赤」の色味が、すべての人にとって正解なわけがない。「生まれた時からこう見えている」人にとってはそれが正解なわけで、それが多様性であることをわかりやすく説明してくれているCUDOのWebサイトにはお世話になりました。

呼称については結構本腰入れて理解に努めないと、難しい部分がありました。
調べる過程で、「P型」「D型」「1色覚」「3型2色覚」「第1色覚異常」など、パッと見て理解できない言葉が多く、しかもそれらの言葉は使う人によって変わる、時代によっても変わる…という感じなので、文章を読んでいくだけでは覚えられません。今回はP型などのCUDOの呼称を基本として覚えることに落ち着きましたが、そこに辿り着くまでに調べる時間はかかったし、アルファベットを覚えるのにも多少エネルギーが必要でした。

文章を書くにあたって差別を感じない言い回しをするためには、やはりアルファベットを用いた説明が良いのですが、何も知らない人に対して説明する時に難しいとも感じました。
「色がわかる人と比べて」という言い方ではなく「C型と比べて」が良いけど、これでは「一般の色覚＝C型」の前提知識がないと伝わりません。このような覚えるだけの言葉を浸透させるのは難しいと思いますが、だからこそ偏見のない言葉だとも言えます。是非広がればと思いました。

長くなりましたが、今回学習する機会が得られてよかったと思います。
もし文章で間違いがあると思われた場合は、お問い合わせフォームよりご指摘ください。

参考

NPO法人 カラーユニバーサルデザイン機構 CUDO
https://cudo.jp/
「色覚多様性とは」のページがとてもわかりやすい

カラーアクセシビリティ - Webやアプリデザインで注意すべき例
https://note.com/nttrtech/n/n55c09f7a946f