今日からできるカラーデザインチェック
5 likes1,008 views
2016年10月1日（土）に高松で开催されたアクセシビリティセミナーのスライドです。マークアップは大事ですが、デザイナーが见た目の部分を直していくのもすごく大事です。
![POStudy Day 2015 Summer in Fukuoka [Day1] ～プロダクトオーナーシップを磨くための一日～ #postudy](https://cdn.slidesharecdn.com/ss_thumbnails/20150830postudyday2015summerinfukuokaday1-150908080725-lva1-app6891-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Viewers also liked (20)
今日からできるカラーデザインチェック
- 2. 自己绍介
- 3. 坂本邦夫 ● フォルトゥナ 代表 ● 大阪府東大阪市在住 ● ウェブデザイナー ウェブ配色スペシャリスト ● 日本色彩学会正会員 ● a-blog cmsエバンジェリスト
- 5. 配色を中心とした執筆 2013年 2011年 2007年 2005年
- 6. 持っている資格 ● フォークリフト運転者 ● 玉掛作業者 ● 普通自動車免許 ● 色彩検定1級 ● カラーコーディネーター検定2級 ● 照明コンサルタント（失効） ● 福祉住環境コーディネーター3級
- 7. 最近の課題 ● 老眼で文字が読みにくくなった ● PC向けで12pxとかのフォントを見ると 殺意を覚える( ＾ω＾) ● スマホだと12pxは、少し前まで許容範囲 最近、ピントが合いにくくなり 眼鏡の上げ下げが大変で 殺意を覚える( ＾ω＾)
- 8. では本编へ
- 11. 色が见えるということ
- 12. 光→目→脳
- 14. 見えることの個人差 ● 視力の衰え?加齢による目の変化 ● 疾病などによる個人差 ○ 夜盲症（鳥目）?視野狭窄?中心暗点?羞明?複視? 眼震?眼瞼下垂?昼盲 ● そもそも錐体は3種類ある 数や働きが全ての人が同じなわけではない
- 16. いろいろな见え方
- 17. ロービジョン ロービジョン (low vision) とは、視機能が弱く、矯正 もできない状態。それにより日常生活や就労などの 場で不自由を強いられる、従来は弱視、または低視 力と呼ばれた状態、またはその人のことである。全 盲ではない。「見えにくい人」とも呼ばれる。現在でも 社会的弱視、教育的弱視とも呼ばれ、弱視者と呼 ぶ場合は、現状ではロービジョン者とほぼ同義。視 覚障害である。 ”
- 18. いろいろな色覚 ● 昔は「色覚正常者」「色覚障害者」 「色覚異常者」「色盲」「色弱」などと呼ばれた ● 日本人 男性の5% 女性の0.2% 白人 男性の８% 女性の0.4% 黒人 男性の4% 女性のデータ不明
- 19. CUDOによる色覚の分類 ● 最近は差別感の少ない呼称が使われている ● CUDO（カラーユニバーサルデザイン機構） C型?P型（強?弱）?D型（強?弱）?T型?A型 ● 色弱者という言葉が使われるが 「色の配慮の不十分な社会における弱者」
- 26. 配色の基本的な考え方
- 31. 客観的基準としての规格
- 32. JIS X8341-3:2016の色に関する基準 ● 最低限の品質保証として ○ 1.4.1 色の使用の達成基準 ○ 1.4.3 コントラスト（最低限レベル）の達成基準 ○ 2.3.1 3回のせん（閃）光、又はしきい（閾）値以下の達成 基準 ● 努力目標 ○ 1.4.6 コントラスト（高度レベル）の達成基準
- 34. 色だけで区别しないこと
- 36. 色と形状とテキストをセットで使う
- 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）
- 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. ピカピカさせない
- 55. せん（閃）光とは ● 短時間での光（色）の変化 ● 達成基準 ○ 2.3.1 3回のせん（閃）光，又はしきい（閾）値以下の達成基 準 ○ 2.3.2 3回のせん（閃）光の達成基準 ● 達成基準例 ○ とても明るい稲妻の閃光のシーンがある映画が、稲妻が あらゆる1秒間に3回だけ閃光を放つように編集されてい る。
- 57. 一応ツールがある ● Photosensitive Epilepsy Analysis Tool （Windows10では動かなかった）
- 58. ではデザインしましょう！
- 60. ガイドブックの大事な指針 本配色セットは、特定の色覚の人だけが見分けや すく他の人が不便 になってしまうことがないように 配慮しています。そのため、どのような色覚の人に とっても、最も見分けやすい という わけ ではありま せん。 お互いが少しずつ譲り合うことで、多くの方に とって見分けやすくすることが根底の発想です。 カラーユニバーサルデザイン推奨配色セット ガイドブック より ”
- 62. 様々なツールでチェック
- 73. 文字色変更机能
- 74. 自治体サイトについてるこれ ● 白黒反転 → わかる ● 黒と黄 → まだわかる ● 青と黄 → 意味がわからない
- 75. 福岛県ホームページ
- 77. 黄と青の組み合わせ ● 一番多いP型?D型色弱者は 赤と緑の区別が付きにくいらしい ● 黄と青なら大丈夫なんじゃない？ ● よし入れちゃえ！ 全面バーン！ （コントラスト比 2.96:1）
- 80. いろんなチェックを習慣づける ● 見え方と環境は様々で一定しない 一人の人間でも日々変わる ● 最低限の基準を満たしたウェブサイトに ● デザインの配色チェックを習慣づける 慣れるとやばい部分がわかる （コントラスト比 2.96:1）
- 81. いろんなチェックを習慣づける ● 見え方と環境は様々で一定しない 一人の人間でも日々変わる ● 最低限の基準を満たしたウェブサイトに ● デザインの配色チェックを習慣づける 慣れるとやばい部分がわかる （コントラスト比 21:1）