読みやすい文字の色って何色なの？
ことの発端は、社内デザインレビュー会。
レビュー会でこんな発言がでました。
「だいたいのサイトの文字色って#111とか#333だよね」
※ちなみにnoteは#222！
よく文字の色にベタ黒は使わないのがセオリーとされていますが、
・コントラストがきついと見づらい
・サイトの回遊性をあげるために、目に優しい色がよい
等の理由はあれど、このふんわりとした暗黙知のような存在について調べてみました。
まずそもそものお話
文字は、可読性、判読性、視認性がよいかが最優先されるべきということ。
文字が文字として認識できることは、アクセシビリティの観点からWCAGで推奨のコントラスト比を記載しています。
ここでのコントラスト比とは背景色と前景色のコントラスト比。
例えば、コントラスト比の最大値は下記のとおり。
コントラスト比は21:1
背景色が#FFFFFF（白）
前景色が#000000（黒）
最小値は下記のとおり。
コントラスト比は1:1
背景色が#FFFFFF（白）
前景色が#FFFFFF（白）
単純にコントラスト比が高ければ、読みやすい（認識しやすい）になるかと思います。
そこで、WCAGが推奨しているのは、
最低限のコントラスト比率 4.5：1
十分なコントラスト比 7：1
また、文字サイズによってコントラスト比が変わってきます。
文字サイズが大きい場合はコントラスト比が低くてもよしとされています。
※文字サイズが大きいの定義は、24px又は太字で18.67pxのテキストとしています。
最低限のコントラスト比率 3：1
十分なコントラスト比 4.5：1
コントラスト比の達成基準をクリアした上で、見やすさを考えている
文字の色が#111や#333である明確な理由はわかりませんでしたが、コントラスト比を担保した上で見やすさを考えた配色設定をしているのかなという答えになりました。
また、マテリアルデザインにおいては文字色に透過をかけています。
情報の優先度によってテキストの明度の調整をかけるのではなく、背景色へのなじみとコントラストを考慮して透過を使用しています。
補足として
マテリアルデザインをPSDで再現する際に、レイヤーの「不透明度」ではなく「塗り」に対して透過を調整するとhtml上と同じ見栄えになる模様。
ここの違いがレイヤー単位かデータ単位かで透過の影響度が変わるはずなので、テキストに対して「不透明度」と「塗り」の設定で色の見栄えが変わらないと思っていたのに、変わってしまったのでそこの理由はわからず…。
どなたかご存知であればコメントください。
以上、ご査収ください。