太字だけでなく色でも強調していい？WEB文章の強調色の使い方
WEB記事で大事な言葉を見せるとき、太字だけでなく文字色も変えた方がよいのでしょうか。答えは、必要な場所なら併用して構いません。ただし、色を変えれば必ず強く伝わるわけではありません。太字だけで十分な場合もあり、色を増やすことでリンクと紛らわしくなることもあります。ここでは架空の図書館ボランティア募集ページを例に、同じ文章を太字だけで示す案と、太字に色を加える案を比較します。
太字を基本にして、色は特に見つけてほしい語句にだけ使う
例えば「読み聞かせボランティアの申込締切は11月6日17時です。当日受付はありません」という案内なら、まず「申込締切は11月6日17時」を太字にします。本文のほかの部分と文字色が同じでも、線の太さが変わるため、締切の位置を探す手掛かりになります。日時や受付条件を具体的な言葉で書くことが、色選びより先です。
重要な語句が一つだけで、文章が長い場合は、その語句を濃い強調色にする選択肢があります。一方、ほぼすべての文を太字や強調色にすると、結局どこを読んでほしいのか分かりにくくなります。段落ごとに強調が本当に必要な箇所を選び、文章の一部をまとめて塗り分けないようにします。
HTML（WEBページの文章の役割を示す記述方法）では、重要な内容を示すために<strong>を使えます。見た目だけ太くしたい場合はCSS（文字の色や大きさなどの表示を指定する仕組み）のfont-weightで調整する方法もあります。重要であるという意味と、単に太く見える装飾を区別して考えましょう。
同じ申込案内で太字だけと太字＋色を比較する
以下の色はHEX（「#」の後に0～9とA～Fの6桁を並べて指定するカラーコード）です。コントラスト比は文字と背景の相対的な明るさの差を示します。両案とも背景は白#FFFFFF、通常の本文は濃い青灰色#263746で統一します。この組み合わせのコントラスト比は約12.23:1です。
案A：締切の語句を本文と同じ色で太字にする
「読み聞かせボランティアの申込締切は11月6日17時です。当日受付はありません」という文章で、太字部分も濃い青灰色#263746を使います。白#FFFFFFとのコントラスト比は本文と同じ約12.23:1です。文字色を増やさずに、締切という情報を見つけやすくする案です。
この配置で十分に締切を探せるなら、色を追加する必要はありません。「当日受付はありません」も大事な条件なので、本文の中で省略せず、必要に応じて短く改行して伝えます。すべての重要事項を別々の色にするより、文言と太さを先に整えます。
案B：締切だけ濃い紫系の色を太字に重ねる
やや長い募集案内の中で締切を探しやすくしたい場合は、申込締切は11月6日17時の部分だけ、濃い紫系#713B55の太字にする案があります。白#FFFFFFとのコントラスト比は約8.54:1です。周囲の本文色#263746は変えず、重要な語句だけを限定して変化させます。
申込条件を淡い薄紫#F5EFF2の案内欄にまとめる場合は、本文色#263746との比が約10.78:1、濃い紫系#713B55の強調文字との比が約7.53:1になります。強調文字も背景を変えた後で検算します。逆に、淡いピンク灰色#B68C9Fを強調文字に使うと、白#FFFFFFでは約2.90:1、薄紫#F5EFF2では約2.56:1にしかならず、通常サイズの文字には適しません。
リンクとの区別とコントラストを最後に確認する
強調色をリンクにも使うと、太字の締切がクリックできると誤解される場合があります。例えば「募集要項を見る」という実際のリンクは、深い青#165C85に下線を付ける見た目とし、強調した締切とは役割を分けます。このリンク色は白#FFFFFFに対して約7.23:1、薄紫の案内欄#F5EFF2に対して約6.38:1です。リンクは色だけで操作できることを示さず、下線やフォーカス表示も確認します。
スマートフォンでは、色付きの語句が改行で分断されても意味が伝わるか、強調箇所だけが小さな文字になっていないかを確認してください。画面を白黒で見た場合にも、太さと文章そのもので申込締切が分かる形にすると、色への依存を減らせます。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。16px程度の太字を、大きな文字として安易に3:1で判断しないようにします。また、色だけを情報伝達の唯一の手段にしないことも重要です。上記は不透明な単色同士の計算値であり、写真の上などでは再確認してください。強調する目的は色を増やすことではなく、読者が必要な一文を正しく見つけられるようにすることです。