黒背景の文字は、色の好みより先に読めるかを見る

黒い背景にグレーの文字を置くと、落ち着いた雰囲気になります。でも、その文字を読んでほしいなら、暗くしすぎた時点で役目を果たしづらい。投稿画像でもWebの画面でも、最初に決めたいのは「どの色が好きか」だけではありません。

文字と背景の明るさの差には、確認できる目安があります。W3Cの基準では、通常の文字は4.5対1以上、大きな文字は3対1以上のコントラストが求められます。Web向けの基準ですが、SNS画像の文字を考えるときにも、感覚だけで判断しない手がかりになります。

例えば、黒に近い背景なら、本文を白にしてから見出しやラベルの色を考える。読ませたい説明文を薄いグレーへ変える前に、それが読む優先度を下げてよい情報なのか確認します。日付や条件も、参加する人に必要なら、ただ小さく薄くして済ませたくありません。

色付きのラベルに白文字を載せる場合も同じです。明るい緑や黄色は目立ちますが、白い文字との明るさの差が小さくなる。背景色を濃くするか、文字色を変えるか、組み合わせで考えます。

色を覚えなくても、内容が分かるようにする

ジャンルを緑、青、紫で分けるなら、「X運用」「SNS運用」「AI活用」といった文字も残したい。色の使い方についてのW3Cの説明でも、情報を色だけで伝えないことが示されています。色は探す手がかりにできるけれど、意味を全部背負わせなくていい。

グラフなら線の近くに項目名を置く。選択したタブなら、色に加えて下線や枠でも示す。注意が必要な箇所には、赤くするだけでなく、何に注意するのかを短く書く。見る人が凡例を覚えなくても読めるようにしたいです。

確認は、大きな制作画面だけで終えず、実際のスマホで表示する。縮めたときに細い文字が消えていないか、写真の明るい部分に白文字が重なっていないかを見る。文字の後ろに背景を付けるなら、必要な範囲を先に選びます。

一番伝えたい文を読み、条件を確認し、次の行動を選べる。その順番で文字を追えるか。仕上げに装飾を足す前に、説明文と小さなラベルまで読んでみる時間を取りたいです。