Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 962 vues

Publié le

CMS大阪夏祭り2016 Lightning Talk

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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. ありがとうございました!

×