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

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