作品解説の文字が薄い 掲載する文字色と背景色を組で渡す

作品の色は意図どおりなのに、Webの紹介ページへ載せた解説の文字が薄く感じられる。絵や原稿を直す前に、作品の外に置かれた解説の文字色と背景色を、一組で確かめます。作品の表現として残す色と、情報を読むための掲載色は、分けて指定できます。

編集者へ渡すときも、作品画像と「文字を濃くしてください」だけでは、変更する範囲が曖昧です。原画像、正しい解説原文、文字色と背景色、表示見本、掲載先をそろえると、作品の配色を保つ要望と、解説の掲載配色を整える依頼を具体的に伝えられます。

作品の色と、作品の外に載る解説を分ける

作品「丸と四角の間」1.0では、紺の円、赤茶と黄土の二つの正方形、青緑の線を、淡い地の上に置いています。この画像の配色と、形の間に残る空きは、完成作品の表現として保ちます。

画像の下へ別に載せる解説は、次の一段落です。文章は完成原文に合わせ、句読点や言葉を変えずに使います。

左の円と右の四角の間には、背景の色が続いています。形をつなぐ青緑の線を、下の小さな四角へ重ねました。三つの形の位置と、その間に残る空きを一組で見せます。

この解説は画像へ焼き付けた文字ではなく、Webの本文として掲載する文字です。作品の淡い配色を保つことと、この一段落を読むための色を決めることを分けて考えると、画像や文章を変更せずに点検できる範囲がはっきりします。

作品と原文を固定して、文字色だけを比べる

同じ完成JPEGと同じ解説全文を二面に置き、解説の文字色だけを変えて表示しました。字体、大きさ、太さ、行間、文章幅、背景色、不透明度はそろえています。作品画像の画素や原SVG、解説の言葉は変更していません。

この画面では、Aの薄い文字は淡い背景に近く、字の輪郭が弱く見えました。Bの濃い文字は、同じ背景から輪郭がはっきり分かれて見えました。作品の色や解説の内容を保ったまま、別に載る文字の見え方が変わっています。

比べた解説の文字色・背景色と明暗差

掲載する色	A：薄い文字	B：濃い文字
文字色	#b6b8b2	#404a4e
背景色	#f4f1e9	#f4f1e9
明暗差の比	1.77:1	8.06:1

元の比較では、解説をメイリオ指定・20ピクセル・通常の太さで、行間36ピクセル、文章幅600ピクセルとして表示しました。表の比は、実際に適用された文字色と背景色からW3Cの相対輝度式で求めた数値です。表では小数第2位まで示し、基準との比較には丸める前の値を使っています。

明暗差の数値と、画面での確認を組み合わせる

WCAG 2.2の最低コントラストの基準では、普通の情報テキストに4.5:1以上の比を求めています。今回の解説はこの条件で扱い、Aは基準に届かず、Bは満たしました。文字の輪郭にできる中間色を拾うのではなく、文字色と背景色の組を確かめています。

数値で確かめた範囲は、この解説の文字色と背景色です。作品画像に含まれる色は、作品の表現として保ちます。掲載後は、読む方が使う画面で、大きさ、行間、文字の輪郭を確かめる段階も設けます。一段落の比の確認と、ページ全体や読む方にとっての使いやすさの確認は、それぞれの範囲で進めます。

編集者へ、残す表現と変更する範囲を渡す

今回の条件なら、作品の配色や原文を修正する依頼へ移る前に、解説の掲載色を指定できます。受け渡しでは、次のものをそろえます。

• 作品名と版を添えた原画像。残したい色、形、余白も示します。
• 正しい解説原文。文章の改稿を依頼するか、そのまま載せるかを明記します。
• 解説の文字色と背景色の組。色番号に、適用する場所を添えます。
• 表示見本と掲載先。確認したブラウザーや画面の大きさ、調整後に誰が確かめるかも伝えます。

色番号だけでは、その色を画像内へ使うのか、画像の外の解説へ使うのかが伝わりません。たとえば、この作品と解説を渡すなら、次のように編集範囲を指定できます。

作品画像の配色と、添付した解説の言葉は保ってください。画像の下に置く解説は、背景を#f4f1e9、文字を#404a4eとして確認したいです。掲載予定のページで見本を作り、文字の大きさと行間も含めて確認できるようにしてください。

掲載先の背景がまだ決まっていない場合は、作品の色だけから解説の文字色を決めず、候補の背景と組み合わせた見本を依頼します。調整後も、原画像の表現と、完成原文の文字が保たれているかへ戻って照合します。

作品紹介の編集を相談するときに

複写の作品集・カタログ・Web制作では、お持ちの作品画像や原稿から、見せる相手と掲載する内容に合わせて紹介ページを考えます。原画像、完成原文、残したい作品表現、解説の色の組、表示見本と掲載先を添えると、画像を保つ範囲と、掲載側で調整したい範囲を話し合いやすくなります。

原形式の受付、文字色・背景色の編集、原稿の校正や改稿、費用、公開後の更新までどこを依頼するかは、素材と掲載先を見ながら個別に確かめます。作品画像と解説の掲載方法を相談するから、残したい表現と、解説の見え方で気になっている箇所をお知らせください。