「Web・アプリとカラーユニバーサルデザイン」 - 勉強会メモ

# 経緯とか
2017年11月9日にサイボウズさんの東京オフィスで開催された「**Web・アプリとカラーユニバーサルデザイン**」のメモです。
(CUDO ✕ IAUD 移動空間研究部会／メディア研究部会 プレゼンツ)

3時間全てのメモではなく、CUDの基本的な部分についてのみのまとめです。
メモなので文字ばっかりなので、詳細が気になる方はリンク先などのイメージをみてもらえると:bow:

※ちなみに上記イベントは抽選漏れして、FRESH!の動画配信に助けられました。

## イベント情報
[Web・アプリとカラーユニバーサルデザイン - connpass](https://connpass.com/event/69566/)
[Web・アプリとカラーユニバーサルデザイン - FRESH!](https://freshlive.tv/tech-conference/166044) ... 上記イベントの動画
[WCAG2.0 / 2.1とCUDの整理、スクリーンメディアにおけるCUD - Google スライド](https://docs.google.com/presentation/d/17EWdYNvf1uyei6EpGtCh2KriFCST6uWG5HKmHPdNq-g/edit#slide=id.g2a9fe2e746_0_43) ... 上記イベントで使われたスライド


# :art: カラーユニバーサルデザイン（CUD)

## :question: カラーユニバーサルデザインって何？
> カラーユニバーサルデザイン（英: color universal design、CUD）とは、色の見え方が一般と異なる（先天的な色覚異常、白内障、緑内障など） 人にも情報がきちんと伝わるよう、色使いに配慮したユニバーサルデザイン

（Wikipediaより引用）

今回の勉強会では、色弱とロービジョンについてのお話がありました。

## :question: 色弱・ロービジョンって何？
### 色弱
従来は「色覚異常」「色盲」などと呼ばれており、現在行政では「色覚障がい」と呼んでいる。
従来の表現は全ての色が見えないと誤解される可能性があり、当事者の心象もあまりよくない。
そのため、NPO法人・カラーユニバーサルデザイン機構（CUDO）では「色弱」と呼んでいる。

色の見え方によって「2型3色覚（緑色弱）」のように数種類に分類されている。

### ロービジョン
視機能が低く、矯正ができない状態。従来は弱視、弱視力と呼ばれていた。
視力が低いだけではなく、全体的に白っぽくぼやけて見えたり、まぶしさに弱いなどの特徴がある。

境界線を識別する力が弱く、駅構内など白い床に白い柱がある場合はぶつかることがある。痛いそう。


## :family: どれくらい居るの？
### 色弱
統計情報そのものは見つけられなかったが、日本人男性で20人に1人程度いると言われている。
国籍や性別によって割合が異なり、日本人女性では500人に1人程度だと言われている。

> ３ 色覚障害のある人の割合
> 色覚障害の人の割合は、日本人の場合、大体、男性の20人に1人、フランスや北欧の男性
ではもっと多く10人に1人、逆にアフリカ系の人では2～4％と少なくなっています。女性で
も、日本では500人に1人、欧米では200人に1人くらいの割合で存在します。全世界の人口
を65億人と仮定すると色覚障害をもつ人は約2億人、ＡＢ型の血液型の男性が世界では約２
億人で大体その数に匹敵します。また、小中学校の40人学級（男子20人）の各クラスに必ず
1人、男女100人の講演会場では2～3人、色覚障害の方がいるという計算になります。色覚
障害がこのように珍しくはない現象であることを理解しておく必要があります。 

出典：[色使いのガイドライン - 国立遺伝学研究所](https://www.nig.ac.jp/color/guideline_kanagawa.pdf)

少し古いデータだが、左利きの人は1977年の統計で成人人口の8%~15%いると言われているので、
それと比較してもかなり身近な存在であることがわかる。

### ロービジョン
日本眼科医会の発表によれば144万9000人いると言われており、日本の人口を1億人とすると100人に1.5人程度いる計算になる。

出典：[ロービジョン - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%BC%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3)


## 原則
基本的には
- 色に依存しないようにする（必須の入力欄に「必須」と文字でも表記する）
- コントラストを確保する（文字やアイコンなどのコントラスト比をチェックする）
など、ガイドライン等による指示に従ってデザインする必要がある。

## :warning: よくある例
### 色だけでデータ区分が示された円グラフ
データとグラフを引出線でつなぐなど、グラフとデータの対応が色以外でわかるようしましょう。

### 大事なところが赤文字で示されている
太字にするなど色以外でも強調されている部分だとわかる表現にしましょう。
ただし、Webでは下線を引いてしまうとリンクだと誤解される可能性があるので、下線は避けましょう。

### 黒背景に赤い文字
赤い文字は黒く見えてしまうケースがあり、黒背景・黒文字となってしまい読めなくなる可能性があります。
赤×黒、赤×緑、青×紫などの見分けにくい組み合わせを避けたり、
[シミュレーター](https://website-usability.info/2013/02/entry_130218.html)でチェックしたりといった対策が望ましいです。


### その他の実例
[Web Content Accessibility Guidelines (WCAG) 2.0](http://waic.jp/docs/WCAG20/Overview.html)の達成レベルAの実例が以下のスライド資料で紹介されている。

[WCAG2.0 / 2.1とCUDの整理、スクリーンメディアにおけるCUD - Google スライド](https://docs.google.com/presentation/d/17EWdYNvf1uyei6EpGtCh2KriFCST6uWG5HKmHPdNq-g/edit#slide=id.g2a9fe2e746_0_43)


## :books: 参考
### ツール類
[Colour Contrast Analyser（Windows/Mac対応）](https://developer.paciellogroup.com/resources/contrastanalyser/)
[ロービジョンの「見えにくさ」を疑似的にシミュレーションできる Google Chrome アドオン「NoCoffee Vision Simulator」](https://website-usability.info/2013/02/entry_130218.html)
[→ NoCoffeeのダウンロードはこちら](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)
[色盲・色弱のシミュレーションやコントラストをチェックするSketchプラグイン「Stark」](https://technical-creator.com/stark/)
[色のめがね (iOSアプリ)](https://itunes.apple.com/jp/app/%E8%89%B2%E3%81%AE%E3%82%81%E3%81%8C%E3%81%AD/id388924058?mt=8)

### 書籍（Web関連）
[インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン](https://www.amazon.co.jp/%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%82%B7%E3%83%96HTML-JavaScript-%E5%A4%9A%E6%A7%98%E3%81%AA%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%8B%E3%83%BC%E3%82%BA%E3%81%AB%E5%BF%9C%E3%81%88%E3%82%8B%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3-Heydon-Pickering/dp/4862463878)
[デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ](https://www.amazon.co.jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8B%E3%83%B3%E3%82%B0Web%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3-%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%96%E3%83%AB%E3%81%AA%E8%A8%AD%E8%A8%88%E3%82%84%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E5%88%B6%E4%BD%9C%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AD%E3%83%BC%E3%83%81-%E5%A4%AA%E7%94%B0%E8%89%AF%E5%85%B8/dp/4862462650/ref=asap_bc?ie=UTF8)
[コーディングWebアクセシビリティ: WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション](https://www.amazon.co.jp/%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0Web%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3-WAI-ARIA%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%83%9E%E3%83%AB%E3%83%81%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E7%92%B0%E5%A2%83%E3%81%AEWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-Heydon-Pickering-ebook/dp/B06XWC1TWC/ref=asap_bc?ie=UTF8)

### その他
[約20人に1人の割合 「色覚異常（色弱・色盲）」の方たちが見ている世界 10選](https://curazy.com/archives/164308)
[日本眼科学会：目の病気 先天色覚異常](http://www.nichigan.or.jp/public/disease/hoka_senten.jsp)