コントラストとは、大きさ・色・太さ・形などの「差」を使って、情報の違いや優先度を見せることです。
会議の議題を全部太字にして、さらに全行へ黄色いマーカーを引くと、重要事項がにぎやかさの中へ隠れます。締切だけを太くし、ほかを通常の文字に戻せば差が生まれます。これは情報の強弱のたとえで、文字と背景の読みやすさを証明するものではありません。
差を作る3つの方法
- 大きさの差。 見出しと本文、主役の写真と補助写真を分ける
- 太さ・形の差。 見出しのウェイトやボタンの形で役割を分ける
- 色・明るさの差。 背景から文字や操作部品を見分けられるようにする
一度に三つ全部を強くする必要はありません。まず「何を先に見せるか」を決め、その一つと周囲の差を作ります。
情報の強弱と文字の読みやすさは分けて確認する
タイトルを大きくするコントラストと、本文を背景から読めるようにするコントラストは、目的が違います。Web上の文字色は見た目の印象だけで判断せず、WCAG 2.2のコントラスト基準で確認します。大きな見出しと通常の本文では条件が異なるため、使用箇所も一緒に見ます。
よくある誤解
「差は強いほどよい」という誤解です。差を全体へ増やすと、読む順番が再び平らになります。コントラストは、強くする場所と静かにする場所を一組で作る考え方です。
30秒で試す
手元の一枚から少し離れ、目を細めて最初に残る形を見てください。それが主役でなければ、主役をさらに飾る前に、周囲の大きさ・太さ・色のどれか一つを弱めます。
関連して学ぶ
- ボタンが「押せそう」に見えるのはなぜ — 押せる見た目を作る差の使い方
- デザインの色は何色まで？ — 色数と差の関係
- 背景色と文字色の組み合わせ — 読める文字色を確かめる