読める色、読めない色（コントラスト）

薄いグレーの文字は上品でおしゃれ。でも、まぶしい屋外や、視力の落ちた目にはそもそも読めません。文字色と背景色の明るさの差をコントラストと呼び、これを確保するのが「読めるページ」の土台です。

見比べてみよう

同じ文章を、コントラストだけ変えて並べます。

自分には読めても、条件がちがえば読めない。だから感覚ではなく数値で確かめます。

ブラウザが計算してくれる

コントラスト比は、Chromeの開発者ツールがその場で教えてくれます。

1. 文字の上で右クリック→「検証」
2. Stylesパネルのcolorの色の四角をクリック
3. 開いたカラーピッカーにContrast ratioが表示される（✓が付けば合格）

カラーピッカー内の曲線より下の色を選べば合格、という表示も出るので、合格ラインを保ったまま色を選び直せます。

色「だけ」で伝えない

コントラストと並ぶもう1つの鉄則が、色だけを頼りに情報を伝えないことです。世界には色の区別がつきにくい人が男性の20人に1人ほどいます。

• ❌ 「赤い項目は入力必須です」——色が区別できないと分からない
• ○ 「※必須と書かれた項目は入力必須です」——色が見えなくても分かる

エラーを赤くするのはOK。ただし赤いだけにせず、アイコンや文言もそえる。「色は強調、意味は文字で」と覚えましょう。

このレッスンのまとめ

1. 文字と背景の差はコントラスト比4.5
   が合格ライン
2. 数値は開発者ツールのカラーピッカーが計算してくれる（感覚で決めない）
3. 色は強調にとどめ、意味は文字やアイコンでも伝える