Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

コントラスト高めでいこう Slide 1 コントラスト高めでいこう Slide 2 コントラスト高めでいこう Slide 3 コントラスト高めでいこう Slide 4 コントラスト高めでいこう Slide 5 コントラスト高めでいこう Slide 6 コントラスト高めでいこう Slide 7 コントラスト高めでいこう Slide 8 コントラスト高めでいこう Slide 9 コントラスト高めでいこう Slide 10 コントラスト高めでいこう Slide 11 コントラスト高めでいこう Slide 12 コントラスト高めでいこう Slide 13 コントラスト高めでいこう Slide 14 コントラスト高めでいこう Slide 15 コントラスト高めでいこう Slide 16 コントラスト高めでいこう Slide 17 コントラスト高めでいこう Slide 18 コントラスト高めでいこう Slide 19 コントラスト高めでいこう Slide 20 コントラスト高めでいこう Slide 21 コントラスト高めでいこう Slide 22 コントラスト高めでいこう Slide 23 コントラスト高めでいこう Slide 24 コントラスト高めでいこう Slide 25 コントラスト高めでいこう Slide 26 コントラスト高めでいこう Slide 27 コントラスト高めでいこう Slide 28 コントラスト高めでいこう Slide 29 コントラスト高めでいこう Slide 30 コントラスト高めでいこう Slide 31 コントラスト高めでいこう Slide 32 コントラスト高めでいこう Slide 33 コントラスト高めでいこう Slide 34 コントラスト高めでいこう Slide 35 コントラスト高めでいこう Slide 36 コントラスト高めでいこう Slide 37 コントラスト高めでいこう Slide 38 コントラスト高めでいこう Slide 39 コントラスト高めでいこう Slide 40 コントラスト高めでいこう Slide 41 コントラスト高めでいこう Slide 42 コントラスト高めでいこう Slide 43 コントラスト高めでいこう Slide 44 コントラスト高めでいこう Slide 45 コントラスト高めでいこう Slide 46 コントラスト高めでいこう Slide 47 コントラスト高めでいこう Slide 48 コントラスト高めでいこう Slide 49 コントラスト高めでいこう Slide 50 コントラスト高めでいこう Slide 51 コントラスト高めでいこう Slide 52 コントラスト高めでいこう Slide 53 コントラスト高めでいこう Slide 54 コントラスト高めでいこう Slide 55 コントラスト高めでいこう Slide 56 コントラスト高めでいこう Slide 57 コントラスト高めでいこう Slide 58 コントラスト高めでいこう Slide 59 コントラスト高めでいこう Slide 60 コントラスト高めでいこう Slide 61 コントラスト高めでいこう Slide 62 コントラスト高めでいこう Slide 63 コントラスト高めでいこう Slide 64 コントラスト高めでいこう Slide 65 コントラスト高めでいこう Slide 66 コントラスト高めでいこう Slide 67 コントラスト高めでいこう Slide 68 コントラスト高めでいこう Slide 69 コントラスト高めでいこう Slide 70 コントラスト高めでいこう Slide 71 コントラスト高めでいこう Slide 72 コントラスト高めでいこう Slide 73 コントラスト高めでいこう Slide 74 コントラスト高めでいこう Slide 75 コントラスト高めでいこう Slide 76 コントラスト高めでいこう Slide 77 コントラスト高めでいこう Slide 78 コントラスト高めでいこう Slide 79 コントラスト高めでいこう Slide 80 コントラスト高めでいこう Slide 81
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

コントラスト高めでいこう

Download to read offline

