2016年10月1日（土）に高松で開催されたアクセシビリティセミナーのスライドです。マークアップは大事ですが、デザイナーが見た目の部分を直していくのもすごく大事です。

1. 今日からできる
カラーデザインチェック
フォルトゥナ 坂本邦夫
～ Webアクセシビリティ
はじめの一歩、カラーの「カ」 ～

2. 自己紹介

3. 坂本邦夫
● フォルトゥナ 代表
● 大阪府東大阪市在住
● ウェブデザイナー
ウェブ配色スペシャリスト
● 日本色彩学会正会員
● a-blog cmsエバンジェリスト

4. ウェブ制作・コンサルティング

5. 配色を中心とした執筆
2013年 2011年 2007年 2005年

6. 持っている資格
● フォークリフト運転者
● 玉掛作業者
● 普通自動車免許
● 色彩検定1級
● カラーコーディネーター検定2級
● 照明コンサルタント（失効）
● 福祉住環境コーディネーター3級

7. 最近の課題
● 老眼で文字が読みにくくなった
● PC向けで12pxとかのフォントを見ると
殺意を覚える( ＾ω＾)
● スマホだと12pxは、少し前まで許容範囲
最近、ピントが合いにくくなり
眼鏡の上げ下げが大変で
殺意を覚える( ＾ω＾)

8. では本編へ

9. 今日のテーマは
カラーの「カ」

10. そもそも色には制限が
● 見える人にしか通用しない
● だが視覚を使っている人が最も多い
と言うわけで
「色が見えるということは？」
からはじめましょう

11. 色が見えるということ

12. 光→目→脳

13. 生理学的な働き
● 色を判断するのは錐体（すいたい）細胞
● 明るさを判断するのは桿体（かんたい）細胞

14. 見えることの個人差
● 視力の衰え・加齢による目の変化
● 疾病などによる個人差
○ 夜盲症（鳥目）・視野狭窄・中心暗点・羞明・複視・
眼震・眼瞼下垂・昼盲
● そもそも錐体は3種類ある
数や働きが全ての人が同じなわけではない

16. いろいろな見え方

17. ロービジョン
ロービジョン (low vision) とは、視機能が弱く、矯正
もできない状態。それにより日常生活や就労などの
場で不自由を強いられる、従来は弱視、または低視
力と呼ばれた状態、またはその人のことである。全
盲ではない。「見えにくい人」とも呼ばれる。現在でも
社会的弱視、教育的弱視とも呼ばれ、弱視者と呼
ぶ場合は、現状ではロービジョン者とほぼ同義。視
覚障害である。
”

18. いろいろな色覚
● 昔は「色覚正常者」「色覚障害者」
「色覚異常者」「色盲」「色弱」などと呼ばれた
● 日本人 男性の5% 女性の0.2%
白人 男性の８% 女性の0.4%
黒人 男性の4% 女性のデータ不明

19. CUDOによる色覚の分類
● 最近は差別感の少ない呼称が使われている
● CUDO（カラーユニバーサルデザイン機構）
C型・P型（強・弱）・D型（強・弱）・T型・A型
● 色弱者という言葉が使われるが
「色の配慮の不十分な社会における弱者」

20. C型（一般色覚者）
もともとわかりにくい画像です
Chromatic Vision Simulator

21. P型（色弱者）
どれが焼けているのか・・・
Chromatic Vision Simulator

22. D型（色弱者）
ちっともわかりません
Chromatic Vision Simulator

23. T型（色弱者）
どれも生なの？
Chromatic Vision Simulator

24. ● あくまで一例で、人によって異なります
並べて見るとこんな感じ

25. 同じ型でも個人差があり
全てに対応するのは難しい

26. 配色の基本的な考え方

27. 視覚を使う人が多い
● 現在は多くの人が視覚を使って
ウェブサイトを利用している
● ただし色にだけ頼らないようにする
多くの人に「見える」ように作る

28. 見ないと覚えられない
（あるロービジョンの方の声）

29. 小さい字・薄い字は読めない
（ある坂本邦夫の声）

30. 視覚での閲覧へ配慮しない
機会損失の極み

31. 客観的基準としての規格

32. JIS X8341-3:2016の色に関する基準
● 最低限の品質保証として
○ 1.4.1 色の使用の達成基準
○ 1.4.3 コントラスト（最低限レベル）の達成基準
○ 2.3.1 3回のせん（閃）光、又はしきい（閾）値以下の達成
基準
● 努力目標
○ 1.4.6 コントラスト（高度レベル）の達成基準

