ピンクとグレーで文字が読みにくいときは？明るさと面積を整える

ピンクとグレーでまとめたWebページや案内カードで、文字が薄く感じられることがあります。原因の一つは、背景と文字の明るさが近いことです。色を全部変えなくても、文字のグレーを濃くする方法と、ピンクを使う面積を減らす方法があります。体験レッスンの案内を例に、直し方を比べます。

読みにくい原因はピンクとグレーの明るさが近いこと

淡いピンク■#F5DFE8の背景に、薄いグレー■#A99DA4の文字を置いた場合、コントラスト比は約2.06:1です。コントラスト比とは、文字と背景の相対的な明るさの差を表す数値です。ピンクとグレーの色みが違っていても、この組み合わせでは通常サイズの文字を読むための差が足りません。

背景のピンクを変えず、文字を濃いグレー■#33333Aにすると約9.91:1になります。まず文字色を調整し、内容を読むための差を確保しましょう。ピンクの面積だけを小さくしても、同じ文字色と背景色のコントラスト比自体は改善しません。

明るさと面積を変えた2つの配色例

ピンクを広く残す：文字を濃いグレーにする

案内カードの背景を淡いピンク■#F5DFE8のまま広く使い、見出しと本文を濃いグレー■#33333Aにします。「内容を確認」のボタンも濃いグレー■#33333Aで塗り、ボタン文字を淡いピンク■#F5DFE8にします。本文と背景、ボタン文字とボタン背景はどちらも約9.91:1です。

柔らかなピンクの面積を保ちたいときの直し方です。見出しと本文は文字サイズや太さで区別し、ボタンをページ内の小さな濃色の面として配置します。

グレーを広く使う：ピンクを見出しとボタンに絞る

ページ背景を明るいグレー■#F2F0F2にし、見出しとボタンを深いピンク■#873D5Bへ変更します。説明文は濃いグレー■#33333Aにし、ボタン文字には明るいグレー■#F2F0F2を使います。見出しと背景、ボタン文字とボタン背景は約6.50:1、本文と背景は約11.06:1です。

ページ全体の大部分をグレーの背景とし、ピンクを見出しやボタンの限られた範囲に置く案です。大きなピンクの面を減らすことで、操作を促す場所と説明を読む場所を分けられます。面積の比率に固定の正解はないため、情報量に合わせて調整します。

文字の読みやすさを確認してから面積を整える

修正は、①読みにくい文字の直後ろにある背景色を確認する、②その組み合わせのコントラスト比を計算する、③文字を濃くするか背景を調整する、④最後にピンクをどこまで広く使うか決める、という順に進めると整理しやすくなります。ボタンやリンクは文字だけでなく、形や配置でも操作できると分かるようにします。

WCAG（Web Content Accessibility Guidelines：Webコンテンツの利用しやすさに関する指針）2.2のAA（適合レベルの一つ）では、通常サイズの文字は原則4.5:1以上、規定の大きな文字は3:1以上が必要です。ここで示した数値は不透明な単色同士を計算したものです。写真や半透明の背景を重ねる場合、スマートフォンで文字が小さく表示される場合は、実際の状態で確認してください。

HEX（16進数でWebカラーを指定するコード）をHueRollに入力すれば、色の調整と選択色に対する白・黒のコントラスト確認ができます。ただし、任意のピンクとグレーを直接比較したり、AAの合否を自動判定したりはできません。この記事の2色同士の比率は別途計算しています。