文字色と背景色を確認する：淡い案内文を数値で見直す

補足説明だから目立たせないつもりで文字を薄くしたら、開室時間まで読み取りにくくなった。文字色と背景色を確認する作業では、色の名前ではなく、実際に重なる二色を組にして扱います。

架空の読書室の案内で、白い背景に載せる通常サイズの本文を点検します。写真上の文字や半透明の背景は今回の計算例には含めません。まず不透明な単色同士で手順を覚えましょう。

読ませたい補足を、装飾として扱わない

題材の文章は「水曜日は午後から開室します」です。小さな注意書きでも、訪問時間を決めるために必要な情報です。見出しより控えめにすることと、読みにくくすることは同じではありません。

文字色だけを選ぶ前に、背景が本当に白かを確認します。カードの中だけ薄い灰色なら、そのカードの背景を使って調べます。制作時の色見本と実際のCSSが異なる場合は、表示に使われている値を記録してください。

ブラウザーの開発者ツールで対象の文字を選び、適用されているcolorとbackground-colorを確認する方法があります。背景が透明なら、後ろに重なる要素の背景もたどります。見つけた色の値と対象の文章を一組で残しましょう。

本文の二色を、コントラスト比で比べる

コントラスト比は、二色の明るさの差を表す数値です。W3Cのコントラストに関する解説では、通常のテキストに少なくとも4.5:1を求めています。大きな文字などには別の条件がありますが、今回は通常の本文として判断します。

練習では白の#FFFFFFに、灰色の#999999を載せた案と、濃い灰色の#595959を載せた案を比較します。前者は約2.85:1、後者は約7.00:1です。この値は色の組から計算したもので、読者による読みやすさの測定結果ではありません。

コントラストを計算するツールへ文字色と背景色を入れ、通常の文字についての結果を見ます。境目の値を四捨五入して合格にしないでください。例えば4.49:1を4.5:1とみなす判断はできません。記事中の近似値は比較の説明用です。

薄さを直した後も、情報の強弱を付けられる

二つ目の配色なら、白い背景に対する今回の基準を満たします。まず文字色だけを変更し、同じ文章、同じ背景、同じ文字サイズで読み比べましょう。色と大きさを同時に変えると、どこを改善したか記録しにくくなります。

本文が見出しと同じくらい目立つと感じても、すぐ色を薄く戻す必要はありません。見出しの太さや周囲の余白で役割を分ける案があります。文字サイズを三つの役割で整理する記事では、階層の作り方を扱っています。

色の組が基準を満たしても、文字が小さすぎる、行が詰まる、背景画像に埋もれるなどの問題は残り得ます。数値を確かめた範囲と、画面を読んで確認した範囲を分けて記録します。これだけでページ全体のアクセシビリティを確認したとはしません。

色の数値を直した後、注意書きを最後まで読む

自分の練習ページから薄い注意書きを選び、文章、文字色、背景色、計算結果を記入します。基準に届かなければ文字を濃くするか背景を変え、再計算してください。その後、実際の画面で文章の最後まで読んで確認します。

完成物は変更前後の色の組と、どの文章を確認したかが分かるメモです。題材がない場合は、無料レッスンで用意した本文に、架空の開室案内を一段落追加して試せます。ページ内で背景が変わる場所へ移したら、その場所でも改めて二色を調べましょう。