33. 平たく言えば
色だけで区別するな
読めるようにしろ
ピカピカさせるな

34. 色だけで区別しないこと

35. 色が、情報を伝える、動作を促す、反応を促す、
又は視覚的な要素を判別するための唯一の視
覚的手段になっていない（レベル A）。
”
”
1.4.1 色の使用の達成基準

36. 色と形状とテキストをセットで使う

37. テキストリンク
1974年、ジム・クロケット・ジュニアが運
営するNWAミッドアトランティック地区
（本拠地はノースカロライナ州シャーロッ
ト）に活動の場を移す。
1974年、ジム・クロケット・ジュニアが運
営するNWAミッドアトランティック地区
（本拠地はノースカロライナ州シャーロッ
ト）に活動の場を移す。
1974年、ジム・クロケット・ジュ
ニアが運営するNWAミッドア
トランティック地区（本拠地は
ノースカロライナ州シャーロッ
ト）に活動の場を移す。
1974年、ジム・クロケット・ジュ
ニアが運営するNWAミッドア
トランティック地区（本拠地は
ノースカロライナ州シャーロッ
ト）に活動の場を移す。

38. 色分けされたグラフ

39. 色情報が失われたグラフ

40. 色と形と文字が共存するグラフ

41. 読みやすくすること

42. コントラスト比
● 基本的な計算式
○ (L1 + 0.05) / (L2 + 0.05)
■ L1 は明るい方の色の相対輝度
L2 は暗い方の色の相対輝度
● 相対輝度とは
○ 最も暗い黒を0に、最も明るい白を1に正規化した
色空間内の任意の点の相対的な明るさ
■ L = 0.2126 * R + 0.7152 * G + 0.0722 * B
説明に飽きたので、詳しくは
http://waic.jp/docs/WCAG20/Overview.html#contrast-ratiodef

43. コントラスト比を計算すると？
● 21:1 ~ 1:1 の結果が出る
● 文字 #000000、背景 #FFFFFF → 21:１
● 文字と背景が同色 → 1:1
高い方が見えやすい
（コントラスト比 6.17:1）

44. 紙に書いて計算したことがあるが
1つ計算するのに15分くらい必要

45. カラー・コントラスト・アナライザー
Windowｓ版 Mac版

46. ”
コントラスト比の達成基準
1.4.3 コントラスト（最低限レベル）の達成基準
テキスト及び文字画像の視覚的提示には，少なくとも 4.5:1 のコントラス
ト比がある。ただし，次の場合は除く（レベル AA）。
a) 大きな文字 サイズの大きなテキスト及びサイズの大きな文字画像には
，少なくとも 3:1 のコントラスト比がある。
b) 附随的 テキスト又は文字画像において，次の場合はコントラストの要
件はない。アクティブではないユーザインタフェース コンポーネントの一部
である，純粋な装飾である，誰も視覚的に確認できない，又は重要な他の
視覚的なコンテンツを含む写真の一部分である。
c) ロゴタイプ ロゴ又はブランド名の一部である文字には，最低限のコント
ラストの要件はない。

47. ”
コントラスト比の達成基準
1.4.6 コントラスト（高度レベル）の達成基準
テキスト及び文字画像の視覚的提示には，少なくとも 7:1 のコントラスト
比がある。ただし，次の場合は除く（レベル AAA）。
a) 大きな文字 サイズの大きなテキスト及びサイズの大きな文字画像には
，少なくとも 4.5:1 のコントラスト比がある。
b) 附随的 テキスト又は文字画像において，次の場合はコントラストの要
件はない。アクティブではないユーザインタフェース コンポーネントの一部
である，純粋な装飾である，誰も視覚的に確認できない，又は重要な他の
視覚的なコンテンツを含む写真の一部分である。
c) ロゴタイプ ロゴ又はブランド名の一部である文字には，最低限のコント
ラストの要件はない。

48. 実務的には全て6:1を目標に
● 大きな文字は気にしない
フォントサイズごとにコントラスト比を
変える方が手間が掛かる
● 白背景に#666666は環境によっては厳しい
最低限を6:1という基準ならなんとでもなる
● オレンジと緑は特に要注意
思ったよりもコントラスト比が低く出やすい

