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

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番⽬にピクセルを占めるのは

✴ コントラスト⽐１.6 : 1 <=違う! これやない

✴ 3番⽬にピクセルを占めるのは

✴ コントラスト⽐ 2.7 : 1 <=違う! これやない

✴ 4番⽬にピクセルを占めるのは

✴ コントラスト⽐ 21 : 0 <=これや!

8341

画像アップロード時に⾃動テスト実施

⾃動テストに失敗したものについて ピッカーで⾊を拾うことが可能

アルファサード株式会社では⼈財を募集中です

▸ CMSエンジニア/フロントエンドエンジニア

▸ webアクセシビリティ・スペシャリスト

▸ iOS/Androidエンジニア

▸ クラウドインフラエンジニア

▸ webディレクター

▸ セールスエンジニア(100%インバウンド営業)

アルファサード株式会社では⼈財を募集中です

▸ ⾃分磨き⼿当(⽉に5000円)、携帯⼿当、住宅⼿当

▸ 週1回までの在宅ワーク選択制度

▸ 週休3⽇制選択可能

▸ 従業員持ち株制度

▸ 勤務地はセールスエンジニア/webディレクターは東京

▸ それ以外の職種は、⼤阪、東京または広島県福⼭(⼦会社)

ありがとうございました!