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.

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

1,792 views

Published on

CMS大阪夏祭り2016 Lightning Talk

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

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

×