49. いろんなサイトのコントラスト比（例）
サイト名 モバイルの本文 PCの本文
Google #222222 #545454
Yahoo! #000000 #444444
Wikipedia #252525 #252525
Bing #333333 #666666
Facebook #000000 #1D2129
Twitter #000000 #292F33

50. モバイルの方がコントラストが高い

51. モバイルの方がコントラストが高い
● 外光などの屋外環境に影響されやすい
● 文字が物理的に小さい（ピクセル数ではなく）
● フィルムとか貼ってるでしょ？
悪い環境が想像されるなら
コントラストを高めに設定
（コントラスト比 2.14:1）

52. ● 外光などの屋外環境に影響されやすい
● 文字が物理的に小さい（ピクセル数ではなく）
● フィルムとか貼ってるでしょ？
悪い環境が想像されるなら
コントラストを高めに設定
（コントラスト比 9.81:1）
モバイルの方がコントラストが高い

53. ピカピカさせない

54. ポ○モンフラッシュを覚えていますか？

55. せん（閃）光とは
● 短時間での光（色）の変化
● 達成基準
○ 2.3.1 3回のせん（閃）光，又はしきい（閾）値以下の達成基
準
○ 2.3.2 3回のせん（閃）光の達成基準
● 達成基準例
○ とても明るい稲妻の閃光のシーンがある映画が、稲妻が
あらゆる1秒間に3回だけ閃光を放つように編集されてい
る。

56. 基準の説明で30分使うので
せん光は避けるという意識で

57. 一応ツールがある
● Photosensitive Epilepsy Analysis Tool
（Windows10では動かなかった）

58. ではデザインしましょう！

60. ガイドブックの大事な指針
本配色セットは、特定の色覚の人だけが見分けや
すく他の人が不便 になってしまうことがないように
配慮しています。そのため、どのような色覚の人に
とっても、最も見分けやすい という わけ ではありま
せん。 お互いが少しずつ譲り合うことで、多くの方に
とって見分けやすくすることが根底の発想です。
カラーユニバーサルデザイン推奨配色セット ガイドブック より
”

61. 使う際の注意点
● 見分けはできるが、
文字には使いにくい色が多いので注意
● アプリとかパネルをタッチさせるための背景向け？

62. 様々なツールでチェック

63. Illustrator、Photoshopの校正設定
● P型・D型の見え方を再現

64. 視覚をエミュレートするアプリ
● アプリ 色のシミュレータ

65. モノクロに変換、あるいはプリントアウト
● Chrome拡張機能 (un)clrd

66. 視覚をエミュレートする拡張機能
● Chrome拡張機能 chromelens

67. 目を細めて見る
● かすみ目や老眼のエミュレーション

68. 厚生労働省
● やはりオレンジと緑は厳しい

69. デザイン時のチェックが楽
後からやろうと思わないこと

70. デザインの要件に
入れるのはどうだろう？

71. デザイン外注時なら
● コントラスト比のチェックを必須にして、
適合してなかったら突き返すとか？
そもそも
「書類が見られてなかった」
ことがあったので要注意

72. どうしても言いたい
どうしても聞きたいこと

73. 文字色変更機能

74. 自治体サイトについてるこれ
● 白黒反転 → わかる
● 黒と黄 → まだわかる
● 青と黄 → 意味がわからない

75. 福島県ホームページ

76. 福島県ホームページ
（コントラスト比 奇跡の1.02:1）

77. 黄と青の組み合わせ
● 一番多いP型・D型色弱者は
赤と緑の区別が付きにくいらしい
● 黄と青なら大丈夫なんじゃない？
● よし入れちゃえ！
全面バーン！
（コントラスト比 2.96:1）

78. できないようなことは
やらなきゃいいのに

79. まとめ
（コントラスト比 1.76:1）

80. いろんなチェックを習慣づける
● 見え方と環境は様々で一定しない
一人の人間でも日々変わる
● 最低限の基準を満たしたウェブサイトに
● デザインの配色チェックを習慣づける
慣れるとやばい部分がわかる
（コントラスト比 2.96:1）

81. いろんなチェックを習慣づける
● 見え方と環境は様々で一定しない
一人の人間でも日々変わる
● 最低限の基準を満たしたウェブサイトに
● デザインの配色チェックを習慣づける
慣れるとやばい部分がわかる
（コントラスト比 21:1）

82. ありがとうございました！
https://www.facebook.com/websitecolor
https://twitter.com/kunio_sakamoto