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