はてなブログのランキングに面白いエントリーがありました。そこから始まって、自分で調べたこと、感じたこと、考えたことをまとめます。
Khromaという海外のWEBサービスで、ランダムに表示される色パターンから自分の好みの色を50個ほど選択すると、世界のどこかにあるKhromaのAIエンジンがユーザの好きなパターンを把握して、オススメの色の組み合わせを表示してくれるものです。
今はベータ版っぽいんですが、ユーザ登録不要で出来ますので興味ある方はどうぞ。
Khroma - The AI color tool for designers
軽く紹介
このサービスで出来ることは上で紹介しているOMGさんのエントリに書いてあるので、この記事では深堀りはしませんが少し紹介。
Khromaは色を選択して分析させると↓のような形でパターンを表示してくれます。
これ自体見てて楽しいんですが、カードにマウスオーバーすると、オプション機能が表示されます。
オプションのアイコンの左から、
・Swap Colors
背景色と文字色の切り替え
・Favarites
お気に入り登録。使い方は不明。
・Details
背景色と文字色の詳細情報表示。
Swap ColorsとDetailsを押した画面が↓
やってみて感じた使い方・シチュエーション
・色使いは難しくてバチっと決まることがあまりないですが、自分で作るモノだったらこのサービスが出力したパターンをそのまま使える。
・お客さんにオモシロ便利ツールとして紹介したり、カラーリングやAIという視点で自チーム内のコミュニケーションツールとしても使える。
・好きな人にKhromaの使い方をハンズオンレクチャーして「簡単でしょ。50個選んでみなよ」と誘導できれば、その人の好みの色を把握できる。むふふ。
知らなかったこと、Khromaをやってみて調べたこと
WCAG Ratio
上に掲載している画像で2枚並んでいるやつの右側最下段にあるやつです。これは全く知らなかったのでググって調べてみました。
WCAG・・・Web Content Accessibility Guidelines
ようはWebの世界でのアクセシビリティーを確保するためのガイドラインをWCAGというらしいです。
Web Content Accessibility Guidelines (WCAG) 2.0
Webのアクセシビリティーにこんな大層な文書が必要か、というのが率直な感想。
で、他の解説ページを見てようやく納得しました。現在はWebがある種の生活インフラにまで位置づけられていると考えると、Webを見れない人は生活上非常に不利な立ち位置になってしまう。誰でもアクセスできて自由で素敵な世界というのがネットのポリシー（個人的な解釈）なので、様々なハンディキャップを持つ人もWebを利用できる状態でなきゃいかん、とそういうものみたいです。
確かに、私は朝起きた時にWebで天気予報を見るし、道がわからなければGoogleマップにアクセスする、飲食店を探すなら食べログを見る、わからないことがあればググる、とWebの世界の便利さに依存している状態であると思います。依存は少々言い過ぎかもしれないですが、蛇口を捻れば水が出る、スイッチを入れれば明かりが付く、という事と同レベルの頼り方をしています。私の家だけ水が出ないのであれば、それは大変に不便な事であり、その不公平さに声をあげると思う。
で、それを公平にしましょう、と考えてWeb製作者側に対するガイドラインが出ているということです。
前提が長くなりましたが、WCAG ratioです。Khromaは色パターンを表示してくれるサービスですので、ここでいうWCAG ratioは背景と文字色のコントラスト比を表すもののようです。Wikipediaで計算式を見てみましたが、正直非常にわかりづらかったので計算方法は触れずにざっくりと必要なことだけまとめると、
・WCAG ratioはコントラスト比を表し、背景と文字の明暗の差を数値化したもの
・色合いのRGB値をインプットに計算する
・最大で21:1（完全な黒と完全な白）、最少で1:1（白と白。たぶん同色はこれ）となる。
・十分なレベルは7.0:1以上（AAA）、最低で4.5:1以上（AA）が必要。
※文字の表示サイズやフォントにより若干条件が変わるため正確な条件が知りたい方は本家や翻訳版ページ、Wikipediaを参照されたし。
Web Content Accessibility Guidelines (WCAG) 2.0
興味深い点
背景と文字色を変えると見やすさが変わる（気がする）
1つ目はKhromaのオプション的な機能であるSwapColorsを使って背景色と文字色を入替えた時の印象の違いです。皆さんどういう印象を受けますか？
私は右側のSidecarが頭にきている方が見えやすいです。コントラスト比は単純に明るい方と暗い方の明暗の比率から求めるため、上の2枚は同じWCAG ratioです。私はたぶん色弱ではないと思うのですが、、、、、と書きながら両方を見ていたらLavenderの方が見やすいような気もしてきました。
結論・・・よくわからない！同じような気もするし、じっと見ていると、やっぱり片方が見えやすいような気もします。色弱にも３つほどタイプがあるらしいので、おそらく誰しもどれが強いとか弱いとかがあるのだと推測します。
直感とコントラスト比
これは出力した色パターンをポチポチとみていた時に気付いたことです。前述の通り、私はおそらく色弱ではないと思われるので、それを前提としていますが、直感と実際のコントラスト比が割と違うということです。直感といってもKhromaで並べた時に相対的にこっちのが高いだろうな～と思ったら結構違ったという話です。
こっちでも例を出してみます。
皆さん、どれが見やすいでしょうか？
またどれがWCAG ratio高いと思いますか？
答え
左から2.97:1(Fail)、9.02:1(AAA)、5.38:1(AA)でした。
私の直感というか見た感じでは、左のOlivineが一番コントラスト比が高いと思ったのですが、数値化してみると、意外に３つの中で一番低い結果でした。むしろ中と右は赤系でかぶっているから見にくい印象なんですが。。。まぁ数値として出たので、そういうことなんでしょう。
最後に所感
実際にこうして数値化してみて直感と違うということは、恐らく普段からコントラストの無い色使いをしている場面があるだろうなと思いました。仮に上の例で挙げた３つのカラーがあった場合、私は左を使うと思います。勿論何に使うかによってカラーテーマは決めますが、特に縛りが無くて、「色無いとしょぼく感じるなぁ、とりあえず気持ち悪くならないように塗ろう」と思った時に上記の色見本があれば左を選びます。日本では色覚異常の方が男性で5%、女性で0.2%いるそうです。男性は20人に1人の割合、女性で500人に1人の割合。
私は10年ほどIT業界にいて、仕事仲間やお客さん、会社の人たちは男性であるケースが非常に多かったです。殆ど男ばっかりのところで仕事しています。つまり私の業務環境は20人に1人の割合で色弱などの色を判別することを苦手にする人が居る環境となるわけです。今まで仕事をしてきて、「私は色弱なので～」と言われたことがないので、たぶん色々な人にストレスをかけて、もしくは嫌な思いをさせてきたのではないかということに気づき、少しへこみました。
じゃあどうするか。
周りの人たちに「色弱の人いますか？」とは聞けないので、ユニバーサルな色使いを心がけていくしかないですね。あと色だけに情報を持たせるのはそうしないといけない時以外はやらないと。
調べるとカラーバリアフリーというものがあるらしいので、今度勉強してみようと思います。
おわり
