CMS大阪夏祭り2016 Lightning Talk

1. Color Testerは
どうやって
⽂字の⾊を拾っているのか?
野⽥ 純⽣@アルファサード株式会社
CMS⼤阪夏祭り2016 LT

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