2019/03/04(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/03/04」でのスライドです。

Related Audiobooks

Free with a 30 day trial from Scribd

See all

コントラスト高めでいこう

  1. 1. コントラスト高めでいこう
  2. 2. 自己紹介 2
  3. 3. 3 澤田 望 パーマ メガネ (老眼) ガリガリ 中年講師
  4. 4. 4 岡山で独立(2014~) Webアクセシビリティ検証/ イラスト制作/ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン (~2013)  サイトデザイン監修/ Webアクセシビリティ対応 WAIC  (2011~) (ウェブアクセシビリティ基盤委員会) コラムを担当
  5. 5. 本日の目標 5
  6. 6. ・コントラストの基準とは? ・コントラスト比はどうやって測るのか? ・コントラストを高める方法とは? 6
  7. 7. コントラストの基準 7
  8. 8. 文字色と背景色に差がないと読みにくいですね?
  9. 9. プロジェクターだと、さらに読みにくいかも... 11
  10. 10. 12 炎天下でスマホの画面が見えづらい状況
  11. 11. 読めなきゃ使えない。 13
  12. 12. Webサイトやアプリに限らず、 UIデザインをする際の基本中の基本。 14
  13. 13. 15https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html より
  14. 14. 16https://waic.jp/docs/WCAG20/Overview.html#larger-scaledef より
  15. 15. 言語 テキストサイズ (文字画像含む) 太さ 背景色とのコントラスト比 (最低限) 日本語 大 29 px 以上 細 3.0:1 24 px 以上 太 小 29 px 未満 細 4.5:1 24 px 未満 太 英数 大 24 px 以上 細 3.0:1 18.5 px 以上 太 小 24 px 未満 細 4.5:1 18.5 px 未満 太 17 テキスト色のコントラストの基準 WCAG 2.0 レベル AA • 3.0:1 標準的な視力における最低限のレベル [ISO-9241-3] 及び [ANSI-HFES-100-1988] 推奨 • 4.5:1 視力低下/色覚異常/老眼を考慮したレベル https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html より
  16. 16. コントラスト比の計算 18
  17. 17. 19https://waic.jp/docs/WCAG20/Overview.html#contrast-ratiodef より
  18. 18. 20 色相は、色覚異常のある利用者による知覚のされ方の差が大きい 輝度を基にしたコントラスト比 https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html より
  19. 19. 21https://waic.jp/docs/WCAG20/Overview.html#relativeluminancedef より
  20. 20. 自分で計算しなくてもツールがたくさんあります。 22
  21. 21. 23https://developer.paciellogroup.com/resources/contrastanalyser/ より
  22. 22. 24https://usecontrast.com/ より
  23. 23. 25Firefox のアクセシビリティインスペクター(通常は無効な状態)
  24. 24. 26Google Chrome のデベロッパーツール内カラーピッカー
  25. 25. 27http://www.getstark.co/ より
  26. 26. 28https://www.adobeexchange.com/creativecloud.details.12170.check-contrast-ratio.html より
  27. 27. 29http://jxnblk.com/colorable/demos/matrix/ より
  28. 28. まぁ、いろいろあります。 30
  29. 29. ツール選びのポイント 31
  30. 30. 1. カラーピッカーが正確なこと 32
  31. 31. 2. 数字を丸めすぎないこと (WCAG/JIS 対応する場合は特に) 33
  32. 32. 34 4.5:1 ありますけど? コントラスト足りないから高くしてもらる? 3. チーム/クライアントと同じツールが使えること
  33. 33. コントラスト比を実感しよう 35
  34. 34. 4.5:1って、どのくらい? 36
  35. 35. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #000000 #000000 #FFFFFF #111111 #000000 #FFFFFF #222222 #000000 #FFFFFF #333333 #000000 #FFFFFF #444444 #000000 #FFFFFF #555555 #000000 #FFFFFF #666666 #000000 #FFFFFF #777777 #000000 #FFFFFF #888888 #000000 #FFFFFF #999999 #000000 #FFFFFF #AAAAAA #000000 #FFFFFF #BBBBBB #000000 #FFFFFF #CCCCCC #000000 #FFFFFF #DDDDDD #000000 #FFFFFF #EEEEEE #000000 #FFFFFF #FFFFFF #000000 #FFFFFF 37
  36. 36. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #000000 #000000 1.00:1 #FFFFFF 21.00:1 #111111 #000000 1.11:1 #FFFFFF 18.88:1 #222222 #000000 1.32:1 #FFFFFF 15.91:1 #333333 #000000 1.66:1 #FFFFFF 12.63:1 #444444 #000000 2.16:1 #FFFFFF 9.74:1 #555555 #000000 2.82:1 #FFFFFF 7.46:1 #666666 #000000 3.66:1 #FFFFFF 5.74:1 #777777 #000000 4.69:1 #FFFFFF 4.48:1 #888888 #000000 5.92:1 #FFFFFF 3.54:1 #999999 #000000 7.37:1 #FFFFFF 2.85:1 #AAAAAA #000000 9.04:1 #FFFFFF 2.32:1 #BBBBBB #000000 10.94:1 #FFFFFF 1.92:1 #CCCCCC #000000 13.08:1 #FFFFFF 1.61:1 #DDDDDD #000000 15.46:1 #FFFFFF 1.36:1 #EEEEEE #000000 18.10:1 #FFFFFF 1.16:1 #FFFFFF #000000 21.00:1 #FFFFFF 1.00:1 38
  37. 37. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #000000 #000000 #FFFFFF #110000 #000000 #FFFFFF #220000 #000000 #FFFFFF #330000 #000000 #FFFFFF #440000 #000000 #FFFFFF #550000 #000000 #FFFFFF #660000 #000000 #FFFFFF #770000 #000000 #FFFFFF #880000 #000000 #FFFFFF #990000 #000000 #FFFFFF #AA0000 #000000 #FFFFFF #BB0000 #000000 #FFFFFF #CC0000 #000000 #FFFFFF #DD0000 #000000 #FFFFFF #EE0000 #000000 #FFFFFF #FF0000 #000000 #FFFFFF 39
  38. 38. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #000000 #000000 1.00:1 #FFFFFF 21.00:1 #110000 #000000 1.02:1 #FFFFFF 20.51:1 #220000 #000000 1.07:1 #FFFFFF 19.66:1 #330000 #000000 1.14:1 #FFFFFF 18.41:1 #440000 #000000 1.25:1 #FFFFFF 16.86:1 #550000 #000000 1.39:1 #FFFFFF 15.15:1 #660000 #000000 1.56:1 #FFFFFF 13.42:1 #770000 #000000 1.78:1 #FFFFFF 11.77:1 #880000 #000000 2.05:1 #FFFFFF 10.26:1 #990000 #000000 2.35:1 #FFFFFF 8.92:1 #AA0000 #000000 2.71:1 #FFFFFF 7.75:1 #BB0000 #000000 3.11:1 #FFFFFF 6.75:1 #CC0000 #000000 3.57:1 #FFFFFF 5.89:1 #DD0000 #000000 4.07:1 #FFFFFF 5.15:1 #EE0000 #000000 4.64:1 #FFFFFF 4.53:1 #FF0000 #000000 5.25:1 #FFFFFF 4.00:1 40
  39. 39. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #FF0000 #000000 5.25:1 #FFFFFF 4.00:1 #FF1100 #000000 5.33:1 #FFFFFF 3.94:1 #FF2200 #000000 5.48:1 #FFFFFF 3.83:1 #FF3300 #000000 5.73:1 #FFFFFF 3.67:1 #FF4400 #000000 6.08:1 #FFFFFF 3.45:1 #FF5500 #000000 6.55:1 #FFFFFF 3.21:1 #FF6600 #000000 7.15:1 #FFFFFF 2.94:1 #FF7700 #000000 7.89:1 #FFFFFF 2.66:1 #FF8800 #000000 8.77:1 #FFFFFF 2.39:1 #FF9900 #000000 9.81:1 #FFFFFF 2.14:1 #FFAA00 #000000 11.00:1 #FFFFFF 1.91:1 #FFBB00 #000000 12.36:1 #FFFFFF 1.70:1 #FFCC00 #000000 13.89:1 #FFFFFF 1.51:1 #FFDD00 #000000 15.59:1 #FFFFFF 1.35:1 #FFEE00 #000000 17.48:1 #FFFFFF 1.20:1 #FFFF00 #000000 19.56:1 #FFFFFF 1.07:1 41
  40. 40. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #000000 #000000 1.00:1 #FFFFFF 21.00:1 #001100 #000000 1.08:1 #FFFFFF 19.44:1 #002200 #000000 1.23:1 #FFFFFF 17.09:1 #003300 #000000 1.47:1 #FFFFFF 14.25:1 #004400 #000000 1.83:1 #FFFFFF 11.50:1 #005500 #000000 2.30:1 #FFFFFF 9.13:1 #006600 #000000 2.90:1 #FFFFFF 7.24:1 #007700 #000000 3.64:1 #FFFFFF 5.77:1 #008800 #000000 4.52:1 #FFFFFF 4.64:1 #009900 #000000 5.56:1 #FFFFFF 3.78:1 #00AA00 #000000 6.75:1 #FFFFFF 3.11:1 #00BB00 #000000 8.11:1 #FFFFFF 2.59:1 #00CC00 #000000 9.64:1 #FFFFFF 2.18:1 #00DD00 #000000 11.34:1 #FFFFFF 1.85:1 #00EE00 #000000 13.23:1 #FFFFFF 1.59:1 #00FF00 #000000 15.30:1 #FFFFFF 1.37:1 42
  41. 41. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #00FF00 #000000 15.30:1 #FFFFFF 1.37:1 #11FF00 #000000 15.33:1 #FFFFFF 1.37:1 #22FF00 #000000 15.37:1 #FFFFFF 1.37:1 #33FF00 #000000 15.44:1 #FFFFFF 1.36:1 #44FF00 #000000 15.55:1 #FFFFFF 1.35:1 #55FF00 #000000 15.69:1 #FFFFFF 1.34:1 #66FF00 #000000 15.87:1 #FFFFFF 1.32:1 #77FF00 #000000 16.09:1 #FFFFFF 1.31:1 #88FF00 #000000 16.35:1 #FFFFFF 1.28:1 #99FF00 #000000 16.66:1 #FFFFFF 1.26:1 #AAFF00 #000000 17.01:1 #FFFFFF 1.23:1 #BBFF00 #000000 17.42:1 #FFFFFF 1.21:1 #CCFF00 #000000 17.87:1 #FFFFFF 1.18:1 #DDFF00 #000000 18.38:1 #FFFFFF 1.14:1 #EEFF00 #000000 18.94:1 #FFFFFF 1.11:1 #FFFF00 #000000 19.56:1 #FFFFFF 1.07:1 43
  42. 42. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #000000 #000000 1.00:1 #FFFFFF 21.00:1 #000011 #000000 1.01:1 #FFFFFF 20.83:1 #000022 #000000 1.02:1 #FFFFFF 20.53:1 #000033 #000000 1.05:1 #FFFFFF 20.04:1 #000044 #000000 1.08:1 #FFFFFF 19.38:1 #000055 #000000 1.13:1 #FFFFFF 18.56:1 #000066 #000000 1.19:1 #FFFFFF 17.62:1 #000077 #000000 1.27:1 #FFFFFF 16.58:1 #000088 #000000 1.36:1 #FFFFFF 15.49:1 #000099 #000000 1.46:1 #FFFFFF 14.38:1 #0000AA #000000 1.58:1 #FFFFFF 13.29:1 #0000BB #000000 1.72:1 #FFFFFF 12.23:1 #0000CC #000000 1.87:1 #FFFFFF 11.22:1 #0000DD #000000 2.04:1 #FFFFFF 10.27:1 #0000EE #000000 2.23:1 #FFFFFF 9.40:1 #0000FF #000000 2.44:1 #FFFFFF 8.59:1 44
  43. 43. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #0000FF #000000 2.44:1 #FFFFFF 8.59:1 #0011FF #000000 2.52:1 #FFFFFF 8.32:1 #0022FF #000000 2.67:1 #FFFFFF 7.86:1 #0033FF #000000 2.92:1 #FFFFFF 7.20:1 #0044FF #000000 3.27:1 #FFFFFF 6.42:1 #0055FF #000000 3.74:1 #FFFFFF 5.61:1 #0066FF #000000 4.34:1 #FFFFFF 4.83:1 #0077FF #000000 5.08:1 #FFFFFF 4.13:1 #0088FF #000000 5.97:1 #FFFFFF 3.52:1 #0099FF #000000 7.00:1 #FFFFFF 3.00:1 #00AAFF #000000 8.19:1 #FFFFFF 2.56:1 #00BBFF #000000 9.55:1 #FFFFFF 2.20:1 #00CCFF #000000 11.08:1 #FFFFFF 1.90:1 #00DDFF #000000 12.79:1 #FFFFFF 1.64:1 #00EEFF #000000 14.67:1 #FFFFFF 1.43:1 #00FFFF #000000 16.75:1 #FFFFFF 1.25:1 45
  44. 44. コントラスト比は、 46
  45. 45. 4.5:1 ! 47
  46. 46. 今後は文字以外にも適用されます。 48
  47. 47. 49https://waic.github.io/wcag21/guidelines/ より
  48. 48. 50https://waic.github.io/wcag21/guidelines/#non-text-contrast より 入力フォーム/ボタンなど アイコン/グラフ/図など
  49. 49. コントラスト比を測ってみよう 51
  50. 50. 52 bit.ly/readable_CCAe Colour Contrast Analyser をインストール事前準備
  51. 51. 53 コントラスト比 → レベル AA 判定結果 → 前景(テキスト)色 → 背景色 → Colour Contrast Analyser
  52. 52. 自分が関わったページを調べてみよう! 54
  53. 53. 関わったページがない人は、こちら → 55
  54. 54. 56http://www.pref.okayama.jp/ より
  55. 55. アンチエイリアスのかかった文字画像は注意 57 見えなくても字体(文字の骨格となる形) に影響がない部分 アンチエイリアスで薄くなった部分は測定不要 見えないと字体(文字の骨格となる形) に影響がある部分 アンチエイリアスで薄くなっても測定必要 http://www.pref.okayama.jp/ より
  56. 56. hover/focus時も忘れずに 58 利用者が最も注目しているタイミング 何を選んだのか読める必要がある http://www.pref.okayama.jp/ より
  57. 57. コントラストを高めてみよう 59
  58. 58. • スライド各ページに書かれている
 見えにくいキャッチコピーをはっきり見えるようにする • コントラスト比を測定し、測定値を記入 • 前景色と背景色のコントラスト比が 4.5:1以上になるように工夫する • どんな手段を使ってもOK • できる限り多くの方法でコントラストを高められた人が勝ち!
 (勝ち負け関係ない) • 制限時間:25分 60 作業内容
  59. 59. 2. 開く 1. Googleにログインしbit.ly/readable_0304を開く 61 準備 4. 自分の名前を入力 3. コピーを作成
  60. 60. 62 5. 自分の名前の付いたファイルが出来ていることを確認
  61. 61. 63 各自で工夫して、コントラスト比を高めよう! 塗りつぶしの色 枠線の色 その他の効果
  62. 62. コントラストの高め方いろいろ 64
  63. 63. 65
  64. 64. おまけ 66
  65. 65. 背景色 テキスト色 コントラスト比 テキスト色 コントラスト比 #FF0000 #000000 5.25:1 #FFFFFF 4.00:1 #FF1100 #000000 5.33:1 #FFFFFF 3.94:1 #FF2200 #000000 5.48:1 #FFFFFF 3.83:1 #FF3300 #000000 5.73:1 #FFFFFF 3.67:1 #FF4400 #000000 6.08:1 #FFFFFF 3.45:1 #FF5500 #000000 6.55:1 #FFFFFF 3.21:1 #FF6600 #000000 7.15:1 #FFFFFF 2.94:1 #FF7700 #000000 7.89:1 #FFFFFF 2.66:1 #FF8800 #000000 8.77:1 #FFFFFF 2.39:1 #FF9900 #000000 9.81:1 #FFFFFF 2.14:1 #FFAA00 #000000 11.00:1 #FFFFFF 1.91:1 #FFBB00 #000000 12.36:1 #FFFFFF 1.70:1 #FFCC00 #000000 13.89:1 #FFFFFF 1.51:1 #FFDD00 #000000 15.59:1 #FFFFFF 1.35:1 #FFEE00 #000000 17.48:1 #FFFFFF 1.20:1 #FFFF00 #000000 19.56:1 #FFFFFF 1.07:1 67
  66. 66. 白は膨張色なので大きく/太く見える。 黒は収縮色なので小さく/細く見える。 68
  67. 67. ここから仮説です。 69
  68. 68. #FF3300 #FF3300 5.73:1 3.67:1 70
  69. 69. #FFAA00 #FFAA00 11.00:1 1.91:1 71
  70. 70. #FFDD00 #FFDD00 15.59:1 1.35:1 72
  71. 71. 73 Excelでコントラスト比計算やってみた
  72. 72. #FF3300 背景色 #FF3300 5.73:1 コントラスト比 3.67:1 0.24 白/黒との 相対輝度の差 0.76 #FFAA00 背景色 #FFAA00 11.00:1 コントラスト比 1.91:1 0.5 白/黒との 相対輝度の差 0.5 #FFDD00 背景色 #FFDD00 15.59:1 コントラスト比 1.35:1 0.72 白/黒との 相対輝度の差 0.28 74
  73. 73. 白/黒との相対輝度の差が大きい色ほど はっきりと見えやすい。(という理解をしています 75
  74. 74. コントラスト比の基準値は、視力低下/色覚異常/ 老眼を考慮した値なので、視力/色覚が正常な者の 感覚だけで判断すべきではありません。 76
  75. 75. テキストは白のままでも 4.5:1 以上 確保できる組み合わせを探そう。 77
  76. 76. まとめ 78
  77. 77. • 4.5:1 • コントラスト比の測定は簡単! • コントラストを高める方法はいろいろ 79 まとめ
  78. 78. 次回は 5月17日(金)の予定です! 80
  79. 79. 81 @SawadaStdDesign また来週!
  • syuichitsuji

    Mar. 5, 2019

2019/03/04(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/03/04」でのスライドです。

Views

Total views

2,723

On Slideshare

0

From embeds

0

Number of embeds

985

Actions

Downloads

4

Shares

0

Comments

0

Likes

1

×