引用文の配色はどうする？WEB記事で本文との差を自然に作る方法

WEB記事でほかの文章や発言を引用するとき、本文との違いを色で示したいことがあります。ただし、引用部分を鮮やかに塗りすぎると、記事全体の流れが途切れて見える場合があります。反対に文字を薄くしすぎると、引用の内容や出典が読みにくくなります。ここでは架空の家庭菜園の記事を想定し、白背景のまま区切る方法と、淡い背景を使う方法を比較します。

引用文は背景色だけでなく、余白と出典でも区別する

引用文とは、別の文章や発言から内容を取り上げて示した部分です。通常の本文と混同されないよう、引用の前後に余白を取り、文字の位置を少し内側へ寄せるなど、レイアウトで区別します。色を変える場合も、目立たせる目的は装飾ではなく、「ここから引用が始まる」と伝えることです。

引用の長さが数行なら、左側に細い線を付けるだけでも本文との違いを示せます。段落全体を一つにまとめたいなら、淡い背景の引用欄を使う選択肢もあります。どちらの場合も文字は十分に濃くし、引用した文章と自分の説明の役割を分けましょう。

引用文のそばには、実際の出典となる著者名・資料名・掲載日など、確認できる情報を示します。色やカギ括弧だけで出典が分かるわけではありません。なお、以下の「種をまく前に土の湿り具合を確かめる」は見た目を説明するための仮文であり、実在の発言を引用したものではありません。

本文に自然になじむ引用文の配色を2案で比較

ここではHEX（「#」の後ろに0〜9とA〜Fを6桁並べる色コード）を使います。コントラスト比とは、前景と背景の相対的な明るさの差を示す数値です。まず記事の背景を白■#FFFFFF、本文を濃い青灰色■#293845にすると、文字と背景のコントラスト比は約12.03:1です。

案1：白背景のまま、左の線と余白で区切る

• 引用文の背景は記事と同じ白■#FFFFFFにし、文字には落ち着いた深緑灰色■#304B42を使います。文字と背景のコントラスト比は約9.50:1です。
• 引用文の左に深緑■#2F695Aの線を添えます。線と白■#FFFFFFのコントラスト比は約6.38:1です。線が飾りの場合も、文章の始まりが分かる余白を残します。
• 引用元を示す文字には、少し抑えた灰緑■#53695Dを使います。白■#FFFFFFとのコントラスト比は約5.92:1です。出典の表示を極端に小さくせず、引用文の直後に置きます。

この案は、短い引用を記事の途中に入れたいときの一例です。背景を変えずに文字の位置と線で区切るため、写真や見出しが多いページでも色面を増やさずに済みます。仮の文を実際の記事で使う際は、必ず確認済みの引用内容と出典に置き換えます。

案2：淡い背景の引用欄で数行をまとめる

引用が数行にわたる場合は、背景を淡いセージグリーン■#ECF3EFにする案があります。引用文の文字は深緑灰色■#304B42のままで、背景とのコントラスト比は約8.43:1です。出典には灰緑■#53695Dを使い、同じ背景■#ECF3EFとの比は約5.25:1です。左側の線を深緑■#2F695Aにする場合、淡い背景■#ECF3EFに対して約5.67:1になります。

白■#FFFFFFと淡い背景■#ECF3EFの差は約1.13:1と小さめです。引用欄が見つけにくいときは、背景をさらに鮮やかにする前に、上下の余白や線の太さを調整します。また、出典を薄い灰緑■#A0ACA4にすると白■#FFFFFFの上では約2.35:1しかなく、通常サイズの文字には不十分です。

出典の見せ方と、スマホでの読みやすさを確認する

引用をWEBページの構造として示す場合は、HTML（WEBページの内容の役割を表す記述方法）のblockquote要素を使う方法があります。これはまとまった引用を示すための要素です。画面上の出典表記は引用文の直後に分けて置き、著者や資料を読者が確かめられるようにします。出典がリンクの場合は、文字色だけに頼らず下線などでリンクだと伝えましょう。

スマートフォンでは引用欄の左右の余白を取りすぎると、本文が極端に細くなります。長い引用が読みにくくならない幅に調整し、引用文と出典が離れすぎないようにします。また、本文に写真や透明な色を重ねると背景の明るさが変わるため、単色の数値をそのまま流用しません。

WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。引用文だけでなく出典の文字にも適用して確認します。上の値は不透明な単色同士の計算結果です。本文との差を自然に作るには、文字を薄くするより、余白・線・淡い背景・出典表記を組み合わせることが大切です。