対比：メリハリで伝わるをつくる

差がないと何も伝わらない

対比とは、差をつけることで重要なものを際立たせる技術です。
視覚は「変化」に反応します。同じ大きさ・同じ色・同じフォントで要素が並ぶと、
脳は「全部同じ重要度」と判断し、どこを見ればいいかわからなくなります。

この現象には視覚的な根拠があります。人の目は「変化・違和感」に無意識に引き寄せられる性質を持っており（視覚的顕著性と呼ばれます）、
均一な要素の中に「明らかに異質なもの」があると視線は自動的にそこへ向かいます。
デザインにおける対比はこの本能的な反応を意図的に利用する技術です。

デザイナーが対比を設計するとき、「見た人が0.5秒で最初に目に入るのは何か？」という問いを常に持ちます。
その答えが意図した最重要情報と一致しているなら対比は機能しています。
別の要素が先に目に入るなら、対比の修正が必要なサインです。

対比をつける方法

対比を生み出す方法はいくつかあります。

サイズでは、見出しと本文に大きな差をつけます。
見出し48px＋本文14pxのように、差が大きいほど効果的です。
20pxと22pxのような小さな差では機能しません。

色では、暗い背景に明るいテキスト、
または明るい背景に暗いテキストを組み合わせます。
視認性の基準（WCAG 4.5:1）を意識しましょう。

太さでは、Bold見出し＋Regular本文のように太さを変えます。
同じフォントでも太さの違いだけでメリハリが生まれます。

余白では、重要な要素の周りに大きな余白を与えることで「これが主役」と示せます。

対比は「大胆に」が原則

初心者がよくやる失敗は「少しだけ変える」ことです。
20pxと22pxでは機能しませんが、20pxと48pxなら明確に差が出ます。
対比に「ほどよい」は通用しません。「やりすぎかな？」と感じるくらいが適切な場合がほとんどです。

デザイナーが使う具体的な数値基準を覚えておきましょう。
サイズの対比は最重要情報が補足情報の2倍以上（例：タイトル40〜48px・本文14〜16px）。
太さの対比はBold（700）とRegular（400）の組み合わせが基本で、
同じウェイトを並べると差が生まれません。色の対比は白背景に黒テキストの比率（21:1）に近いほど目立ちます。
WCAG基準の4.5:1以上を満たすと読みやすさと視認性を両立できます。

💡 WCAG（ダブリューキャグ）とは？ W3Cという国際団体が定めた「Webコンテンツを誰にでも使いやすくするためのガイドライン」です。
4.5:1という数字は、視力が低下したお年寄りなどでも不自由なく文字を読める最低ラインとして計算されています。

これらの数値を目安にしながら、「まだ小さい/まだ控えめ」という感覚を持って大きめに差をつけることが、
プロらしいメリハリのあるデザインへの近道です。

まとめ

対比は差の大きさが重要です。サイズ・色・太さ・余白のいずれかで大胆に差をつけることで、
視線をコントロールし重要な情報を際立たせることができます。

NEXT STEP