コントラスト比はどうやって測るの？

Chromeの開発者ツールで文字を検証し、Stylesパネルのcolorの色の四角をクリックすると、カラーピッカーにContrast ratioが表示されます。専用の計算サイトでも測れます。

大きい文字なら薄い色でもいいの？

はい。目安として24px以上（太字なら18.5px以上）の大きい文字は、コントラスト比3:1以上あれば合格です。ふつうサイズの本文は4.5:1以上が必要です。

同じです。黒背景に濃いグレーの文字はやはり読めません。背景が何色でも「文字色と背景色の差が4.5:1以上」という基準は変わりません。

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

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

上のカードも「デザインとしては」あり得る色です。でも読み手を選んでしまう——それがコントラスト不足です。

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

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

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

ヒーロー画像の上に白いタイトル——かっこいいけれど、写真には明るい部分も暗い部分もあるので、場所によって読めたり読めなかったりします。定番の解決策は、文字の下に半透明の帯を敷くことです。

.hero-title {
  color: #fff;
  background: rgba(0, 0, 0, 0.55);  /* 半透明の黒い帯 */
  padding: 8px 16px;
}

帯があれば、写真のどの部分に文字が重なっても背景の暗さが保たれ、コントラストが安定します。写真全体を少し暗くする方法もありますが、まずはこの帯がいちばん手軽です。

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

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

グラフの線を色だけで区別するのも同じ理由で危険です。実線と点線を使い分ける、線の近くに名前を書くなど、色以外の手がかりをひとつ足すだけで、だれにでも伝わる図になります。