Color Testerはどうやって文字の色を拾っているのか?

Color Testerはどうやって文字の色を拾っているのか?

• 1.
  Color Testerは どうやって ⽂字の⾊を拾っているのか? 野⽥ 純⽣@アルファサード株式会社 CMS⼤阪夏祭り2016LT
• 2.
  ABOUT ME ▸ 野⽥純⽣(のだすみお) ▸ https://twitter.com/junnama ▸ https://www.facebook.com/junnama.noda ▸ http://junnama.alfasado.net/online/ ▸ アルファサード株式会社 代表取締役社⻑ ▸ Movable Type エバンジェリスト ▸ webアクセシビリティ エバンジェリスト ▸ ソフトウェア開発者(Perl/PHP/JavaScript/Swift/XOJO)
• 3.
  MOVABLE TYPEのプラグインを 世界で⼀番たくさん書いている⼈
• 4.
  for macOS/Windows https://alfasado.net/apps/colortester-ja.html
• 5.
  ✴ 2⾊のコントラスト⽐を計算し評価するツールです。 コントラストの評価はJIS X8341-3:2016 (WCAG 2.0)の達成基準に基づきます。 ✴ 画像ファイルをウィンドウにドラッグ&ドロップ(※) することで、画像の背景⾊と前景⾊を⾃動的に推測 し、評価を⾏う機能があります。またはクリップボー ドのピクチャから⾊を取得して評価を⾏うこともで きます(⾃動取得した⾊は正確でない可能性がありま す)。
• 6.
  1.4.3 最低限のコントラスト: テキスト及び画 像化された⽂字の視覚的な表現には、少なくと も4.5：1 のコントラスト⽐をもたせる。ただ し、次の場合は除く： (レベルAA) ⼤きな⽂字： サイズの⼤きなテキスト及びサ イズの⼤きな画像化された⽂字には、少なくと も 3：1 のコントラスト⽐がある。 付随的： テキスト⼜は画像化された⽂字にお いて、次の場合はコントラストの要件は該当し ない。アクティブではないユーザインタフェー ス・コンポーネントの⼀部である、装飾だけを ⽬的にしている、... “
• 7.
  “⾊の相対輝度 L =0.2126 * R + 0.7152 * G + 0.0722 * B と定義されている。この 場合のR, G 及び B は： RsRGB <= 0.03928 の場合：R = RsRGB/ 12.92、それ以外の場合： R = ((RsRGB+0.055)/1.055) ^ 2.4 GsRGB <= 0.03928 の場合：G = GsRGB/ 12.92、それ以外の場合：G = ((GsRGB+0.055)/1.055) ^ 2.4 BsRGB <= 0.03928 の場合：B = BsRGB/ 12.92、それ以外の場合：B = ((BsRGB+0.055)/1.055) ^ 2.4...
• 8.
  #000000 #EFBF2F コントラスト⽐ [ 12.1: 1 ](適合)
• 10.
  DEMO 各CMSのロゴをドラッグ&ドロップしてみる
• 12.
  1.4.3 最低限のコントラスト: テキスト及び画 像化された⽂字の視覚的な表現には、少なくと も4.5：1 のコントラスト⽐をもたせる。ただ し、次の場合は除く： (レベルAA) … ロゴタイプ： ロゴ⼜はブランド名の⼀部であ る⽂字には、コントラストの要件はない。 “
• 13.
  本題 投げ込まれた画像から⽂字の⾊を推測するロジックについて
• 14.
  背景⾊と前景⾊判定 ✴ 画像を縮⼩する (動作速度のため) ✴256⾊に丸める (グラデーション、近似⾊を丸める) ✴ ピクセルをなめて、⼀番⼤きな⾯積を占める⾊が背景⾊ ✴ ⼆番⽬以降の⾯積を占める⾊で、背景⾊と⼀定のコントラス ト⽐以上の⾊が前景⾊ ✴ ⾊数が⼀定数/総ピクセル以上のものは写真(⽂字を含まない) ✴ (その他にも) GIFアニメーションは⾃動判別可能
• 15.
  背景⾊と前景⾊判定 ✴ 1番⽬にピクセルを占めるのは ✴ 2番⽬にピクセルを占めるのは ✴コントラスト⽐１.6 : 1 <=違う! これやない ✴ 3番⽬にピクセルを占めるのは ✴ コントラスト⽐ 2.7 : 1 <=違う! これやない ✴ 4番⽬にピクセルを占めるのは ✴ コントラスト⽐ 21 : 0 <=これや!
• 16.
  8341
• 17.
  画像アップロード時に⾃動テスト実施
• 18.
  ⾃動テストに失敗したものについて ピッカーで⾊を拾うことが可能
• 19.
  アルファサード株式会社では⼈財を募集中です ▸ CMSエンジニア/フロントエンドエンジニア ▸ webアクセシビリティ・スペシャリスト ▸iOS/Androidエンジニア ▸ クラウドインフラエンジニア ▸ webディレクター ▸ セールスエンジニア(100%インバウンド営業)
• 20.
  アルファサード株式会社では⼈財を募集中です ▸ ⾃分磨き⼿当(⽉に5000円)、携帯⼿当、住宅⼿当 ▸ 週1回までの在宅ワーク選択制度 ▸週休3⽇制選択可能 ▸ 従業員持ち株制度 ▸ 勤務地はセールスエンジニア/webディレクターは東京 ▸ それ以外の職種は、⼤阪、東京または広島県福⼭(⼦会社)
• 21.
  ありがとうございました!