Slackでもみやすい文字色を調査してみた
こんにちは、デザイナーの櫻田です。
最近Slack絵文字を生成するのにハマってます。ジェネレーターを使ってもいいのですが、同じフォーマットで作れた方が楽だな〜と思いslack絵文字用のaiデータを作り始めました。
職場の何気ない雑談にネタのアンテナを張っておいてひっそり追加してるので、「これ追加したの誰？笑」と言う言葉を聞いてはひっそりニンマリしています。
そんなSlackカスタム絵文字なのですが、ええ感じに見える色選びって実は難しいんですよね。ライトモードではいい感じでもダークモードでは見えづらかったり…..
ということで今回は視認性の高いSlackカスタム絵文字の色を研究してみました！
Slackカスタム絵文字の利点と難点
Slackでは投稿されたものに対して既存の絵文字やカスタマイズされた絵文字でリアクションすることができます。ChatWorkやFacebookでも絵文字リアクションはできますが、決められた絵文字から選ぶスタイルで、そこまで自由度は高くありません。
一方、Slackのカスタム絵文字はPNGなどの静止画だけでなく、GIFでの動画形式でも登録することができ、かなりカスタマイズ性が高いです。Slackは主に社内ツールとして使われることが多いためか企業によってはかなり癖の強いカスタム絵文字が登録されたりして、社内文化の形成に一役かっていたりします。
超絶余談なのですが、ねこじゃらしでのアルバイト時代に初めて触れたSlack文化が楽しすぎてあれこれ登録していたら、某有名海外ミームである「Party Parrot」のスタンプが社内でプチ流行してしまい、管理者に「目がチカチカする！うるせぇ！！」と消された経験があります。なおその後誰かによって、ちょっと動きが控えめなバージョンのオウムが追加されてました。Party Parrot愛されてるな...
さてそんな粛清にも懲りず弊社の共用のSlackにも日々ちまちまと思い付いた絵文字を登録していますが、制作していて割とぶち当たる壁があります。
それは
「1色の文字スタンプを追加すると、色によってはかなり可読性が低くなる」
ということです。
例えば黒1色で作られたのスタンプはライトモードで見るといい感じですが、ダークモードになるとほとんど見えません。同様に青系の文字も選択時に見えづらくなっていたりします。
一番簡単な解決方法は、文字の後ろに白や黒の背景を敷いてしたり、文字を縁取ってしまうことなのですが、正直...なんかこう...かわいくない...
Slack公式のカスタム絵文字のヘルプにも「最善の結果を得るため、背景色を透明にした 128 x 128 px の正方形の画像を推奨します」って書いてありますし...できたら背景を敷くことなく見やすい絵文字を作りたいものです。
Slackでも見やすい色とは
というわけで今回は背景を敷かなくても縁取りをしなくてもSlackで見やすい色とはどんなものかを検証し、カラーパレットを作ってみたいと思います。
Slackの仕様①UIカラー
絵文字周りで使われいている背景カラーは以下の通りです（ライト/ダーク）
他ユーザーが絵文字を押したとき（#f6f6f6 / #232529 )
自分が絵文字を押したとき（#e4eff3 / #1264a3 )
さらに、絵文字選択画面時のホバーは6色のカラーがあります。
なお、Slackにはサイドバーの色をカスタマイズできる機能がありますが、こちらはユーザーが完全にカスタマイズ可能である点と、絵文字の影響が少ないことから今回は考慮しません。
コントラスト比
みやすい色を感覚で見つけていくのもいいですが、せっかくなので今回は数値化していきたいと思います。
色のコントラストは計算式で求めることができます。コントラスト比が高い＝見えやすいほど高い値に、コントラストが低い＝見えづらい色ほど低い値になります。
特に、アクセシビリティの達成基準であるWCAGではコントラスト比1:4.5以上が推奨されています。
検証方法
今回はコントラスト比を測るために「Colorable」というWebツールを使います。
Colorableは文字色と背景色のコントラスト値を出すだけでなく、スライダーによって色味を調整することもできます。
このツールを使いながら各背景色（ライト背景色/ライトホバー時、ダーク背景色/ダークホバー時）各色と文字色のコントラスト比を測りつつ、ちょうど良いコントラストのバランスが取れるような色味をさがしていきます。
検証
まずは試しにIllustratorのデフォルトパレットで試してみました。
濃いめの色が多いためライトモードではいい感じに表示されるものが多いですが、やはりダークモードでは見づらいものもちらほら…
そして何となく予想していたことですが、ライトとダーク双方で1:4.5を確保することは不可能に近そうです。
（確かに4.5あると相当小さい文字でもはっきり認識できそうな感じ。白背景であれば1:2.5くらいあれば文字の認知はそれなりにできそう。体感的に。）
そこで、「ライトとダークどちらのモードでもそれなりに見える」色を探す方に舵を切るために、背景色のみの2色とホバー色も含めた4色のコントラスト比の分散も出してます。
分散は値の散らばりを表すもので、今回はこの値が小さいほど色味の見え方の差が少ないといえます。なおどちらの値も低い/高いという可能性もあるので今回はあくまで目安値とします。
そんなこんなで最終的に選んだのが以下のカラーパレット。
本来であればここからバランスの取れる色味を計算で求めたかったのですが、それを組む元気はなかったので、あれこれスライダーをいじって良さげな色を探しています。
また、もう少し明度や彩度を下げればコントラストが維持できる色も存在するのですが、どうしても濁った印象の色味になってしまうため、あくまで明るい印象を残しつつある程度のコントラストを確保できる色味をセレクトしています。（そもそも実用性だけ考えれば背景をつければ解決する話なので…）
気をつけたい色は以下の通り
黄色：白背景でのコントラストを確保できない
青：紺に近くなるほど黒背景でのコントラストが確保できない。
：ダークモードでの絵文字選択時の色が青なので、ここも難しい。
黒/白：ライトモードorダークモードしか使ってないと忘れがちだけど、違うモード使ってる人がみれなくなっちゃうので背景つけるか別の色を選びましょう
さいごに
あれこれ数値を出しつつ結果的に感覚で選ぶというよくわからん検証になってしまいましたが、うまく双方のバランスをとりつついい感じの色を選べたんじゃないかな〜と思います。
今度余力があったら計算でも出してみたいな〜と考えていますが、果たしてできるのか….!!
今回の検証で2窓でカラーコードをコピペするのが結構めんどくさかったので、背景色（あるいは文字色）が複数選択できるカラーコントラストチェッカーツールがあるといいなぁとか思いました。ご存じの方は教えてください。
この記事が気に入ったらサポートをしてみませんか？